Comment faire pour supprimer la ligne de la table à l'aide de Javascript

J'ai créé de nouvelles lignes à l'aide de Javascript function addRow(id), mais je ne peux pas le supprimer. Lorsque je clique sur le bouton de suppression, rien ne se passe. Ce que je fais mal?
Je suis reconnaissant pour tous les conseils.

<table>
<tr>
somethingElse
</tr>
<tr>
<td colspan="5">
<script type="text/javascript">
var inputCount = 0;
function addRow(id) {
//set row number
inputCount++;
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
var td1 = document.createElement("TD");
var td2 = document.createElement("TD");
var td3 = document.createElement("TD");
var td4 = document.createElement("TD");
var td5 = document.createElement("TD");
var t1 = document.createElement('div');
var t2 = document.createElement('div');
var t3 = document.createElement('div');
var t4 = document.createElement('div');
var t5 = document.createElement('div');
t1.innerHTML = "Name of school: ";
t2.innerHTML = "<input type='text' Width='180px' name='items_" + inputCount + "'>";
t3.innerHTML = "Title aquired: ";
t4.innerHTML = "<input type='text' Width='180px' name='value_" + inputCount + "'>";
t5.innerHTML = "<input type='Button' class='Button' onclick='deleteLine(this)' value='Remove'>";
td1.appendChild(t1)
td2.appendChild(t2)
td3.appendChild(t3)
td4.appendChild(t4)
td5.appendChild(t5)
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
tbody.appendChild(row);
}
function deleteLine(object) {
var table = document.getElementsByTagName("myTable")[0];
var tBody = table.getElementsByTagName("tbody")[0];
var rows = tBody.getElementsByTagName("tr");
while (object.tagName != 'TR') {
object = object.parentNode;
}
var row = rows[object.rowIndex];
tBody.removeChild(row);
}
</script>
<table id="myTable">
<tr>
<td align=right>
Name of school:
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="180px"></asp:TextBox>
</td>
<td align=right>
Title aquired:
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="180px"></asp:TextBox>
</td>
<td>
<a href="javascript:addRow('myTable')">Add more education</a>
</td>                                        
</tr>
</table>                                
</td>
</tr>
<tr>
somethingElse
</tr>
</table>
  • Pouvez-vous mettre à jour votre question et votre code comme le code de sorte qu'il est lisible ?
  • Je ne vois aucun bouton supprimer dans votre code? Juste un bouton ajouter.
InformationsquelleAutor Slavisa | 2010-10-15
  1. 5

    Je suppose que ce

    var table = document.getElementsByTagName("myTable")[0];

    devraient être mieux

    var table = document.getElementById("myTable");

    la fonction peut être rendu plus simple si vous voulez:

    function deleteLine(object) {
while (object.tagName != 'TR') {
object = object.parentNode;
}
object.parentNode.removeChild(object);
}
    InformationsquelleAutor Dr.Molle
  2. 0

    Vous pouvez également essayer cette. ...

    <script type="text/javascript">
var inputCount = 0;
function addRow(id) {
//set row number
inputCount++;
var tbody = document.getElementById(id);
html=""
var row = document.createElement("TR");
row.setAttribute("id", "row"+inputCount)
tbody.appendChild(row);
html +="<td>Name of school:</td>"
html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>"
html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>"
html +="<td>Title aquired: </td>"
html +="<td><input type='Button' class='Button' onclick=deleteLine('row"+inputCount+"') value='Remove'></td>"
alert(html)
row.innerHTML = html
}
function deleteLine(index) {
table = document.getElementById("myTable")
row = document.getElementById(index)
table.removeChild(row);
}
</script>
    InformationsquelleAutor Michal