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

      }

    }

  })

})

这是上面的演示。

编辑：

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