我制作了這個簡單的網頁，將元素添加到表格中。在每個元素上都有一個發布和洗掉按鈕。忽略發布按鈕，因為它正在運行。每當我單擊洗掉按鈕以將該特定行移動到其他名為的表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>uj5u.com熱心網友回復：
我會這樣做...
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 >Post</button>`
`<button >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>uj5u.com熱心網友回復：
這是我剛剛更改了洗掉功能的答案。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/424600.html
標籤：javascript html html表
上一篇：打開/關閉側邊欄更改按鈕