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) {&nbsp; var rowId = $(element).data('id');&nbsp; // here comes the rest of your code.}$.ajax({&nbsp; &nbsp; url: "fetchurban.php",&nbsp; &nbsp; method: "POST",&nbsp; &nbsp; data:{id:id},&nbsp; &nbsp; dataType: "JSON",&nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; if (data){&nbsp; &nbsp; &nbsp; var trHTML = '';&nbsp; &nbsp; &nbsp; &nbsp; $.each(data, function (i, item) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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>' ;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $('#ftbl tbody').append(trHTML);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; })})这是上面的演示。编辑：我删除了关于不允许对 ID 属性使用整数的初始句子，因为正如 Quentin 在评论中指出的那样，它不再有效。有时很难忘记你曾经学到的东西。