Question

我正在制作一个测试网站，我将在其中显示4个表格（表格：A，B，C和D）。用户将能够单击任何表行并在警报框中查看一条信息（暂时）。我正在努力的是为这些表设置click事件。例如，我需要点击两次才能触发点击事件并显示警告框，这会发生在每个表格中。

这就是我设置逻辑的方法：

<!--Table A-->
<table id="table-A" class="table table-striped table-sm">
            <thead>
              <tr>
                Table 1
              </tr>
            </thead>
            <tbody>
              <tr>
              <td onclick="AddRowHandler('table-A')">
              Info 1
              </td>
              </tr>

               <tr>
              <td onclick="AddRowHandler('table-A')">
              Info 2
              </td>
              </tr>

               <tr>
              <td onclick="AddRowHandler('table-A')">
              Info 3
              </td>
              </tr>
            </tbody>
          </table>
...Same structure for tables B, C and D...

<script>
function AddRowHandler(tableID){
var table = document.getElementById(tableID);
    var rows = table.getElementsByTagName("tr");

    for (i = 1; i < rows.length; i++) {
      var currentRow = table.rows[i];

      var createClickHandler =
        function (row) {
          return function () {
            var cell = row.id;
            alert(cell + " was clicked!");
            };
          };
        };
      currentRow.onclick = createClickHandler(currentRow);
}
</script>

我的问题是，如何正确设置点击事件，是否有更有效的方法？最后一个想法源于可能添加更多表格。

Answer 1

您最好在tr上添加点击处理程序并获取textContent（我假设仅在td s中有数据）。

＆＃13;

var el =  document.getElementById("data")
function AddRowHandler(ref){
   el.textContent = ref.textContent
}

＆＃13;

#data{
  padding : 20px;
  border: solid 1px;
}

＆＃13;

<table id="table-A" class="table table-striped table-sm">
            <thead>
              <tr>
                Table 1
              </tr>
            </thead>
            <tbody>
              <tr onclick="AddRowHandler(this)">
              <td >
              Info 1
              </td>
               <td >
              Info 2
              </td>
              </tr>

               <tr onclick="AddRowHandler(this)">
              <td >
              Info 2
              </td>
              </tr>

               <tr onclick="AddRowHandler(this)">
              <td>
              Info 3
              </td>
              </tr>
            </tbody>
          </table>
          
          <div id="data"></div>

＆＃13;

获取为多个表设置的单击事件处理程序

1 个答案: