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

Question

I was wondering how to get the specific data cell if the button is clicked inside my the HTML table. 我想知道如果在HTML表格内单击按钮如何获取特定的数据单元格。 I used jquery on it but only the first row was alert. 我在上面使用了jQuery，但是只有第一行是警报。

This is my Html. 这是我的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>

This is my .js 这是我的.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());
});

The data of the table is on json 表的数据在json上

Answer 1

One approach to accomplish that: 实现该目标的一种方法：

1) use data-attributes at the button tag with your desired value; 1）在按钮标签处使用具有所需值的数据属性；

2) remove id from the button and add a semantic class do the button to allow event binding later (you can have only one unique id per document). 2）从按钮中删除id并添加一个语义类，在按钮中添加一个语义类，以允许以后进行事件绑定（每个文档只能有一个唯一的id）。

3) bind event directly to the button and get value reading the correspondent data-attr. 3）将事件直接绑定到按钮，并获取读取相应数据属性的值。

Something like that: 像这样：

...
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

There are few issues in your code 您的代码中几乎没有问题

1: it is trying to assign same id to different td elements, which will make your html invalid. 1：它正在尝试将相同的ID分配给不同的td元素，这会使您的html无效。

2: you are delegating the event based on a an id selector which will definitely work for a single element. 2：您要根据ID选择器委派该事件，该选择器肯定适用于单个元素。

You should try with changing the choice of selectors, if you are targeting multiple items then you can use class selector. 您应该尝试更改选择器的选择，如果您要定位多个项目，则可以使用类选择器。

Check the example below, it giving the each copy button different id attribute but same class attribute. 检查下面的示例，它为每个复制按钮赋予了不同的id属性，但具有相同的class属性。

Attach the event with this class Copy and using this you can get the other elements of the same row. 将事件附加到此类Copy上，并使用该类可以获取同一行的其他元素。

 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

Use closest to get the near tr to your button in the table : 使用最接近值来获得表格中按钮的接近度：

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

Then get all the td data you need 然后获取所需的所有td数据

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-01-09 02:54:28

解决方案2
1 2017-01-09 03:12:04

解决方案3
0 2017-01-09 03:04:15

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-01-09 02:54:28

解决方案2 1 2017-01-09 03:12:04

解决方案3 0 2017-01-09 03:04:15

解决方案1
1 已采纳 2017-01-09 02:54:28

解决方案2
1 2017-01-09 03:12:04

解决方案3
0 2017-01-09 03:04:15