使用Javascript清除表格行中的所有數據

Question

我正在創建一個表格，用戶可以使行顯示/消失，並希望在選擇刪除行時清除隱藏行中的所有數據。

我試圖操縱表如下：

<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> 

我有這個功能來切換行：

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'; 
    } 
}; 

這不會有任何效果。我也試過：

p.innerHTML = ""; 

但這清除整個行但我只想要清除內TD的該行中保存的數據。我究竟做錯了什麼？

謝謝。

Answer 1

這是純JS的小提琴。基本上你需要找到所有的TR並通過他們循環下的輸入，將其設置爲空：

window.toggleRow = function (id) { 
    var p = document.getElementById(id); 

    if (p.style.display =='table-row') { 
     p.style.display = 'none'; 
     var inputs = p.getElementsByTagName('input'); 
     for (i = 0; i < inputs.length; i++) { 
      inputs[i].value = ""; 
     } 
    } 

    else { 
     p.style.display = 'table-row'; 
    } 
}; 

http://jsfiddle.net/Delorian/hv19aLwL/

Answer 2

看看這個的jsfiddle我爲你做的：http://jsfiddle.net/o81uceen/

這用了jQuery（請評論，如果這不是你的可能性）。首先，它選擇使用此相應的行：

var targetRow = $('tr#'+id); 

哪裏id是要隱藏的行的ID。現在我們已經隔離了該行，我們可以將其用於上下文搜索。

var targetDataArray = $('td', targetRow); 

這將返回該行targetRow中找到的所有td元件的陣列。然後，您可以使用jQuery的each函數（該函數採用一個需要索引和對象的lambda表達式）遍歷所有td s並將其innerHTML設置爲空字符串。

Answer 3

您還可以使用

$('#id').empty(); 

清除內容