[英]Is there any way to add a <td> to each table row using javascript
我想在用JavaScript单击按钮时向每行添加一个<td>
,但是我希望它是一个切换按钮,当它第二次单击时必须再次消失。
我尝试在table标记的子项上执行for循环,但添加了一个表行,我还尝试为它们提供了相同的类,但仅将for添加到该类的第一个元素上。
这是我添加表格信息的地方
const verwerkDatatable = function(data) {
console.log(data);
const table = document.querySelector('.js-table');
table.innerHTML = `<tr class="js-table-header">
<td>Naam:</td>
<td>Toevoegdatum:</td>
<td>Vervaldatum:</td>
<td>Aantal:</td>
</tr>`;
for (let object of data) {
const amount = object.amount;
const name = object.name;
const addDate = object.date;
const exDate = object.expirationDate;
table.innerHTML += `<tr class="js-tr">
<td>${name}</td>
<td>${addDate}</td>
<td>${exDate}</td>
<td>${amount}</td>
</tr>`;
}
listenToTrash();
};
在这里,我尝试添加带有SVG的单元格
const listenToTrash = function() {
const trash = document.querySelector('.js-trash');
trash.addEventListener('click', function() {
const tableHeader = document.querySelector('.js-table-header');
tableHeader.innerHTML = `<tr class="js-table-header">
<td>Naam:</td>
<td>Toevoegdatum:</td>
<td>Vervaldatum:</td>
<td>Aantal:</td>
<td>Verwijderen:</td>
</tr>`;
const tableRow = document.querySelectorAll('.js-tr');
console.log(tableRow)
for (row of tableRow){
tableRow.innerHTML +=
'<td> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 8v16h18v-16h-18zm5 12c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm4-15.375l-.409 1.958-19.591-4.099.409-1.958 5.528 1.099c.881.185 1.82-.742 2.004-1.625l5.204 1.086c-.184.882.307 2.107 1.189 2.291l5.666 1.248z"/></svg></td>';
}
});
};
使用forEach
遍历.js-tr
,然后创建一个元素td
将svg设置为td的子元素,然后将其附加到每个js-tr
。
const tableRow = document.querySelectorAll('.js-tr');
tableRow.forEach(function (el) {
const td = document.createElement('td');
td.innerHTML = '<td> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 8v16h18v-16h-18zm5 12c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm4-15.375l-.409 1.958-19.591-4.099.409-1.958 5.528 1.099c.881.185 1.82-.742 2.004-1.625l5.204 1.086c-.184.882.307 2.107 1.189 2.291l5.666 1.248z"/></svg></td>';
el.appendChild(td);
})
更新 :这是带有onclick事件的代码段:
const tableRow = document.querySelectorAll('.js-tr'); tableRow.forEach(function (el) { const td = document.createElement('td'); td.className = 'hidden'; td.style.cursor = 'pointer'; td.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 8v16h18v-16h-18zm5 12c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm4-15.375l-.409 1.958-19.591-4.099.409-1.958 5.528 1.099c.881.185 1.82-.742 2.004-1.625l5.204 1.086c-.184.882.307 2.107 1.189 2.291l5.666 1.248z"/></svg>'; el.appendChild(td); td.onclick = function () { if (this.classList.contains('hidden')) { this.classList.remove('hidden'); } else { this.classList.add('hidden'); } } })
.hidden svg { opacity: 0; visibility: hidden; } .hidden { background-color: red; }
<table> <tr class="js-tr"> <td>1</td> <td>2</td> <td>3</td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.