Question

我有一个HTML表，其中一列中有一个复选框。我想知道当用户点击带有javascript（没有jquery）的复选框时我怎么能得到行数据？有人可以帮我这个吗？

谢谢

Answer 1

您可以尝试这样的事情：

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/

Answer 2

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

Answer 3

如果你的选择是直接在td，请尝试以下方法：

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

注意，首先你要找到带有document.getElementById（）或document.getElementsByTagName（）

的sel

此外，您可能需要处理onchange事件而不是onclick

Answer 4

这将直接为您提供行内容（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
            {
            }
        });
    })

Answer 5

如果您是新手：

onChange复选框的EVENT将调用我命名的功能＆＃34;检查＆＃34;

它将发送＆＃34; This.checked＆＃34;，这意味着，将向函数发送True或false＆＃34; check＆＃34;，然后我进入函数得到真或假是发送，并把它放在一个名为＆＃34; temp＆＃34;。

的变量中

HTML：onchange =＆＃34; check（this.checked）＆＃34; ＆lt; ---发送：＆＃34; This.checked＆＃34; （这=创建事件onchange的对象，并且.checked是适当的）你甚至可以发送这样的多个信息：onchange =＆＃34; checking（this.checked，this.id）＆＃34;等等。

JAVASCRIPT：函数检查（temp）＆lt; ---这就是＆＃34; this.checked＆＃34;在HTML中，并将其放在变量temp中。接收多个信息：功能检查（temp，temp2）等等（按你想要的名称命名）

然后我运行一个＆＃39; IF＆＃39;变量＆＃34; temp＆＃34;如果it = 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");
                }
            }

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

5 个答案: