JavaScript DOM table manipulation

第一个问题

如何修改函数cut()以应用"line-through">

第二个问题

当我生成表时，我不知道我在this.details中缺少什么来自动生成表的th只有一次(不像下面的代码那样显示在html中)，因为我尝试了

this.details = `<tr>
                        
<th>Item description<th>
<th>Action<th>
<td>${this.item}</td>
<td>${this.action}</td>
</tr>`;

和th分别为每个td生成。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>list</title>
</head>
<body>
<h2>list</h2>
<div class="container">
<input type="text" name="item" id="item">
<label for="item"></label>
<input type="button" value="Add item" class="addBtn" id="add">
</div>
<div class="container" id="sort">
<input type="button" value="Sort asc" class="btn">
<input type="button" value="Sort desc" class="btn">
</div>
<div class="tableData" id="table">
<table id="display-none">
<tr>
<th class="show-succes">product</th>
<th class="show-succes">mark</th>
</tr>
</div>
<script src="app.js"></script>
</body>
</html>


function Item(item, action, table) {
this.item = item;
this.action = `<input type="button" value="Mark as buyed" class="newBtn" id="buton" onclick="cut()" `;
this.details = `<tr>
<td>${this.item}</td>
<td>${this.action}</td>
</tr>`;
this.table = table;
this.addToTable = function () {
this.table.innerHTML += this.details;
};
}

const addBtn = document.getElementById('add');
addBtn.addEventListener('click', addNewItem);

function addNewItem() {
const items = document.getElementById('item').value;
const actions = 'mark as buyed'
const myTable = document.getElementById('display-none');

const item = new Item(items, actions, myTable);
item.addToTable();

}
function cut() {
let el = document.querySelector("td");
el.style.textDecoration = "line-through";

}

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
}
h2 {
text-align: center;
padding: 60px ;
}
input[type="text"]{
margin-right: 20px;
}
label{
padding: 15px;
}
.btn{
padding: 5px;
margin-top: 20px;
margin-right: 10px;
}
#sort{
margin-left: -90px;
}
.container{
display: flex;
justify-content: center;
}

#table{
width: 40%;
text-align: center;
margin-left: 650px;
margin-top: 20px;
}

你的方法太复杂了，对你修复它没有任何好处。

最简单的方法见下面的注释。

// Get reference to the elements you'll use
// over and over, just once.
const input = document.getElementById("item");
const tbl = document.querySelector("table");
const add = document.querySelector(".addBtn");
// Add an event handler for the add button click
add.addEventListener("click", function(){
let row = tbl.insertRow();     // Add a row to the table
let itemCell = row.insertCell();  // Add a td to the row
itemCell.textContent = input.value;  // Put the input value in the td
let actionCell = row.insertCell();  // Add a second td to the row
let chk = document.createElement("input");  // Create a new input
chk.type = "checkbox";  // Make the input a checkbox
chk.value = "bought";   // Set a value for the checkbox

// Set up an event handler for the new checkbox
chk.addEventListener("click", function(){
// Find the nearest ancestor tr and then query it 
// for the first td in it. Then toggle the use of the
// "strike" CSS class to add or remove strikethrough.
this.closest("tr").querySelector("td").classList.toggle("strike");
});

actionCell.appendChild(chk); // Add the checkbox to the td
input.value = ""; // Clear out the textbox
tbl.classList.remove("hidden"); // Show the table
});

body {
font-family:Calibri, Helvetica, Arial;
}
h1 {
font-size:1.8em;
}
div {
margin:1em;
}
.strike {
text-decoration-line: line-through;
}
.hidden {
display:none;
}

<h1>SHOPPING LIST</h1>
<div class="addItems">
<input type="text" id="item">
<input type="button" value="Add item" class="addBtn">
</div>
<table class="hidden">
<tr>
<th>Item</th>
<th>Bought?</th>
</tr>
</table>

相关内容

最新更新

热门标签：