JavaScript DOM 表操作

Posted 2023-03-05

技术标签:

【中文标题】JavaScript DOM 表操作【英文标题】：JavaScript DOM table manipulation 【发布时间】：2021-05-09 03:17:05 【问题描述】：

第一个问题

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

第二个问题

当我生成表格时，我不知道我在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;

【问题讨论】：

何时调用Item()？此外，您的 HTML 无效，因为在关闭 head 和打开 body 之间不允许任何内容。它在语义上也不正确。你不应该有h2，除非你正在制作h1的子部分。 Item 在哪里定义？坦率地说，你的代码有点乱。尝试包括我们执行它所需的一切。在第一个显示 this.details = ... 的 sn-p 中，结束标记中有反斜杠。我修复body标签无论你想做什么，你都让它变得比它需要的复杂得多。看来您只是想制作一个购物清单，有人可以在其中添加商品并添加该商品的详细信息和描述。那正确吗？我什至不会费心尝试修复您在这里的代码 - 这不是正确的方法。 【参考方案1】：

您的方法涉及的内容比必要的要多得多，尝试修复它确实对您没有任何好处。

有关最简单的方法，请参阅下面的 cmets inline。

// 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 表操作的主要内容，如果未能解决你的问题，请参考以下文章

React学习

JavaScript DOM 表操作

JavaScript 使用DOM操纵样式表

jQuery基础入门

node环境配置安装(nvm)

JavaScript的DOM操作