web-dev-qa-db-ja.com

テーブルの行をクリックして、すべてのセルの値を取得します

私はJQueryを知らないので、純粋なJavascriptでこれを行う方法があるといいのですが。

テーブルの行をクリックして、その行の各セルの値を取得する必要があります。これが私のテーブルのフォーマットです：

<table class='list'>
    <tr>
        <th class='tech'>OCB</th>
        <th class='area'>Area</th>
        <th class='name'>Name</th>
        <th class='cell'>Cell #</th>
        <th class='nick'>Nickname</th>
    </tr>
    <tr onclick="somefunction()">
        <td>275</td>
        <td>Layton Installation</td>
        <td>Benjamin Lloyd</td>
        <td>(801) 123-456</td>
        <td>Ben</td>
    </tr>
</table>

とにかく、各セルに一意のIDを設定するだけでは不十分ですか？

javascriptcsshtml-table
8
Cameron Darlington

テーブルにIDを追加したり、複数のイベントハンドラーを追加したりする必要はありません。必要なのはワンクリックイベントだけです。また、見出しとコンテンツを分離するには、テーブルのtheadとtbodyを使用する必要があります。

HTML：

<table class='list'>
    <thead>
        <tr>
            <th class='tech'>OCB</th>
            <th class='area'>Area</th>
            <th class='name'>Name</th>
            <th class='cell'>Cell #</th>
            <th class='nick'>Nickname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>275</td>
            <td>Layton Installation</td>
            <td>Benjamin Lloyd</td>
            <td>(801) 123-456</td>
            <td>Ben</td>
        </tr>
    </tbody>
</table>

JavaScript：

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            data.Push(cells[i].innerHTML);
        }
    }
    alert(data);
};

例：

http://jsfiddle.net/ZpCWD/

11
epascarello

このフィドルをチェックしてください リンク

HTML：

<table id="rowCtr" class='list'>
    <thead>
        <tr>
            <th class='tech'>OCB</th>
            <th class='area'>Area</th>
            <th class='name'>Name</th>
            <th class='cell'>Cell #</th>
            <th class='nick'>Nickname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>275</td>
            <td>Layton Installation</td>
            <td>Benjamin Lloyd</td>
            <td>(801) 123-456</td>
            <td>Ben</td>
        </tr>
    </tbody>
</table>

JAVASCRIPT：

init();
function init(){

    addRowHandlers('rowCtr');

}

function addRowHandlers(tableId) {
    if(document.getElementById(tableId)!=null){
        var table = document.getElementById(tableId);
        var rows = table.getElementsByTagName('tr');
        var ocb = '';
        var area = '';
        var name = '';
        var cell = '';
        var nick = '';
        for ( var i = 1; i < rows.length; i++) {

            rows[i].i = i;
            rows[i].onclick = function() {

                ocb = table.rows[this.i].cells[0].innerHTML;                
                area = table.rows[this.i].cells[1].innerHTML;
                name = table.rows[this.i].cells[2].innerHTML;
                cell = table.rows[this.i].cells[3].innerHTML;
                nick = table.rows[this.i].cells[4].innerHTML;
                alert('ocb: '+ocb+' area: '+area+' name: '+name+' cell: '+cell+' nick: '+nick);
            };
        }
    }
}
1
Khanh Tran
$("tr").click(function () {
    var rowItems = $(this).children('td').map(function () {
        return this.innerHTML;
    }).toArray();
});
0
user4792