使用三列Javascript html单击功能向表中添加新行

清除

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

Javascript

javascript点击

HTML

组成部分
类别
时间

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

函数addRow（mytable）{
var newItem=document.createTextNode（document.querySelector（'.input'）.value）；
var category=document.createTextNode（“库克”）；
var time=document.createTextNode（“时间”）；
document.querySelector（'.input'）。值=''；
//获取对该表的引用
如果（新项目！=''）{
var tableRef=document.getElementById（mytable）；
var attr=document.createAttribute（'draggable'）；
attr.value='true'；
//在表的末尾插入一行
var newRow=tableRef.insertRow（-1）；
newRow.setAttributeNode（attr）；
newRow.className='draggable'；
//在索引0处的行中插入单元格
var newCell=newRow.insertCell（0）；
var newCell2=newRow.insertCell（1）；
var newCell3=newRow.insertCell（2）；
var newText=newItem；
var newText2=类别；
var newText3=时间；
appendChild（newText）；
newCell2.appendChild（newText2）；
newCell3.appendChild（newText3）；
addEventsDragAndDrop（新罗）；
}
}
document.getElementById（'btn'）.addEventListener（'click'，function（）{addRow（'mytable'）；}）

组成部分
类别
时间
这里有食物
烹调
10
成分
在此行添加组件：
newCell.appendChild（newText）
，
newText
是字符串，
appendChild
需要TextNode对象。您应该会在控制台中看到一条错误消息。谢谢您知道这一点非常有帮助。是的，它是这样工作的。谢谢，我在文本框中有一个单击按钮，您的代码与表中的用户输入文本框有一些重复。但是，我将合并此代码以使其工作。我可能会增加更多的时间和烹饪，但我要做的是将输入与ajax下拉列表匹配，并从数据库中提取数据。
 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";
   }
}

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

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

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

                </table>