Bearbeiten und löschen von tr dynamisch in einer Tabelle mit javascript

Bereite ich einen Tisch und erstellen von Zeilen dynamisch mit javascript. Diese Tabelle müsste input gegeben, durch den Benutzer. Es hätte drei wesentliche Funktionen.
Die erste Funktion der Tabelle ist : Wie würde der Benutzer fügen Sie die details und klicken Sie auf die Schaltfläche "Hinzufügen". eine neue Zeile fügen Sie zur Tabelle, die die Eingabe von bestimmten durch den Benutzer.

Die zweite ist: Wie würde der Benutzer klicken Sie auf jede Zeile der Tabelle wird die geschätzte Daten der Zeilen angezeigt, in die Eingabemaske.

Das Letzte feature ist: Als Benutzer Klicks auf die Zeilen, die er löschen könnte, und Bearbeiten ausgewählte Zeile.

Ich könnte hinzufügen von Zeilen in der Tabelle, aber in den späteren Teil bin ich nicht immer, wie zu tun ist..

jss fiddle :http://jsfiddle.net/avnesh/N7tza/2/

<table border="1" id="table">
<tr id="myRow">
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
</tr>
</table>
<br>
<input type="text" id='inputone' />
<input type="text" id='inputtwo' />
<input type="text" id='inputthree' />
<button onclick="myFunction()">Add to table</button>
<button onclick="deleteTr();">delete</button>
<script>
myFunction = function () {
input1 = document.getElementById('inputone');
Value1 = input1.value;
input2 = document.getElementById('inputtwo');
Value2 = input2.value;
input3 = document.getElementById('inputthree');
Value3 = input3.value;
R = document.getElementById("table").rows.length;
one = 1;
I = R + one;
var table = document.getElementById("table");
var x = table.insertRow(0);
x.insertCell(0).innerHTML = "<input type='text' value='" + Value3 + "' name='" + I + "'>";
x.insertCell(0).innerHTML = "<input type='text' value='" + Value2 + "' name='" + I + "'>";
x.insertCell(0).innerHTML = "<input type='text' value='" + Value1 + "' name='" + I + "'>";
} //end myFunction

assignTrIndex = function () {
var rows = document.getElementById('table').rows;
for (var i = 0; i <= rows.length; i++) {
    rows[i].onclick = getRowIndex(this)
}
}

var rowIndx = '';
getRowIndex = function (z) {
//alert(z.rowIndex);    
var rowIndx = z.rowIndex;
}

deleteTr = function () {
document.getElementById('table').deleteRow(rowIndx);
}
</script>

`

p.s.

Ich bin versucht zu rufen, Zeilen-index in der Funktion löschen(deleteTr) löschen die ausgewählte Zeile. Also ich bin die Zuweisung einer Funktion, Zeile-index(assignTrIndex) auf die Zeilen der Tabelle, aber es funktioniert nicht.Ich bin mit Jquery nur zur Eingabemaske für den Benutzer. Ich möchte zur Lösung dieses Problems mit javascript nur.

vielen Dank im Voraus ..

Hi, hast du irgendwelche code-Beispiele von dem, was Sie versucht haben. Mein Erster Gedanke wäre JQuery könnte Ihnen dabei helfen.
Also willst du jQuery oder nicht?
jss fiddle gibt es jsfiddle.net/avnesh/N7tza/2
ich will nicht j-query soulution
aber du bist schon jquery-UI?
Ich benutzte es, um zu produzieren Eingabe-Formular.(Ich benutzte es, um Zeit zu sparen, auf jss fiddle später würde ich javascript in meinem eigentlichen Programm ). aber die Tabelle funktioniert dynamisch durch javascript.
Diese erhalten Ihre Zeilen-index tr auf x.onclick = function(e){ alert(this.rowIndex); }
wie Schaffe ich tr dynamisch wie weisen Sie die Funktion klicken Sie auf die tr

InformationsquelleAutor melomane | 2013-12-21

Zuerst ändern Sie diese Zeile aus

var x = table.insertRow(0);

var x = table.insertRow(R);

so, dass Zeilen, die Hinzugefügt werden, am Ende der Tabelle.

Den Sie brauchen, um hinzufügen eine click-Ereignis-listener, um Ihre Tabelle, Zeile, während Sie Sie erstellen, und füllen Sie die Werte wieder im Textfeld

x.onclick = function (e) {
        rInd = this.rowIndex; //get row index for delete
        var value = [];
        for (var i = 0; i < 3; i++) { //iterate through cells you can also get cell count for now i am making it static
            var cell0 = x.cells[i];
            var inp1 = cell0.getElementsByTagName('input'); //find input in cells
            value.push(inp1[0].value); //save the value
        }
        document.getElementById('inputone').value = value[0];
        document.getElementById('inputtwo').value = value[1];
        document.getElementById('inputthree').value = value[2];
    }

Löschen code

deleteTr = function (rowIndx) {
    document.getElementById('table').deleteRow(rInd);
}