[英]Adding new row to table with three columns Javascript html click function
说明
我希望能够使用带有三列的 javascript 向 html 中的表格添加一行。 我正在创建一个表格,用户可以在其中输入自己的文本并将文本与其他两条信息一起添加到表格的三列中。 我拥有的当前代码不会显示新行。 该代码还包括一个拖放功能,用户可以在其中单击该行并将其拖到表格中的不同位置。 我正在寻求指导,为什么当我按下单击按钮时,它不会向表中添加新行。 编辑:更新后代码现在可以工作,但 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 点击
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>
下面的调整很少,但需要更多细节,atm 组件只有一个文本输入,但可以为烹饪/时间添加更多
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.