请查看此代码段

Question

我正在使用html5和jquery来设置动态表，直到那时我可以毫无问题地将元素添加到表中，但我无法检索其列的值。所以我有以下问题：

如何通过点击 ROW ？
我应该始终使用data-name，id，例如第一个线？

$(document).on("change", "#TabClientesAdicionados", function(e) {
  alert('?');
});

<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/2.1.1/jquery.min.js"></script>

<hr>
<table id="TabClientesAdicionados" class="table table-hover">
  <thead>
    <tr>
      <th> ID </th>
      <th> Name </th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-id="Bruno">1</td>
      <td data-nome="Bruno">Bruno</td>
      <td><a href="#">Details</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Josep</td>
      <td><a href="#"> Details 	</a></td>
    </tr>
  </tbody>
</table>

Answer 1

我会按照以下代码段进行操作。

您需要将事件绑定到行tr ant然后获取其每个子节点。

通过添加数据属性，您可以设置列名称。如果您最终需要提取特定单元格的值，这也可能有所帮助。

顺便提一下，您还可以添加名为data-value或类似内容的第二个数据属性 - 如果您担心解析的html内容可能会导致您的值出现问题。

＆＃13;

$(document).ready(function() {

  $("#mytable").on('click', 'tr', onCellClick);
  //Bind the event to the table row

  function onCellClick() {
    let row = $(this); //get the jquery Object for the row
    let rowValues = {}; //An empty object to hold your data
    let temp;

    //extract the value of every cell in the row
    //Doing it this way gives you flexibility on the amount of colums you have
    row.find('td').each(function(item) {
      temp = $(this);
      rowValues[temp.data('column')] = temp.text();
      //this could be changed to  
      //rowValues[temp.data('column')] = temp.data('value);
      //if you desire to use a separate data-value property
    });

    console.log(rowValues);
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%" id="mytable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td data-column="name" data-value="Jill">Jill</td> <!-Adding value property-->
    <td data-column="lastname">Smith</td>
    <td data-column="age">50</td>
  </tr>
  <tr>
    <td data-column="name">Eve</td>
    <td data-column="lastname">Jackson</td>
    <td data-column="age">94</td>
  </tr>
</table>

＆＃13;

Answer 2

如何通过单击ROW来恢复表数据？

您可以将点击事件绑定到TR元素并获取信息。
我是否应该始终使用数据名称id，例如第一行？

是的，因为您不希望解析的HTML操纵数据。数据属性是将相关数据（无HTML）保存到DOM元素的更好方法。

请查看此代码段

此方法将click事件绑定到TR元素

＆＃13;

$('#TabClientesAdicionados tbody tr').click(function() {
  var data = { name: '', id: '' };
  
  $(this).children('td').each(function() {
    var name = $(this).data('nome');
    if (name) {
      data.name = name;
    }
    
    var id = $(this).data('id');
    if (id) {
      data.id = id;
    }      
  });
  
  console.log(data);
});

＆＃13;

<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/2.1.1/jquery.min.js"></script>

<hr>
<table id="TabClientesAdicionados" class="table table-hover">
  <thead>
    <tr>
      <th> ID </th>
      <th> Name </th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-id="Bruno_1">1</td>
      <td data-nome="Bruno">Bruno</td>
      <td><a href="#">Details</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Josep</td>
      <td><a href="#"> Details 	</a></td>
    </tr>
  </tbody>
</table>

＆＃13;

通过单击带有jquery和html的行从表中检索列值

2 个答案:

请查看此代码段