wake-up-neo.com

Hinzufügen eines Onclick-Ereignisses zu einer Tabellenzeile

Ich versuche, durch Javascript ein Onclick-Ereignis zu einer Tabellenzeile hinzuzufügen.

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        row = table.rows[i];
        row.onclick = function(){
                          var cell = this.getElementsByTagName("td")[0];
                          var id = cell.innerHTML;
                          alert("id:" + id);
                      };
    }
}

Dies funktioniert wie erwartet in Firefox, aber in Internet Explorer (IE8) kann ich nicht auf die Tabellenzellen zugreifen. Ich glaube, das hängt irgendwie damit zusammen, dass "this" in der Onclick-Funktion als "Window" anstelle von "Table" (oder so ähnlich) identifiziert wird.

Wenn ich auf die aktuelle Zeile zugreifen könnte, könnte ich eine getElementById in der Onclick-Funktion ausführen, indem ich keinen Weg finde, dies zu tun. Irgendwelche Vorschläge?

Vielen Dank!

25
user80978

Etwas wie das.

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}

EDIT

Arbeit Demo

34
SolutionYogi

Ich denke, für IE müssen Sie die srcElement -Eigenschaft des Event-Objekts verwenden. Wenn jQuery eine Option für Sie ist, möchten Sie möglicherweise die Verwendung dieser Option in Betracht ziehen, da sie die meisten Browserunterschiede für Sie abstrahiert. Beispiel jQuery:

$("#tableId tr").click(function() {
   alert($(this).children("td").html());
});
3
Nick Riggs

Hier ist eine kompakte und etwas sauberere Version der gleichen reinen Javascript (kein jQuery) -Lösung, wie oben von @redsquare und @SolutionYogi (re: Hinzufügen von onclick-Ereignisbehandlungsroutinen) zu allen HTML-Tabellen erörtert Zeilen), das in allen gängigen Web-Browsern funktioniert, einschließlich dem neuesten IE11:

function addRowHandlers() {
    var rows = document.getElementById("tableId").rows;
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function(){ return function(){
               var id = this.cells[0].innerHTML;
               alert("id:" + id);
        };}(rows[i]);
    }
}
window.onload = addRowHandlers();

Arbeiten DEMO

Hinweis: Damit es auch im IE8 funktioniert, verwenden Sie anstelle des this-Zeigers den expliziten Bezeichner wie function(myrow), wie von @redsquare ..__ vorgeschlagen. Mit freundlichen Grüßen

1
Alexander Bell

Der Kopf steckte zu lange in jq. Das wird funktionieren.

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        var row = table.rows[i];
        row.onclick = function(myrow){
                          return function() { 
                             var cell = myrow.getElementsByTagName("td")[0];
                             var id = cell.innerHTML;
                             alert("id:" + id);
                      };
                  }(row);
    }
}
1
redsquare

Einfache Art und Weise generiert Code wie folgt:

<!DOCTYPE html>
<html>
<head>

<style>
  table, td {
      border:1px solid black;
  }
</style>

</head>
<body>
<p>Click on each tr element to alert its index position in the table:</p>
<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
  function myFunction(x) {
      alert("Row index is: " + x.rowIndex);
  }
</script>

</body>
</html>

0
Zolfaghari

So mache ich das. Ich erstelle eine Tabelle mit den Tags "thead" und "tbody" ..__ und füge dann dem tbody -Element nach der ID ein click -Ereignis hinzu.

<script>
    document.getElementById("mytbody").click = clickfunc;
    function clickfunc(e) {
        // to find what td element has the data you are looking for
        var tdele = e.target.parentNode.children[x].innerHTML;
        // to find the row
        var trele = e.target.parentNode;
    }
</script>
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody id="mytbody">
        <tr><td>Data Row</td><td>1</td></tr>
        <tr><td>Data Row</td><td>2</td></tr>
        <tr><td>Data Row</td><td>3</td></tr>
    </tbody>
</table>
0
user3121053

Mein Tisch ist in einem anderen iframe, also habe ich SolutionYogi answer geändert, um damit zu arbeiten: 

<script type="text/javascript">
window.onload = addRowHandlers;
function addRowHandlers() {
    var iframe = document.getElementById('myiframe');
    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    var table = innerDoc.getElementById("mytable");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;
                                        alert("id:" + id);
                                 };
            }

        currentRow.onclick = createClickHandler(currentRow);
    }
}
</script>
0

Ich habe versucht, eine Tabellenzeile auszuwählen, damit sie leicht in die Zwischenablage kopiert und dann in Excel eingefügt werden kann. Nachfolgend finden Sie eine kleine Anpassung Ihrer Lösung.

Verweise:

<!DOCTYPE html>
<html>
<body>

<div>
    <table id="tableId" border=1>
      <tbody>
        <tr><td>Item <b>A1</b></td><td>Item <b>B1</b></td></tr>
        <tr><td>Item <b>A2</b></td><td>Item <b>B2</b></td></tr>
        <tr><td>Item <b>A3</b></td><td>Item <b>B3</b></td></tr>
      </tbody>
    </table>
</div>

<script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;

                                        var cell1 = row.getElementsByTagName("td")[1];
                                        var id2 = cell1.innerHTML;
                                        // alert(id + " - " + id2);
                                        window.Prompt("Copy to clipboard: Ctrl+C, Enter", "<table><tr><td>" + id + "</td><td>" + id2 + "</td></tr></table>")
                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>
</body>
</html> 
0
robertocm

Ändern Sie die this.getElementsByTagName("td")[0])-Zeile, um row.getElementsByTagName("td")[0]; zu lesen. Das sollte die row-Referenz in einer Schließung erfassen und sollte wie erwartet funktionieren.

Edit: Das obige ist falsch, da row eine globale Variable ist - weisen Sie, wie andere schon gesagt haben, eine neue Variable zu und verwenden Sie dann THAT im Abschluss. 

0
Luke Rinard

Während die meisten Antworten eine Kopie der Antwort von SolutionYogi sind, verpassen sie alle eine wichtige Prüfung, um festzustellen, ob 'cell' nicht null ist, was beim Klicken auf die Überschriften zu einem Fehler führt. Also, hier ist die Antwort mit dem eingeschlossenen Scheck:

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        // check if not null
        if(!cell) return; // no errors! 
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}
0
Cornelius