Wie füge ich neue Elemente in meine Tabelle hinzu?

easy65 · 19 November 2016

Hi. Also ich habe eine Tabelle, die sieht so aus:

Code:

<tr>
    <th>To-Do</th>
    <th>Priorität</th>
    <th>Erstellt am</th>
  </tr>
  <tr>
    <td>Einkaufen</td>
    <td>Niedrig</td>
    <td>28.01.1996</td>
  </tr>

Ich würde gerne mit einem Add/Delete Button eine ganze Zeile adden/deleten können.
Hab schon das mit dem deleten probiert, aber es wird immer eine einzelne Zelle gelöscht, ich muss dann für jede Zeile 3x auf delete drücken.
Habt ihr da ideen?

DAnke

SpiceLab · 19 November 2016

easy65 schrieb:
Hab schon das mit dem deleten probiert, aber es wird immer eine einzelne Zelle gelöscht, ich muss dann für jede Zeile 3x auf delete drücken.
Habt ihr da ideen?

Zeig erstmal Deinen bisherigen JS-Code.

Ansonsten hat Google jede Menge davon.

Sei es mit purem JS: http://stackoverflow.com/questions/13241005/add-delete-row-from-a-table

Oder jQuery: http://stackoverflow.com/questions/16183231/jquery-append-and-remove-dynamic-table-row

easy65 · 19 November 2016

OK, hier.

Code:

<script>
//close button
var myNodelist = document.getElementsByTagName("td");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// hide items
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}
</script>

so war das glaub ich

ok ich probiers mal weiter

wenn nicht komme ich wieder hehe
glb hab was gefunden :
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

easy65 · 19 November 2016

OK, kann jetzt ganze Zeilen adden/löschen. Aber es sind immer dieselben Eingaben und löschen kann ich nur Zeile 1. Was kann ich ändern oder wonach soll ich googlen.?

Code:

<script>
function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
    cell3.innerHTML = "NEW CELL3";
}
function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(1);
}
</script>

SpiceLab · 19 November 2016

easy65 schrieb:
wonach soll ich googlen.?

Wenn Dir die vakanten Suchbegriffe nicht geläufig sind, obwohl Du sie im ersten Post beim Namen genannt hast, hättest Du sie ganz locker aus meinen beiden empfohlenen stackoverflow-Links entnehmen können :(

javascript add delete table rows , oder javascript add remove table rows , oder javascript append delete table rows , oder auch javascript append remove table rows , ...

Tronjer · 19 November 2016

Falscher Ansatz. Du willst Daten hinzufügen, löschen und wahrscheinlich auch weiterverarbeiten, aber keine HTML-Elemente.

Das hier wäre ein Blueprint mit drei Feldern. Die Anpassung überlasse ich dir.

HTML:

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <body ng-cloak ng-controller="AppController as vm">
    <div class="container">
      <form ng-submit="vm.onSubmit()">
          <table class="table">
            <tr>
              <th>Feld 1</th>
              <th>Feld 2</th>
              <th>Feld 3</th>
              <th></th>
              <th></th>
            </tr>
            <tr ng-repeat="item in vm.myObj track by $index">
              <td><input type="text" class="form-control" ng-model="item.field_1"></td>
              <td><input type="text" class="form-control" ng-model="item.field_2"></td>
              <td><input type="text" class="form-control" ng-model="item.field_3"></td>
              <td><button type="button" class="btn btn-default" ng-click="vm.onAdd()">Add Row</button></td>
              <td><button type="button" class="btn btn-default" ng-click="vm.onDelete($index)" ng-if="!$first">Delete Row</button></td>
            </tr>
          </table>
          <div>
             <button type="submit" class="btn btn-primary">Show Data</button>
          </div>
      </form>

      <ul class="list-unstyled" ng-if="vm.results">
        <li ng-repeat="item in vm.myObj">
          field_1: <strong>{{item.field_1}}</strong>, field_2: <strong>{{item.field_2}}</strong>, field_3: <strong>{{item.field_3}}</strong>
        </li>
      </ul>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script>
      angular.module('myApp', [])
        .controller('AppController', [function() {
          this.myObj = [{field_1: '', field_2: '', field_3: ''}];
          this.onAdd = function() {
            this.myObj.push({field_1: '', field_2: '', field_3: ''});
          }
          this.onDelete = function(index) {
            this.myObj.splice(index, 1);
          }
          this.onSubmit = function() {
            this.results = true;
          }
        }]);
  </script>
  </body>
</html>

Wie füge ich neue Elemente in meine Tabelle hinzu?

easy65

Neues Mitglied

SpiceLab

Mod | ZENmechanic

easy65

Neues Mitglied

easy65

Neues Mitglied

SpiceLab

Mod | ZENmechanic

Tronjer

Senior HTML'ler

Neueste Beiträge