检查html表中的复选框时获取行答案

【问题标题】：Get row when checking checkbox in html table检查html表中的复选框时获取行
【发布时间】：2013-08-31 11:25:42
【问题描述】：

我有一个 HTML 表格，其中一列中有一个复选框。我想知道当用户使用javascript（没有jquery）单击复选框时如何获取行数据？谁能帮我解决这个问题？

谢谢

【问题讨论】：

你能展示你到目前为止所做的事情吗？也许在 JSFiddle 中？

【解决方案1】：

HTML DOM 解决你的问题

<script type="text/javascript">
    function getRow(n) {
        var row = n.parentNode.parentNode;
        var cols = row.getElementsByTagName("td");
        var i=0;
        while (i < cols.length) {
            alert(cols[i].textContent);
            i++;
        }
    } 
</script>

<table>
    <tr>
        <td><input type="checkbox" onclick="getRow(this)"  /></td>
        <td>aaa</td>
        <td>bbb</td>
    </tr>
    <tr>
        <td><input type="checkbox" onclick="getRow(this)" /></td>
        <td>ccc</td>
        <td>ddd</td>
    </tr>
    <tr>
        <td><input type="checkbox" onclick="getRow(this)" /></td>
        <td>eee</td>
        <td>fff</td>
    </tr>
</table>

编辑： 我认为这个脚本会帮助你更多：

function getRow(n) {
    var row = n.parentNode.parentNode;
    var cols = row.getElementsByTagName("td");
    var i = 0;

    while (i < cols.length) {
        var val = cols[i].childNodes[0].nodeValue;
        if (val != null) {
            alert(val);
        }

        i++;
    }
}

【讨论】：

【解决方案2】：

如果你是新手：

复选框的onChange EVENT将调用我命名为“检查”的函数

它将发送“This.checked”，这意味着，将发送 True 或 false 到函数“checking”，然后我进入函数获取发送的 True 或 False，并将其放入我调用的变量中“温度”。

HTML: onchange="checking(this.checked)"

JAVASCRIPT :function checks(temp)

然后我使用变量“temp”运行“IF”，如果它的值 = true，则执行警报。

希望它有所帮助，请考虑一下并进行操作，以使其符合您的需求！

HTML：

<table>
        <tr>
                <td>
                        <input type="checkbox" value=""onchange="checking(this.checked)">
                </td>
                <td>
                        <label>Something Here</label>
                </td>
        </tr>
</table>

JAVASCRIPT：

            function checking(temp)
            {

                if(temp == true)
                {
                    alert("Checkbox is checked");
                }
                else
                {
                    alert("Checkbox is NOT checked");
                }
            }

【讨论】：

【解决方案3】：

这将直接为您提供行的内容（tr 中的所有 td） HTML：

<table>
    <tr id="tr1">
        <td>
            <input type="checkbox" value="chkbox1" id="chk1">
        </td>
        <td>
            Lorem ipsum text
        </td>
    </tr>
    <tr id="tr2">
        <td>
            <input type="checkbox" value="chkbox2" id="chk2">
        </td>
        <td>
            Lorem ipsum text
        </td>
    </tr>
</table>

jquery：

$(document).ready(function(){
    $('#chk1, #chk2').on('change',function(){
            if($('#chk1').prop('checked') || $('#chk2').prop('checked'))
            {
                var ids=$(this).parent().parent().html();
                alert(ids);
            }
            else
            {
            }
        });
    })

【讨论】：

【解决方案4】：

你可以试试这样的：

HTML：

<table>
    <thead>
        <tr><th></th><th>Row Text</th></tr>
    </thead>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Test</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Test 2</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Test 3</td>
    </tr>
</table>

JavaScript：

checkboxes = document.getElementsByTagName("input"); 

for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    checkbox.onclick = function() {
        var currentRow = this.parentNode.parentNode;
        var secondColumn = currentRow.getElementsByTagName("td")[1];

        alert("My text is: " + secondColumn.textContent );
    };
}

JSFiddle：http://jsfiddle.net/markwylde/wzPHF/1/

【讨论】：

【解决方案5】：

如果您的选择直接在 td 中，请尝试以下操作：

sel.onclick = function(){
  row = this.parentNode.parentNode
  //then what you need
}

请注意，首先您必须使用 document.getElementById() 或 document.getElementsByTagName() 找到 sel

另外你可能需要处理 onchange 事件而不是 onclick

【讨论】：