12

私は 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 を付けるのが不足していますか?

4

5 に答える 5

15

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

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

例：

http://jsfiddle.net/ZpCWD/

于 2013-05-07T18:50:06.547 に答える
-1 
var elements  = document.getElementsByTagName('td');
for (var i =0; i < elements.length; i++) {
   var cell_id = 'id' + i;
   elements[i].setAttribute('id', cell_id);
}

たぶん、onclickリンクからの関数にこのようなものを入れますtrか？

于 2013-05-07T18:42:48.510 に答える