Html 表格行 id 复选框

Question

我想将每一行的数据库表 ID 作为动态 html 表的复选框值

我正在使用 ajax 从 mysql 数据库中获取数据并创建一个新变量作为 html 文本附加到表的 tbody 上

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>

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

如果用户选择复选框，我希望获得数据库表的 ID。 现在有了这段代码，我对表的所有行都有相同的 id

Answer 1

您可以将标识符设置为输入的data- 元素：

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

这是上面的demo。

编辑：

我删除了关于不允许使用整数作为 ID 属性的初始语句，因为它不再有效，正如 Quentin 在 cmets 中指出的那样。有时很难忘记你曾经学到的东西。