How to use innerHTML to format all the rows like row 1 when adding rows?-CodePudding

I'm new to web development and coding in general. I'm practicing with tables. I have this HTML here:

Essentially I'm stuck on finessing the inner html portion so that each new row will have the exact same placeholder and selection box as row 1. Thank you for your help.

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

CodePudding user response：

Since you stated that you're new to the Web-Stack I will give you an answer that contains more information than just your question.

Learn and use the semantic elements. For an input, the semantic elements are either <input> or <textarea>. Semantic tags by default already help you with accessibility. This means you don't have to bother too much to think about users that might use screen-readers.
When using tables, question yourself if the content is tabular data. Never! use tables for styling or aligning purpose. In that case, always use CSS-Grid or Flexbox. The only acceptable exception is an email template.
Do not use the onclick-attribute as a trigger. The modern solution is to split HTML and JS completely and use an external JS file. This will help you later on with maintenance as you only have to bother about one file and do not have to search for connections and change them all manually (saves you work later on). The solution is to use an addEventListener in JS and to listen to a 'click' of the button in the JS directly.
put the entire row you want to create inside backticks. This allows you to write them multiline (also has other advantages for other cases).
if you want to add Elements you should not use innerHTML anymore. It poses a security risk (XSS-Injections) and is slow as the whole DOM has to be reparsed. If you want to add HTML you could use the simple and easy insertAdjacentHTML method.

insertAdjacentHTML follows by a syntax out of 2 keywords. First the position and then the text/string you want to insert. beforeend will insert the string before the end of the element. afterend would insert it after the element e.g.

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 >
  <div id="click">
    <button id="add-row">Add Row</button>
  </div>
</div>