從表中刪除元素並將它們添加到其他表
[英]Removing elements from table and adding them to other table
問題描述
我制作了這個向表格添加元素的簡單網頁。 在每個元素上都有一個發布和刪除按鈕。 忽略發布按鈕，因為它正在運行。 每當我單擊該特定行的刪除按鈕時，如何將其移動到名為removed elements的其他表並將它們從主表中刪除？
var title = document.getElementById("title"); var author = document.getElementById("author"); var output = document.getElementById("output"); function addToTable() { output.innerHTML += "<tr>" + "<td>" + title.value + "</td>" + "<td>" + author.value + "</td>" + "<td>" + "<input type='button' onclick='post(this);' id='post' value ='Post'>" + "<input type='button' onclick='remove(this);' id='remove'value ='Remove'>" + "</td>" + "</tr>" } function remove(btn) { var row = btn.parentNode.parentNode; var removed = document.getElementById("removed"); removed.innerHTML += "<div>" + row.parentNode.value + "</div>"; row.parentNode.removeChild(row); } function post(btn) { var row = btn.parentNode; row.parentNode.style.backgroundColor = "Green"; btn.setAttribute("disabled", "true"); btn.parentNode.lastElementChild.setAttribute("disabled", "true"); }
label { width: 100px; display: inline-block; } table, th, td, tr, td { border: 1px solid black; border-collapse: collapse; } table td { text-align: center; }
<body> <div> <div> <label for="Title">Title</label> <input type="text" id="title"> </div> <div> <label for="Author">Author</label> <input type="text" id="author"> </div> </div> <div> <input type="button" value="Add" onclick="addToTable();"> </div> <div> <table id="output"> <th style="width:45%;">Title</th> <th style="width:45%;">Author</th> <th style="width:10%;">Button</th> </table> </div> <div> <h1>Removed elements</h1> <table id="removed"> </table> </div> </body>
2 個解決方案
解決方案1
1 已采納 2022-02-16 15:18:03
我會這樣做...
const title = document.getElementById('title'), author = document.getElementById('author'), btAdd = document.getElementById('bt-Add'), T_output = document.querySelector('#t-output'), T_output_tb = document.querySelector('#t-output tbody'), T_removed = document.querySelector('#t-removed'), T_removed_tb = document.querySelector('#t-removed tbody'); btAdd.onclick = () => { let inTittle = title.value.trim(), inAuthor = author.value.trim(); if ( inTittle.== '' && inAuthor.== '' ){ title.value = '' author.value = '' title.focus() let newRow = T_output_tb.insertRow() newRow.insertCell().textContent = inTittle newRow.insertCell().textContent = inAuthor newRow.insertCell().innerHTML = `<button class="bt-post">Post</button>` + `<button class="bt-remove">Remove</button>` } } T_output_tb.onclick = e => { if (.e,target.matches('button.bt-post. button.bt-remove')) return let tRow = e.target.closest('tr') if (e.target.matches('button.bt-remove')) { if (.T_removed.tHead) { let headRow = T_removed:createTHead().insertRow() headRow.appendChild( T_output.querySelector('thead th:nth-child(1)').cloneNode(true) ) headRow.appendChild( T_output.querySelector('thead th.nth-child(2)').cloneNode(true) ) } tRow.deleteCell(2) T_removed.appendChild( tRow) } if (e.target.matches('button.bt-post')) { tRow.classList.add('green') tRow.querySelectorAll('button').forEach(bt=>bt.disabled = true) } }
body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } label { width: 3em; display: inline-block; } table { border-collapse: separate; border-spacing: 1px; background-color: darkblue; margin: 1em; } th, td { border: none; background: whitesmoke; padding: .3em.6em; } th { min-width: 10em; } th:nth-child(3) { min-width: 5em; } td button:first-of-type { margin-right: .2em; } tr.green td { background: lightgreen; }
<div> <div> <label for="Title">Title</label> <input type="text" id="title"> </div> <div> <label for="Author">Author</label> <input type="text" id="author"> </div> </div> <div> <button id="bt-Add">Add</button> </div> <div> <table id="t-output"> <thead> <th>Title</th> <th>Author</th> <th>Button</th> </thead> <tbody> </tbody> </table> </div> <div> <h1>Removed elements</h1> <table id="t-removed"> <tbody> </tbody> </table> </div>
解決方案2
0 2022-02-16 14:29:05
這是我剛剛更改刪除 function 的答案。
var title = document.getElementById("title"); var author = document.getElementById("author"); var output = document.getElementById("output"); function addToTable() { output.innerHTML += "<tr>" + "<td>" + title.value + "</td>" + "<td>" + author.value + "</td>" + "<td>" + "<input type='button' onclick='post(this);' id='post' value ='Post'>" + "<input type='button' onclick='remove(this);' id='remove'value ='Remove'>" + "</td>" + "</tr>" } function remove(btn){ var row = btn.parentNode.parentNode; var removed = document.getElementById("removed"); removed.append(row); row.parentNode.appendChild(row); } function post(btn) { var row = btn.parentNode; row.parentNode.style.backgroundColor = "Green"; btn.setAttribute("disabled", "true"); btn.parentNode.lastElementChild.setAttribute("disabled", "true"); }
label { width: 100px; display: inline-block; } table, th, td, tr, td { border: 1px solid black; border-collapse: collapse; } table td { text-align: center; }
<body> <div> <div> <label for="Title">Title</label> <input type="text" id="title"> </div> <div> <label for="Author">Author</label> <input type="text" id="author"> </div> </div> <div> <input type="button" value="Add" onclick="addToTable();"> </div> <div> <table id="output"> <th style="width:45%;">Title</th> <th style="width:45%;">Author</th> <th style="width:10%;">Button</th> </table> </div> <div> <h1>Removed elements</h1> <table id="removed"> </table> </div> </body>
JS：在嵌套數組中添加和刪除元素，這些元素代表表數據
[英]JS: Adding and removing elements in nested array, which represents table data
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.