Question

我想知道如果在HTML表格中单击按钮，如何获取特定数据单元格。我在上面使用了jquery，但只有第一行是警报。

这是我的Html。

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  rel="stylesheet">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" ></script>

<script type="text/javascript" src = "address.js"></script>




  </head>
  <body>
    <p><br/><br/></p>
    <div class = "container">
            <table id="table" class = "table table-bordered table-striped table-hover">
                <thead> 
                    <tr>
                  <th>State</th>
                  <th>Street Address</th>
                   <th>Street Name</th>
                  <th>Copy</th>

                    </tr>

                </thead>

            </table>
    </div>



  </body>
</html>

这是我的.js

$.getJSON("MOCK_DATA.json", function(data){

  var items = [];

  $.each(data, function(key, val){
    items.push("<tr>");
    items.push("<td  id=''"+key+"''>"+val.state+"</td>");
    items.push("<td id=''"+key+"''>"+val.street_add+"</td>");
    items.push("<td id=''"+key+"''>"+val.street_name+"</td>");
    items.push("<td>"+'<button type="button" class="btn btn-primary" id="copy">Copy</button>'+"</td>");



        items.push("</tr>");


 });

  $("<tbody/>", {html: items.join("")}).appendTo("table");




});


 $(document).on("click", "#copy", function() {
       alert("Copied " + $("td" ).html());
});

该表的数据位于json

Answer 1

实现这一目标的一种方法：

1）在按钮标记处使用data-attributes并使用您想要的值;

2）从按钮中删除id并添加一个语义类按钮以便稍后允许事件绑定（每个文档只能有一个唯一的id）。

3）将事件直接绑定到按钮并获取读取对应数据的值。

类似的东西：

...
items.push("<td>"+'<button type="button" class="btn btn-primary btn-copy" data-value="' + val.street_name + '">Copy</button>'+"</td>");
...
$(document).on("click", ".btn-copy", function() {
       var value = $(this).attr('data-value');
       alert("Copied " + value);
});

Answer 2

您的代码中存在一些问题

1：它试图将相同的id分配给不同的td元素，这会使你的html无效。

2：您根据一个id选择器委派事件，该选择器肯定适用于单个元素。

您应尝试更改选择器的选择，如果您要定位多个项目，则可以使用类选择器。

检查下面的示例，它为每个复制按钮提供不同的id属性，但是同一个类属性。

使用此类附加事件复制并使用此方法可以获取同一行的其他元素。

var data = [{
  state: "A",
  street_add: "A",
  street_name: "A"
}, {
  state: "B",
  street_add: "B",
  street_name: "B"
}]

var items = [];

$.each(data, function(key, val) {
  items.push("<tr>");
  items.push("<td  class='state_" + key + "'>" + val.state + "</td>");
  items.push("<td class='street_add_" + key + "'>" + val.street_add + "</td>");
  items.push("<td class='street_name_" + key + "'>" + val.street_name + "</td>");
  items.push("<td>" + '<button type="button" class="btn btn-primary copy" id="copy' + key + '">Copy</button>' + "</td>");

  items.push("</tr>");


});

$("<tbody/>", {
  html: items.join("")
}).appendTo("table");



$("#table").on("click", ".copy", function() {
  console.log("Copied ", $(this).parent().siblings());
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <head>
    <body>
      <p>
        <br/>
        <br/>
      </p>
      <div class="container">
        <table id="table" class="table table-bordered table-striped table-hover">
          <thead>
            <tr>
              <th>State</th>
              <th>Street Address</th>
              <th>Street Name</th>
              <th>Copy</th>
            </tr>
          </thead>
        </table>
      </div>
    </body>
</html>

Answer 3

使用最近距离来获取表格中按钮的近tr：

var tr =$(this).closest("tr")

然后获取所需的所有td数据

单击按钮时，获取表格中的特定数据单元格

3 个答案: