jquery table onclick for particular column

Question

This is my html table.

<table id="status_table" class="table table-bordered">
            <tr>
             <th>S.No</th>
             <th>PRODUCT NO.</th>
             <th>DESCRIPTION</th>
             <th>QTY</th>
             <th>SCOPE</th>
             <th>AMOUNT</th>
             <th>GST %</th>
             <th>GST AMOUNT</th>
             <th>FINAL AMOUNT</th>
             <th>VENDOR ID</th>
             <th>Delivery Date</th>
             <th>Submited Date</th>
             <th>Status</th>
            </tr>
    </table>

Here I append table data from json

$("#status_table > tbody").append(
    "<tr><td id='sno'>" 
    + sno 
    + "</td><td id='product_id'>" 
    + obj.status[i].productno 
    + "</td><td id='description'>" 
    + obj.status[i].description 
    + "</td><td id='qty'>" 
    + obj.status[i].qty 
    + "</td><td id='scope'><a href='#'>view scope</a></td><td id='amount'>" 
    + obj.status[i].amount 
    + "</td><td id='gstp'>" 
    + obj.status[i].gst_p 
    + "</td><td id='gstamount'>" 
    + obj.status[i].gst_amount 
    + "</td><td id='finalamount'>" 
    + obj.status[i].final_amount 
    + "</td><td id='vendor_id'>" 
    + obj.status[i].vendor_id 
    + "</td><td id='ddate'>" 
    + obj.status[i].delivery_date 
    + "</td><td id='date'>" 
    + obj.status[i].date 
    + "</td><td id='status'>" 
    + status 
    + "</td></tr>");

I need perform onclick for (scope) particular column. Here i can't able get the cell column too.

First thing. ID should be unique. In your code it is duplicating. — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Apr 17, 2018 at 5:29
You can target the element like $('#status_table tr td#scope'). But my suggestion is change the id to class. — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Apr 17, 2018 at 5:31
make it a habit to clean up your code and make it more readable if you want it answered. And for God's sake, keep your code lines short — mrid
– mrid, Commented Apr 17, 2018 at 5:32

webizone · Accepted Answer · 2018-04-17 05:31:45Z

1

You don't have "<tbody>" in your code. Try the following

    <table id="status_table" class="table table-bordered">
      <tbody>
        <tr>
         <th>S.No</th>
         <th>PRODUCT NO.</th>
         <th>DESCRIPTION</th>
         <th>QTY</th>
         <th>SCOPE</th>
         <th>AMOUNT</th>
         <th>GST %</th>
         <th>GST AMOUNT</th>
         <th>FINAL AMOUNT</th>
         <th>VENDOR ID</th>
         <th>Delivery Date</th>
         <th>Submited Date</th>
         <th>Status</th>
        </tr>
  </tbody>
</table>

answered Apr 17, 2018 at 5:31

webizone

611 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kalai · Accepted Answer · 2018-04-17 05:56:54Z

1

try this

$("#status_table > tbody").append("<tr class="use-address"><td id='sno' >" + sno + "</td><td id='product_id'>" + obj.status[i].productno + "</td><td id='description'>" + obj.status[i].description + "</td><td id='qty'>" + obj.status[i].qty + "</td><td id='scope'><a href='#'>view scope</a></td><td id='amount'>" + obj.status[i].amount + "</td><td id='gstp'>" + obj.status[i].gst_p + "</td><td id='gstamount'>" + obj.status[i].gst_amount + "</td><td id='finalamount'>" + obj.status[i].final_amount + "</td><td id='vendor_id'>" + obj.status[i].vendor_id + "</td><td id='ddate'>" + obj.status[i].delivery_date + "</td><td id='date'>" + obj.status[i].date + "</td><td id='status'>" + status + "</td></tr>");

 $(".use-address").click(function () {
                        var $row = $(this).closest("tr");    // Find the row
                        var $tds = $row.find("td");
                        $.each($tds, function () {
                            alert($(this).text());
                            console.log($(this).text());
                        });
                    });

answered Apr 17, 2018 at 5:56

kalai

18612 bronze badges

1 Comment

kalai Over a year ago

$(".use-address").click(function (e) { alert("Row: " + (this.rowIndex) + ", Column: " + (e.toElement.cellIndex));

Collectives™ on Stack Overflow

jquery table onclick for particular column

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related