jquery table onclick for particular column

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.

2 answers

  • answered 2018-04-17 05:20 webizone

    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 2018-04-17 05:20 kalai

    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());
                            });
                        });