1

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

在此处输入图像描述

例如：

如果选中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>

我面临的问题：

目前我能够检索复选框的innerHTML，但无法确定它是否被选中......

4

3 回答 3

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);
        }
    }
}

工作演示

于 2013-08-25T11:55:31.577 回答
1

没有 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)
        }
    }
}

演示：小提琴

使用 jQuery - 跨浏览器

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

演示：小提琴

于 2013-08-25T11:56:43.453 回答
1

这是 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 演示

于 2013-08-25T11:59:12.523 回答