Auslesen einer HTML-Tabelle mit JavaScript und Auswertung von Input-Feldern

Das folgende Beispiel zeigt, wie mit Hilfe von JavaScript-Bordmitteln eine HTML-Tabelle durchlaufen werden kann. Anhand des Beispiels soll darüber hinaus eine Möglichkeit gezeigt werden, Input-Felder in den Tabellen-Zeilen auszulesen und auszuwerten.

Aufbau der HTML-Tabelle

<table id="table_example">
      <tbody>
        <tr>
          <th>Ausgewählt</th>
          <th>Bezeichnung</th>
          <th>Wert 1</th>
          <th>Wert 2</th>
        </tr>
        <tr>
          <td><input name="activated" type="checkbox" checked=""></td>
          <td>Tabellen-Inhalt erste Zeile</td>
          <td><input name="input1" class="form-control" onchange="parse_int_value(this);" style="text-align:right;" type="text" value="2"></td>
          <td><input name="input2" class="form-control" onchange="parse_int_value(this);" style="text-align:right;" type="text" value="1"></td>
        </tr>
        <tr>
          <td><input name="activated" type="checkbox" checked=""></td>
          <td>Tabellen-Inhalt zweite Zeile</td>
          <td><input name="input1" class="form-control" onchange="parse_int_value(this);" style="text-align:right;" type="text" value="2"></td>
          <td><input name="input2" class="form-control" onchange="parse_int_value(this);" style="text-align:right;" type="text" value="1"></td>
        </tr>
      </tbody>
    </table>

In der Tabelle gibt es in jeder Zeile eine Checkbox und zwei Eingabefelder. Eine JavaScript-Funktion soll nun die einzelnen Zeilen durchlaufen und auswerten, ob die Zeile markiert wurde und welche Werte eingetragen sind. Bei den Eingabefeldern sollen nur Integer-Werte erlaubt sein, weshalb der eingegebene Inhalt zunächst überprüft wird.

JavaScript zum Parsen der Input-Inhalte

function parse_int_value(ctrl) {
  ctrl.value = parseInt(ctrl.value) || 0;
}

Das Parsen der Eingabewerte erfolgt beim Durchlaufen der Tabelle erneut.

JavaScript zum Durchlaufen der Tabelle

    function parse() {
     var tblOutputDiv = document.getElementById('tbl_values');
     tblOutputDiv.innerHTML = "";
     var table = document.getElementById('table_example');
     var tmp = "";
	 	 for (var i = 1, row; row = table.rows[i]; i++) {
			//iterate through rows and check whether the row has been selected
			var checked = false;
			var value1 = 0;
			var value2 = 0;
			var inputFields = new Array();
      //get all input fields in the current row
			inputFields = row.getElementsByTagName("INPUT");
			for (var counter = 0, field; field = inputFields[counter]; counter++) {
				if (field.name == "activated") {
					checked = field.checked;
				}
				else if (field.name == "input1") {
					value1 = parseInt(field.value) || 0;
				}
				else if (field.name == "input2") {
					value2 = parseInt(field.value) || 0;
				}
			}
      tmp += 'Ausgewählt: ' + (checked ? "ja" : "nein");
      tmp += ' Wert 1: ' + value1;
      tmp += ' Wert 2: ' + value2;
      tmp += '<br/>';
		}
    tblOutputDiv.innerHTML = tmp;
    }

Zunächst wird das DIV geladen welches zur Ausgabe dient und dessen Inhalt überschrieben. Anschließend erfolgt eine Iteration durch die Zeilen der Tabelle und in jeder Zeile werden die darin enthaltenen Input-Elemente geladen. Diese werden ebenfalls durchlaufen und anhand des Namens werden die Werte in einer temporären Variable zwischengespeichert und später in dem Ausgaben-DIV ausgegeben.

Aufgerufen wird das Skript durch einen Link Tabelle auslesen.

Dieses Beispiel ist bewusst simpel gehalten und soll lediglich das Grundprinzip verdeutlichen. Das gezeigte Beispiel kann hier heruntergeladen bzw. getestet werden: HTML-Tabelle auslesen