javascript - Html Table row id checkbox

572

I would like to have the database table id on each row as checkbox value of a dynamic html table

I am using ajax to fetch data from mysql database and create a new variable as html text to append on tbody of table

Code of HTML

<div id="ftbl">
  <label for="urbandata">View urban data</label>
  <table >
   <thead>
    <tr>
     <th>Check</th>
     <th>ID</th>
     <th>Type</th>
     <th>Master</th>
     <th>Slave</th>
     <th>Orbit</th>
     <th>Mode</th>
     <th>Action</th>
    </tr>
   </thead>
   <tbody>
   </tbody>
  </table>
</div>

Code of JS

$.ajax({
  url: "fetchurban.php",
  method: "POST",
  data:{id:id},
  dataType: "JSON",
  success: function(data){
   if (data){
   var trHTML = '';
    $.each(data, function (i, item) {
      trHTML +='<tr><td><input type="checkbox" id="checkview" onclick="QuickView()" name="'+ item.TblID +'"></td><td>' + item.Type + '</td><td>' + item.Master + '</td><td>' + item.Slave + '</td><td>' + item.Orbit + '</td><td>' + item.Mode + '</td><td><a href='+ item.ImgTIF+ ' title="Download High Quality" data-toggle="tooltip"><span > </span></a><a href=#?id='+ item.ImgLow + ' title="Download Low Quality" data-toggle="tooltip"><span ></span></a></td></tr>' ;
    });
    $('#ftbl tbody').append(trHTML);
   }
  }
 })
})

If the user select the checkbox I would like to have the id of database table. Now with this code I have the same id to all rows of table

450

Answer

Solution:

You could set the identifier as adata- element of the input:

function QuickView(element) {
 var rowId = $(element).data('id');
 // here comes the rest of your code.
}

$.ajax({
  url: "fetchurban.php",
  method: "POST",
  data:{id:id},
  dataType: "JSON",
  success: function(data){
   if (data){
   var trHTML = '';
    $.each(data, function (i, item) {
      trHTML +='<tr><td><input type="checkbox" data-id="'+ item.TblID +'" onclick="QuickView(this)"></td><td>' + item.Type + '</td><td>' + item.Master + '</td><td>' + item.Slave + '</td><td>' + item.Orbit + '</td><td>' + item.Mode + '</td><td><a href='+ item.ImgTIF+ ' title="Download High Quality" data-toggle="tooltip"><span > </span></a><a href=#?id='+ item.ImgLow + ' title="Download Low Quality" data-toggle="tooltip"><span ></span></a></td></tr>' ;
    });
    $('#ftbl tbody').append(trHTML);
   }
  }
 })
})

Here's a demo of the above.

EDIT:

I removed the initial sentence regarding not being allowed to use an integer for the ID attribute as it is no longer valid as Quentin pointed out in the comments. It's sometimes hard to forget what you once learned.

People are also looking for solutions to the problem: how to run the function on load of my php without using jscript?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.