Удаление всех данных из строки таблицы с помощью 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 = ""; 

Но это очищает весь ряд, но я только хочу, чтобы очистить данные, хранящиеся внутри ТД в этой строке. Что я делаю не так?

спасибо.

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 это идентификатор строки, которые вы хотите скрыть. Теперь, когда мы выделили строку, мы можем использовать ее для контекстного поиска.

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

Это будет возвращать массив всех td элементов, найденных в строке targetRow. Затем вы можете использовать функцию each jQuery (которая берет лямбду, которая принимает индекс и объект), чтобы перебрать все td s и установить их innerHTML в пустую строку.

Answer 3

Вы также можете использовать

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

очистить содержимое