Мне было интересно, как получить конкретную ячейку данных, если нажать кнопку внутри моей таблицы 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 .

0
VLR 9 Янв 2017 в 05:47

3 ответа

Лучший ответ

Один из подходов для достижения этой цели:

1) используйте атрибуты данных в теге кнопки с нужным значением;

2) удалите идентификатор из кнопки и добавьте семантический класс, сделайте кнопку, чтобы разрешить привязку событий позже (вы можете иметь только один уникальный идентификатор для документа).

3) привязать событие непосредственно к кнопке и получить значение, читая соответствующий data-attr.

Что-то такое:

...
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);
});
1
mrlew 9 Янв 2017 в 03:03

Используйте ближайший, чтобы получить значение ближайшего к вашей кнопке в таблице:

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

Затем получите все необходимые данные.

0
Flavio T. 9 Янв 2017 в 03:04

В вашем коде мало проблем

1: он пытается присвоить один и тот же идентификатор различным элементам td, что сделает ваш HTML недействительным.

2: вы делегируете событие на основе селектора идентификатора, который определенно будет работать для одного элемента.

Вы должны попытаться изменить выбор селекторов, если вы нацеливаетесь на несколько элементов, то вы можете использовать селектор классов.

Посмотрите на приведенный ниже пример, он дает каждой кнопке копирования свой атрибут id, но один и тот же атрибут класса.

Прикрепите событие с помощью этого класса 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>
1
Ilia G 9 Янв 2017 в 03:21