Löschen aller Daten aus einer Zeile in der Tabelle mit Javascript
Bin ich eine Tabelle erstellen, wo die Benutzer können Zeilen erscheinen/verschwinden, und würde gerne alle Daten von ausgeblendeten Zeilen werden gelöscht, wenn Sie wählen, um eine Zeile zu löschen.
Den Tisch, ich versuche zu manipulieren ist wie folgt:
<form name="ingredient-table">
<table border="1" style="padding: 5px;">
<tr>
<td>Ingredient Name</td>
<td>Amount (in Mg)</td>
<td>% Carrier</td>
<td>$$/Kilo</td>
<td></td>
<td>Total Carrier Volume</td>
<td>Total Ingredient Volume</td>
</tr>
<tr>
<td><input type="text" id="a" list="ingredients"></input></td>
<td><input type="number" id="b"> Mg</input></td>
<td><input type="number" id="c"></input> %</td>
<td><input id="d"></input></td>
<td><button type="button" onclick="calculate('a', 'b', 'c', 'd', 'e', 'f')">Calculate Final
Volume</button></td>
<td id="e"></td>
<td id="f"></td>
<td><a href="#" onclick="toggleRow('row2')">New Ingredient</a></td>
</tr>
<tr id="row2" style="display: none;">
<td><input type="text" id="h" list="ingredients"></input></td>
<td><input type="number" id="i"> Mg</input></td>
<td><input type="number" id="j"></input> %</td>
<td><input id="k"></input></td>
<td><button type="button" onclick="calculate('h', 'i', 'j', 'k', 'l', 'm')">Calculate Final
Volume</button></td>
<td id="l"></td>
<td id="m"></td>
<td><a href="#" onclick="toggleRow('row3')">New Ingredient</a></td>
<td><a href="#" onclick="toggleRow('row2')">Delete Ingredient</a></td>
</tr>
<tr id="row3" style="display: none;">
<td><input type="text" id="o" list="ingredients"></input></td>
<td><input type="number" id="p"> Mg</input></td>
<td><input type="number" id="q"></input> %</td>
<td><input id="r"></input></td>
<td><button type="button" onclick="calculate('o', 'p', 'q', 'r', 's', 't')">Calculate Final
Volume</button></td>
<td id="s"></td>
<td id="t"></td>
<td><a href="#" onclick="toggleRow('row4')">New Ingredient</a></td>
<td><a href="#" onclick="toggleRow('row3')">Delete Ingredient</a></td>
</tr>
<tr id="row4" style="display: none;">
<td><input type="text" id="v" list="ingredients"></input></td>
<td><input type="number" id="w"> Mg</input></td>
<td><input type="number" id="x"></input> %</td>
<td><input id="y"></input></td>
<td><button type="button" onclick="calculate('v', 'w', 'x', 'y', 'z', 'a1')">Calculate Final
Volume</button></td>
<td id="z"></td>
<td id="a1"></td>
<td><a href="#" onclick="toggleRow('row5')">New Ingredient</a></td>
<td><a href="#" onclick="toggleRow('row4')">Delete Ingredient</a></td>
</tr>
<tr id="row5" style="display: none;">
<td><input type="text" id="a3" list="ingredients"></input></td>
<td><input type="number" id="a4"> Mg</input></td>
<td><input type="number" id="a5"></input> %</td>
<td><input id="a6"></input></td>
<td><button type="button" onclick="calculate('a3', 'a4', 'a5', 'a6', 'a7', 'a8')">Calculate
Final Volume</button></td>
<td id="a7"></td>
<td id="a8"></td>
<td><a href="#" onclick="noMoreRows()">New Ingredient</a></td>
<td><a href="#" onclick="toggleRow('row5')">Delete Ingredient</a></td>
</tr>
</table>
</form>
Habe ich diese Funktion zum Umschalten der Zeilen:
function toggleRow(id) {
var p = document.getElementById(id);
if (p.style.display =='table-row') {
p.style.display = 'none';
p.td.innerHTML = "";
}
else {
p.style.display = 'table-row';
}
};
Diese keine Wirkung. Ich habe auch versucht:
p.innerHTML = "";
Aber das klärt die gesamte Zeile aber ich will nur das löschen der Daten findet innerhalb der td ' s in dieser Reihe. Was mache ich falsch?
Danke.
- also das ist, was javascript aussah, bevor jQuery?
- ja, ich war gonna bitten - sind Sie nicht mit jQuery? Es würde viel einfacher sein
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist eine Geige in reinen JS. Grundsätzlich müssen Sie alle Eingänge, die unter Ihrem TR und Schleife, Einstellung Sie zu leeren:
http://jsfiddle.net/Delorian/hv19aLwL/
Schauen Sie sich dieses JSFiddle die ich für Sie gemacht: http://jsfiddle.net/o81uceen/
Diese verwendet jQuery (bitte kommentieren, wenn dies nicht eine Möglichkeit für dich). Zuerst wählt er die entsprechende Zeile mit dieser:
Wo
id
ist die ID der Zeile, die Sie ausblenden möchten. Jetzt haben wir isoliert die Reihe, wir können es verwenden, für eine kontextbezogene Suche.Diese wird return ein array mit allen
td
Elemente in der ZeiletargetRow
. Dann können Sie dieeach
- Funktion von jQuery (das dauert eine lambda-nimmt-index und Objekt) zu iterieren über alletd
s und deren innerHTML auf eine leere Zeichenfolge.Können Sie auch
löschen des Inhalts