Question

我尝试使用其他建议的解决方案，但在这种情况下它们要么不适用，要么不起作用。

此页面上的表是使用JavaScript根据行数据自动生成的。由于代码的高度复杂性（无关紧要），我简化了输入数据，并在此处在HTML上添加了简化的生成表。

我需要确定要单击的单元格，以便进行编辑功能来修改表的结构。

编辑：我需要包含表（包括标题）在内的被单击单元格的名称。另外，我还需要在单元格区域内单击，而不仅仅是在输入区域中单击下面的答案。直到最近，Stackoveflow才让我编辑问题并添加详细信息。

此外，Heretic Monkey的“ duplicate”正在使用jquery，php和ajax，因此到目前为止没有发现重复。顺便说一句，这是jsfiddle：jsfiddle.net/7mxde8a5

<!DOCTYPE html>
<html lang="en">

<head>
  <title>test</title>
  <meta charset="utf-8">
  <style>
    body {
      text-align: left;
      background-color: #dddddd;
      margin: 0px;
      overflow: hidden
    }

    #container {
      margin: 10px;
      text-align: left;
    }

    table {
      border-collapse: collapse;
    }

    th,
    td {
      padding: 5px;
    }

    .table tr :hover {
      background-color: #ffff99;
    }
  </style>
</head>

<body>
  <div id="container">
  </div>
  <table class='table' ;>
    <th style="background-color:#8C92DE; border: 1px solid #000"><label><input type="checkbox" value="h1" name="100"></label> h1</th>
    </tr>
    <td style="background-color:#d7d9f2; border: 1px solid #000">aaa <input type="text" name=101></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#80B9D8; border: 1px solid #000"><label><input type="checkbox" value="h2" name="200"></label> h2</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">aaa <input type="text" name=201></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">bbb <input type="text" name=202></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">ccc <input type="text" name=203></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#80B9D8; border: 1px solid #000"><label><input type="checkbox" value="h3" name="210"></label> h3</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">aaa <input type="text" name=211></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#5ae25a; border: 1px solid #000"><label><input type="checkbox" value="h4" name="300"></label> h4</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000">aaa <input type="text" name=301></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000">bbb <input type="text" name=302></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000">ccc <input type="text" name=303></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000"><label><input type="checkbox" value="ddd" name="304"></label> ddd</td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000"><label><input type="checkbox" value="eee" name="305"></label> eee</td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#edfced; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#ff7d7d; border: 1px solid #000"><label><input type="checkbox" value="h5" name="400"></label> h5</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#edfced; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#ffcaca; border: 1px solid #000"><label><input type="checkbox" value="aaa" name="401"></label> aaa</td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#edfced; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#ffcaca; border: 1px solid #000"><label><input type="checkbox" value="bbb" name="402"></label> bbb</td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#80B9D8; border: 1px solid #000"><label><input type="checkbox" value="h6" name="220"></label> h6</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">aaa <input type="text" name=221></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">bbb <input type="text" name=222></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">ccc <input type="text" name=223></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">ddd <input type="text" name=224></td>
    </tr>
  </table>
  <script src="main.js"></script>
</body>

</html>

Answer 1

click事件具有target属性，该属性告诉您被单击的元素。像这样：

document.querySelectorAll('td').forEach(cell => {
  cell.addEventListener('click', evt => {
    console.log('The element that was clicked was ', evt.target);
  }); 
});

请注意，如果您按照我刚才的方式使用箭头函数定义每个单元格上的回调，则实际上可以直接在事件处理程序中直接引用cell，而不使用evt.target。

Answer 2

在生成表的代码中，您可以在每个td上放置唯一的数据属性：data-row和data-column之类的东西就可以了。

然后，事件侦听器可以使用event.target.getAttribute("data-row")和event.target.getAttribute("data-column")来标识单元格。

Answer 3

您对多维数组有什么想法吗？您可以将表想象为多维数组。就像sub normalizeDateTime { ... # ??? } print normalizeDateTime('2019-09-17T16:15:20Z', 'ET');

在这里，我向您展示2D阵列的示例，例如...

您可以像...一样使用js

**[row][col].onClick = yourFunction()**

我给你一个完整的例子...

<script language="javascript">
        var tbl = document.getElementById("tblMain");
        if (tbl != null) {
            for (var i = 0; i < tbl.rows.length; i++) {
                for (var j = 0; j < tbl.rows[i].cells.length; j++)
                    tbl.rows[i].cells[j].onclick = function () { getval(this); };
            }
        }
        function getval(cel) {
            alert(cel.innerHTML);
        }

如何确定使用javascript单击表上的哪个单元格？

3 个答案: