html - HTMLテーブルのチェックボックスをチェックすると行を取得します

Question

列の 1 つにチェックボックスがある 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

これにより、行のコンテンツが直接表示されます（すべての td in tr）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>

Jクエリ:

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