JavaScript DOM table 操纵

Question

第一个问题

如何修改函数 cut() 以将“直通”应用于所有 td 元素，而不仅仅是第一个元素。

第二题

当我生成 table 时，我不知道我在 this.details 中遗漏了什么，只自动生成 table 的 th 一次（不要像下面的代码那样在 html 中显示）因为我试过

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

并且为每个 td 生成第 th 个。

<!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;
}

Answer 1

你的方法比必要的复杂得多，尝试修复它对你真的没有任何好处。

有关最简单的方法，请参阅下面的内联评论。

// 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>

JavaScript DOM table 操纵

JavaScript DOM table manipulation

html

javascript

dom

html-table

dom-events