Динамическое удаление строк из таблицы HTML
Ок, теперь я могу добавлять и редактировать строки в таблице. Дальше я хочу добавить механизм удаления строк из таблицы и хочу сделать это в следующий способ: что бы отредактировать строку то я кликаю по нее и в ней появляется инпут типу текст и я себе редактирую и потом по клику на будь какую часть страницы я применяю это, и я прописал условие - если этот инпут == 0, то есть если он пустой то строка по идеи должна удалятся и это не происходит, возможна я не так условие написал или инпут не понимает когда он пустой? Может кто то знает в чем дело, спасибо заранее!
Вот код:
<table class="dowolnanazwa">
<thead>
<tr>
<th>Numer porządkowy</th>
<th>Nazwa epizodu</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Epizod numer 1</td>
</tr>
<tr>
<td>2</td>
<td>Epizod numer 2</td>
</tr>
<tr>
<td>3</td>
<td>Epizod numer 3</td>
</tr>
<tr>
<td>4</td>
<td>Epizod numer 4</td>
</tr>
<tr>
<td>5</td>
<td>Epizod numer 5</td>
</tr>
<tr>
<td>6</td>
<td>Epizod numer 6</td>
</tr>
</tbody>
</table>
<table class="dowolnanazwa">
<tbody id="tbd">
</tbody>
</table>
<p align="center">Numer: <input type="number" id="liczba"></p>
<p align="center">Nazwa: <input type="text" id="tekst"></p>
<p align="center"><button id="myBtn">Dodaj wiersz</button></p>
<script>
document.getElementById("myBtn").onclick = dodajWiersz;
function dodajWiersz() {
var wiersz = document.createElement("tr");
var tdNumer = document.createElement("td");
var val1 = document.getElementById("liczba").value;
tdNumer.innerHTML = val1;
tdNumer.addEventListener('click', func);
var tdText = document.createElement("td");
var val2 = document.getElementById("tekst").value;
tdText.innerHTML = val2;
tdText.addEventListener('click', func);
wiersz.appendChild(tdNumer);
wiersz.appendChild(tdText);
var dodac = document.getElementById("tbd");
dodac.appendChild(wiersz);
}
//--------------------------------------------
//--------------------------------------------
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].addEventListener('click', func);
}
function func() {
var input = document.createElement('input');
input.value = this.innerHTML;
this.innerHTML = '';
var wiersz2 = document.getElementById('tr');
if (input == 0)
this.removeChild(wiersz2);
else
this.appendChild(input);
var td = this;
input.addEventListener('blur', function() {
td.innerHTML = this.value;
td.addEventListener('click', func);
});
this.removeEventListener('click', func);
}
</script>