Question

我想创建一个带有onclick函数的HTML表来获取行的键和值，到目前为止onclick函数正在工作但它为我显示和清空数组，我该如何解决这个问题。感谢。

当您单击第一行时，我希望以此格式显示在控制台日志中：

{ "name":"Clark", "age":29};

这是我的代码

＆＃13;

var table = document.getElementById("tableID");
if (table != null) {
  for (var i = 0; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      tableText(this);
    };
  }
}

function tableText(tableRow) {
  var myJSON = JSON.stringify(tableRow);
  console.log(myJSON);
}

＆＃13;

<table align="center" id="tableID" border="1" style="cursor: pointer;">
<thead>
    <tr>
        <th hidden="hidden"></th>
        <th>name</th>
        <th>age</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td >Clark</td>
        <td>29</td>
    </tr>
    <tr>
        <td >Bruce</td>
        <td>30</td>
    </tr>
</tbody>
</table>

＆＃13;

Answer 1

我认为您可以使用tr.innerTest来获取代码中的值

Answer 2

我编辑了我的答案，将数据作为对象返回。运行脚本并查看。

＆＃13;

var table = document.getElementById("tableID");
if (table) {
  for (var i = 0; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      tableText(this);
    };
  }
}

function tableText(tableRow) {
  var name = tableRow.childNodes[1].innerHTML;
  var age = tableRow.childNodes[3].innerHTML;
  var obj = {'name': name, 'age': age};
  console.log(obj);
}

＆＃13;

<table align="center" id="tableID" border="1" style="cursor: pointer;">
<thead>
    <tr>
        <th hidden="hidden"></th>
        <th>name</th>
        <th>age</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td >Clark</td>
        <td>29</td>
    </tr>
    <tr>
        <td >Bruce</td>
        <td>30</td>
    </tr>
</tbody>
</table>

＆＃13;

Answer 3

如果您使用的是jQuery，可以像这样添加一个eventlistener到表中

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<table align="center" id="tableID" border="1" style="cursor: pointer;">
  <tr>
    <td>Text</td>
    <td>MoreText</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Text</td>
    <td>MoreText</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Text</td>
    <td>MoreText</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Text</td>
    <td>MoreText</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>

＆＃13;

Send/Recv

＆＃13;

Answer 4

有许多方法可以完成您所追求的目标，但是一种强大且可扩展的方法是从表标题行中获取属性名称，然后从单击的行中获取值。

我不知道你为什么在标题中隐藏了单元格，这只会让事情复杂化。如果您将它用于数据，那么在关联对象或表或行的data-*属性中会更好。

function getRowDetails(event) {
  row = this;
  var table = row.parentNode.parentNode;
  var header = table.rows[0];
  
  // Get property names from header cells
  var props = [].reduce.call(header.cells, function(acc, cell ) {
    if (!cell.hasAttribute('hidden')) {
      acc.push(cell.textContent);
    }
    return acc;
  }, []);
  
  // Get value for each prop from data cell clicked on
  var result = props.reduce(function(acc, prop, i) {
    acc[prop] = row.cells[i].textContent;
    return acc;
  }, {});
  
  // Do something with result
  console.log(result);
  return result;
}

// Add listener to body rows, could also put single listener on table
// and use event.target to find row
window.onload = function() {
  [].forEach.call(document.getElementsByTagName('tr'), function(row, i) {
    if (i) row.addEventListener('click', getRowDetails, false);
  });
}

<table align="center" id="tableID" border="1">
<thead>
  <tr><th hidden="hidden"></th><th>name</th><th>age</th></tr>
</thead>
<tbody style="cursor: pointer;">
  <tr><td >Clark</td><td>29</td></tr>
  <tr><td >Bruce</td><td>30</td></tr>
</tbody>
</table>

HTML表onClick函数获取表行键和值

4 个答案: