我需要 JavaScript 方面的帮助
如何为所有与旧行具有相同属性的列添加新行，它必须为新行添加“删除按钮”？
如何排除带有按钮的单元格进行编辑？
如何在按下删除按钮时发出确认消息？
我尝试了下面的脚本，但它们没有按我想要的方式工作
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-between">
<div class="mg-l-auto">
<button class="btn btn-primary active" title="Add New" onclick="addRow()">Add New Row</button>
</div>
</div><!-- ht-65 -->
<p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
enter code html here
<table id="bagua-table">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nw"><strong>Northwest</strong>
<br>Metal
<br>Silver
<br>Elders
</td>
<td class="n"><strong>North</strong>
<br>Water
<br>Blue
<br>Change
</td>
<td class="ne"><strong>Northeast</strong>
<br>Earth
<br>Yellow
<br>Direction
</td>
<td class="ne"><button class="btn btn-light bd btn-block" style="width:100px"> remove</button></td>
</tr>
<tr>
<td class="w"><strong>West</strong>
<br>Metal
<br>Gold
<br>Youth
</td>
<td class="c"><strong>Center</strong>
<br>All
<br>Purple
<br>Harmony
</td>
<td class="e"><strong>East</strong>
<br>Wood
<br>Blue
<br>Future
</td>
<td class="ne"><button class="btn btn-light bd btn-block" style="width:100px"> remove</button></td>
</tr>
<tr>
<td class="sw"><strong>Southwest</strong>
<br>Earth
<br>Brown
<br>Tranquility
</td>
<td class="s"><strong>South</strong>
<br>Fire
<br>Orange
<br>Fame
</td>
<td class="se"><strong>Southeast</strong>
<br>Wood
<br>Green
<br>Romance
</td>
<td class="ne"><button class="btn btn-light bd btn-block" style="width:100px"> remove</button></td>
</tr>
</tbody>
</table>
我的脚本
<!--add row-->
<script>
function addRow() {
var table = document.getElementById("bagua-table");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
cell1.innerHTML = "";
}
</script>
<!--remove row-->
<script>
$('.table tbody').on('click','.btn',function(){
$(this).closest('tr').remove();
});
</script>
<!--edit cell-->
<script>
let table = document.getElementById('bagua-table');
let editingTd;
table.onclick = function(event) {
// 3 possible targets
let target = event.target.closest('.edit-cancel,.edit-ok,td');
if (!table.contains(target)) return;
if (target.className == 'edit-cancel') {
finishTdEdit(editingTd.elem, false);
} else if (target.className == 'edit-ok') {
finishTdEdit(editingTd.elem, true);
} else if (target.nodeName == 'TD') {
if (editingTd) return; // already editing
makeTdEditable(target);
}
};
function makeTdEditable(td) {
editingTd = {
elem: td,
data: td.innerHTML
};
td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
let textArea = document.createElement('textarea');
textArea.style.width = td.clientWidth + 'px';
textArea.style.height = td.clientHeight + 'px';
textArea.className = 'edit-area';
textArea.value = td.innerHTML;
td.innerHTML = '';
td.appendChild(textArea);
textArea.focus();
td.insertAdjacentHTML("beforeEnd",
'<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
);
}
function finishTdEdit(td, isOk) {
if (isOk) {
td.innerHTML = td.firstChild.value;
} else {
td.innerHTML = editingTd.data;
}
td.classList.remove('edit-td');
editingTd = null;
}
</script>
</body>
</html>
最佳答案
这里有添加和删除行的工作示例。
<table>
<thead>
<tr><th>asdasd</th><th>asdadsdasd</th></tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
<button id="add_row_button">Add row</button>
<script type="text/javascript">
var tableBody = document.getElementById("table_body")
var addRowButton = document.getElementById("add_row_button")
var rowId = 0;
addRowButton.addEventListener('click', function() {
var row = tableBody.insertRow(0)
row.id = `table_row_${++rowId}`
console.log(row.id)
row.addEventListener('click', function() { deleteRow(row.id) })
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1)
cell1.innerHTML = "Value of cell 1"
cell2.innerHTML = "VAlue of cell 2"
})
function deleteRow(rowId){
console.log("DELETEING")
var elementToRemove = document.getElementById(rowId)
elementToRemove.parentNode.removeChild(elementToRemove)
}
</script>
仔细研究并应用于您的需求。示例非常简单，因此理解它应该没有问题。
关于javascript - 添加从表中删除编辑行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57508286/