javascript - 如何获取选中的复选框在表格中的位置

Question

我有一张表格，每一行都有一堆复选框。我怎样才能找到复选框的位置，例如1A 或 1B 当在第一行中选中两个或一个复选框时。我试图修改的页面根据行和列的两个因素动态生成表格。所以我只需要获取 rowname 和 colname 以便进一步编程。例如10(A) 如果第一行的名称是“10”。

<table id="mytable">
    <tr>
        <td> </td>
        <td align="center"> A </td>
        <td align="center"> B </td>
    </tr>
    <tr>
        <td> 1 </td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td> 2</td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>
    </table>
    <tr> <button id="save">Click</button> </tr>

Answer 1

这将获取选中的输入 的列和行，并通过调用 document.querySelector 获取列字母和行号。 ，使用基于列和行的 CSS3 first-child 和 nth-child 选择器:

document.getElementById('mytable').addEventListener('click', function(e) {
  if(e.target.tagName === 'INPUT') {
    var td= e.target.parentNode,   //the input's td parent
        tr= td.parentNode,         //the td's tr parent
        col= td.cellIndex,         //the input's column
        row= tr.rowIndex,          //the input's row
        header= document.querySelector('#mytable tr:first-child td:nth-child('+(col+1)+')').textContent,
        number= document.querySelector('#mytable tr:nth-child('+(row+1)+') td:first-child').textContent;
    
    document.getElementById('output').textContent= number+header;
  }
});

<table id="mytable">
  <tr>
    <td></td>
    <td align="center">A</td>
    <td align="center">B</td>
  </tr>
  <tr>
    <td>1</td>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</table>

<div id="output"></div>