添加新行到 table 三列 Javascript html 点击函数

Question

Desrciption

我希望能够使用 javascript 添加一行三列到 html 中的 table。我正在创建一个 table，用户可以在其中输入自己的文本，并将该文本与其他两条信息一起添加到 table 的三列中。我拥有的当前代码不会显示新行。该代码还包括拖放功能，用户可以单击该行并将其拖到 table 中的不同位置。我正在寻求有关为什么当我按下单击按钮时它不会向 table 添加新行的指导。编辑：更新后代码现在可以工作，但 else 语句不执行任何操作。

Javascript

 function addRow(mytable) {
 var food = document.createTextNode(document.querySelector('.input').value);
 var category = document.createTextNode(document.querySelector('.input2').value);
 var time = document.createTextNode(document.querySelector('.input3').value);
 document.querySelector('.input').value = '';
  document.querySelector('.input2').value = '';
   document.querySelector('.input3').value = '';
  // Get a reference to the table
  if (food !== '') {
  var tableRef = document.getElementById(mytable);
  var attr = document.createAttribute('draggable');
  attr.value = 'true';
  // Insert a row at the end of the table
  var newRow = tableRef.insertRow(-1);
  newRow.setAttributeNode(attr);
  newRow.className = 'draggable';

  // Insert a cell in the row at index 0
  var newCell = newRow.insertCell(0);
  var newCell2 = newRow.insertCell(1);
  var newCell3 = newRow.insertCell(2);

   var newText = food;
   var newText2 = category;
   var newText3 = time;

  newCell.appendChild(newText);
  newCell2.appendChild(newText2);
  newCell3.appendChild(newText3);
  addEventsDragAndDrop(newRow);
   }
   //not working for some reason
   else {
     document.getElementById("msg").innerHTML = "Please enter a name";
   }
}

javascript click

 document.getElementById('btn').addEventListener('click', function( {addRow('mytable');});

HTML

<table id="mytable">
                   <tr>
                     <th>Component</th>
                     <th>Category</th>
                     <th>Time</th>
                   </tr>

                   <div id="addRow"></div>

                </table>

Answer 1

以下调整很少，但需要更多细节，atm 组件只有一个文本输入，但可以为 cook/time

添加更多

function addRow(mytable) {
             var newItem = document.createTextNode(document.querySelector('.input').value);
             var category = document.createTextNode("Cook");
             var time = document.createTextNode("time");
             document.querySelector('.input').value = '';
          // Get a reference to the table
           if (newItem != '') {
              var tableRef = document.getElementById(mytable);
              var attr = document.createAttribute('draggable');
              attr.value = 'true';
          // Insert a row at the end of the table
              var newRow = tableRef.insertRow(-1);
              newRow.setAttributeNode(attr);
              newRow.className = 'draggable';

          // Insert a cell in the row at index 0
              var newCell = newRow.insertCell(0);
              var newCell2 = newRow.insertCell(1);
              var newCell3 = newRow.insertCell(2);

              var newText =  newItem;
              var newText2 =  category;
              var newText3 = time;

              newCell.appendChild(newText);
              newCell2.appendChild(newText2);
              newCell3.appendChild(newText3);
              addEventsDragAndDrop(newRow);
           }
        }
        
        document.getElementById('btn').addEventListener('click', function(){addRow('mytable');});

<table id="mytable">
                   <tr>
                     <th>Component</th>
                     <th>Category</th>
                     <th>Time</th>
                   </tr>
                   <tr class="draggable" id="draggable" draggable="true">
                   <td>Food goes here</td>
                   <td>Cook</td>
                   <td>10</td>
                 </tr>

                   <div id="addRow"></div>

                </table>
                
                
                                <label for='component'>component</label>
                <input class='input' id='component' />
                <button id='btn'>add component</button>

添加新行到 table 三列 Javascript html 点击函数

Adding new row to table with three columns Javascript html click function

html

javascript

click

draggable