HTML表格行ID复选框

Question

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 class="col-sm-6" id="ftbl">
    <label for="urbandata">View urban data</label>
    <table class="table table-bordered table-striped">
      <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 class="glyphicon glyphicon-download"> </span></a><a href=#?id='+ item.ImgLow + ' title="Download Low Quality" data-toggle="tooltip"><span class="glyphicon glyphicon-cloud-download"></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

Answer 1

You could set the identifier as a data- 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 class="glyphicon glyphicon-download"> </span></a><a href=#?id='+ item.ImgLow + ' title="Download Low Quality" data-toggle="tooltip"><span class="glyphicon glyphicon-cloud-download"></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.