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

这将获取已选中input的列和行，并通过调用 document.querySelector 获取列号和行号，使用CSS3 {{1} }和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;
  }
});

Answer 2

试试这个@ plain javascript：

/etc/permissions/platform.xml

复选框是已选中复选框的数组 - 例如[0,2]如果选中第一个和第三个复选框

Answer 3

或者像这样：

https://jsfiddle.net/zLy90w40/1/

 function getCheckBox(){
    var oneA = document.getElementById('1a');
    var oneB = document.getElementById('1b');
    var twoA = document.getElementById('2a');
    var twoB = document.getElementById('2b');
    if (oneA.checked){
        alert("1 A was checked") ;
    }
    if(oneB.checked){
        alert("1 B was checked") ;
    }
    if(twoA.checked){
        alert("2 A was checked") ;
    }
    if(twoB.checked){
        alert("2 B was checked") ;
    }
    }

如何获取表中已选中复选框的位置

3 个答案: