添加行時如何使用innerHTML格式化所有行，如第1行？-有解無憂

一般來說，我是 Web 開發和編碼的新手。我正在用桌子練習。我在這里有這個 HTML：

本質上，我堅持對內部 html 部分進行微調，以便每個新行都具有與第 1 行完全相同的占位符和選擇框。謝謝您的幫助。

       <!DOCTYPE html>
    <html lang="en">
    <style>
        table, th, td {
            border: 1px solid black;
            }
    </style>
    
    <head> 
    </head>
    
    <body>
    
    
    <table id = "table">
        <thead>
            <tr>
                <th>Product</th>
                <th>Amount</th>
                <th>Buy or Sell?</th>
             </tr>
             <tr>
    
                <td><input type = "text" name = "name" placeholder = "Enter the Product Name Here"> </td>
                <td><input type = "text" name = "Amount" placeholder = "Enter the Amount you want to buy or sell Here"></td>
                <td><select id = "optionSell">
                <option value = "placeholding">Buy or Sell</option>
                <option value = "buy">Buy</option>
                <option value = "sell">Sell</option>
                </select>
             </tr>
        </thead>
    </table>
    <div class = "container">
        <div id = "click">
            <button onclick = "MycreateRow()">Add Row</button>
        </div>
    </div>
    </body>
    
    <script>
    function createRow() {
    let table = document.getElementById("table");
    let row = table.insertRow(-1);
    let productCell = row.insertCell(0)
    let amountCell = row.insertCell(1)
    let buyCell = row.insertCell(2)
    productCell.innerHTML = "<div contenteditable></div>"
    amountCell.innerHTML = "<div contenteditable></div>"
    
    }
    </script>

uj5u.com熱心網友回復：

既然您說您是 Web-Stack 的新手，我會給您一個包含更多資訊的答案，而不僅僅是您的問題。

學習和使用語意元素。對于輸入，語意元素是<input>或<textarea>。默認情況下，語意標簽已經幫助您實作可訪問性。這意味著您不必費心去考慮可能使用螢屏閱讀器的用戶。
使用表格時，問問自己內容是否是表格資料。絕不！使用表格進行樣式設定或對齊。在這種情況下，請始終使用 CSS-Grid 或 Flexbox。唯一可接受的例外是電子郵件模板。
不要使用onclick- 屬性作為觸發器。現代解決方案是將 HTML 和 JS 完全拆分并使用外部 JS 檔案。這將有助于您以后進行維護，因為您只需關心一個檔案，而不必手動搜索連接并更改它們（節省您以后的作業）。解決方案是在 JS 中使用一個addEventListener并直接在 JS 中收聽按鈕的“點擊”。
將您要創建的整行放入backticks. 這使您可以多行撰寫它們（對于其他情況也有其他優點）。
如果你想添加你不應該再使用的元素innerHTML。它會帶來安全風險（XSS-Injections）并且速度很慢，因為必須重新決議整個 DOM。如果要添加 HTML，可以使用簡單易行的insertAdjacentHTML方法。

insertAdjacentHTML后面是 2 個關鍵字的語法。首先是position，然后是您要插入的文本/字串。beforeend將在元素結尾之前插入字串。afterend將其插入元素之后，例如

document.querySelector('#add-row').addEventListener('click', function() {
  let row = `<tr>
               <td><input type="text" name="name" placeholder="Enter the Product Name Here"> </td>
               <td><input type="text" name="Amount" placeholder="Enter the Amount you want to buy or sell Here"></td>
               <td>
                 <select id="optionSell">
                   <option value="placeholding">Buy or Sell</option>
                   <option value="buy">Buy</option>
                   <option value="sell">Sell</option>
                 </select>
               </td>
             </tr>`;
  let table = document.querySelector('#table');
  table.insertAdjacentHTML('beforeend', row);
})

table,
th,
td {
  border: 1px solid black;
}

<table id="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Amount</th>
      <th>Buy or Sell?</th>
    </tr>
    <tr>

      <td><input type="text" name="name" placeholder="Enter the Product Name Here"> </td>
      <td><input type="text" name="Amount" placeholder="Enter the Amount you want to buy or sell Here"></td>
      <td>
        <select id="optionSell">
          <option value="placeholding">Buy or Sell</option>
          <option value="buy">Buy</option>
          <option value="sell">Sell</option>
        </select>
      </td>
    </tr>
  </thead>
</table>
<div class="container">
  <div id="click">
    <button id="add-row">Add Row</button>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/508277.html

標籤：javascript html

上一篇：一段時間后，頁面在HTML、javascript中提交表單時被重置

下一篇：VBA作業表物件單元格屬性錯誤