Question

我有一个表如下..我需要显示表格单元格内容如果选中相应的复选框按钮单击

enter image description here

例如：

如果选中 Row2 ，则警告框应显示 Row2

这是我的代码，

JavaScript的：

<script type="text/javascript">
function whichRow(tableID){ 
 var table = document.getElementById(tableID);
 var rowCount = table.rows.length;
 for(var i=0; i<rowCount-1; i++) {
 var cell_val=table.rows[i].cells[1].innerHTML;
 alert(cell_val);
}
}
</script>

HTML：

<table id="Item1">
 <tr><td>Row 1</td><td><input name="rowno" type="checkbox"/></td></tr>
    <tr><td>Row 2</td><td><input name="rowno" type="checkbox"/></td></tr>
    <tr><td>Row 3</td><td><input name="rowno" type="checkbox"  /></td></tr>
    <tr>
      <td colspan="2"><input type="submit" name="button" id="button" value="Submit" onclick="whichRow('Item1')" /></td>
    </tr>
</table>

我面临的问题：

目前我能够检索内部HTML的复选框，但无法确定其是否已检查...

Answer 1

如果我理解你的问题，你可以这样试试。

编辑根据评论更新

function whichRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var inputBoxes = table.getElementsByTagName('input'); //modified to get only input tags present within the table
    for (var i = 0; i < rowCount - 1; i++) {
        if (inputBoxes[i].checked) { //checks if the checkbox is selected
            var cell_val = table.rows[i].cells[0].innerHTML;
            alert(cell_val);
        }
    }
}

Working Demo

Answer 2

没有jQuery

function whichRow(tableID){ 
    var table = document.getElementById(tableID), inpt, chks;

    //if querySelectorAll is present use it else fallback gracefully
    if(table.querySelectorAll){
        chks = table.querySelectorAll('input[name=rowno]');
    } else {
        var temp = table.getElementsByTagName('input');
        chks = [];
        for(var i=0; i < temp.length; i++) {
            inpt = temp[i];
            if(inpt.name == 'rowno'){
                chks.push(inpt);
            }
        }
    }

    for(var i=0; i < chks.length; i++) {
        inpt = chks[i];
        if(inpt.name == 'rowno' && inpt.checked){
            alert(chks[i].parentNode.previousSibling.innerHTML)
        }
    }
}

演示：Fiddle

使用jQuery - 跨浏览器

function whichRow(tableID){ 
    $('#' + tableID).find('input[name="rowno"]:checked').each(function(){
        alert($(this).closest('td').prev().text())
    })
}

演示：Fiddle

Answer 3

这是jQuery版本。在这种情况下，不需要通过id事件处理程序传递父表onclick。

$('#button').on('click', function() {  
  var selected = $(this).parents('table')
                 .find('input[type=checkbox]:checked').map(function() {
                      return $.trim($(this).parent().prev('td').text());
                 }).get().join();
  // Remove the .join() method to get the array instead
  console.log(selected);
});

<强> JSBin Demo

显示表单元格内容onClick如果选中相应的复选框

3 个答案: