it-swarm.com.de

Klicken Sie auf die Tabellenzeile und erhalten Sie den Wert aller Zellen

Ich kenne JQuery nicht, also hoffe ich, dass es eine Möglichkeit gibt, dies in reinem Javascript zu tun.

Ich muss auf eine Tabellenzeile klicken und den Wert jeder Zelle in dieser Zeile abrufen. Hier ist das Format meiner Tabelle:

<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>

Gibt es überhaupt keine eindeutige ID für jede Zelle?

8

Es müssen keine IDs oder mehrere Ereignishandler zur Tabelle hinzugefügt werden. Ein Klick-Event genügt. Sie sollten auch Thead und Body für Ihre Tabellen verwenden, um die Überschrift vom Inhalt zu trennen. 

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

Beispiel:

http://jsfiddle.net/ZpCWD/

10
epascarello

Überprüfen Sie diese Geige Link

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