Klicken Sie auf Zeile in der Tabelle und erhalten Sie den Wert aller Zellen

Ich weiß nicht, JQuery, so dass ich hoffen es ist ein Weg, um dies zu tun, die in reinem Javascript.

Muss ich klicken Sie auf eine Zeile in der Tabelle und erhalten Sie den Wert jeder Zelle in dieser Zeile. 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>

Ist es sowieso kurz, setzen eine eindeutige ID für jede Zelle?

  • Sie könnte irgendeine Art von for Schleife für diese.
InformationsquelleAutor Cameron Darlington | 2013-05-07
  1. 11

    Gibt es keine Notwendigkeit zum hinzufügen von ids oder fügen Sie mehrere event-Handler auf den Tisch. Ein click-Ereignis ist alles, was benötigt wird. Auch Sie verwenden sollten, thead und tbody für Ihre Tabellen zu trennen, die überschrift aus dem content.

    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/

    • funktioniert wie ein champ, und vielen Dank für das Beispiel
    • das einzige problem mit diesem ist, dass es bekommt auch die html-tags in zwischen den <td>
    • Auch OP ' s code hat keine tags....wenn das der Fall ist, als es ist textContent...
    InformationsquelleAutor epascarello
  2. 1

    Ü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);
            };
        }
    }
}
    • Darlington Bitte lassen Sie mich wissen, wenn es erfüllt Ihre Anforderungen. Danke.
    • Danke das war sehr hilfreich für mich
    InformationsquelleAutor Khanh Tran
  3. 0
    $("tr").click(function () {
    var rowItems = $(this).children('td').map(function () {
        return this.innerHTML;
    }).toArray();
});
    • Diese nicht zurück, wird jeder Wert aus <td>.
    • Während dieser code kann die Frage beantworten, die Bereitstellung zusätzlicher Rahmen an wie und warum es löst das problem verbessern würde, die Antwort, die langfristigen Wert.
    InformationsquelleAutor user4792
  4. -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);
}

    Vielleicht etwas wie dieses in Funktion Ihrer onclick-links zu von der tr?

    • es besteht keine Notwendigkeit zum hinzufügen von ids für alles.
    • während das wahr sein könnte, seine Frage sagt Ist es eh kurz setzen eine eindeutige ID für jede Zelle? bin ich nur zu beantworten.
    InformationsquelleAutor aug
Schreibe einen Kommentar