使用 JavaScript 动态添加/删除表格行

IT技术 javascript html
2021-01-21 00:39:45

我正在尝试按照此示例和此示例添加/删除表行。

这是我的代码：

HTML 表单

<div id="POItablediv">
    <input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
    <table id="POITable" border="1">
        <tr>
            <td>POI</td>
            <td>Latitude</td>
            <td>Longitude</td>
            <td>Delete?</td>
            <td>Add Rows?</td>
        </tr>
        <tr>
            <td>1</td>
            <td><input size=25 type="text" id="latbox" readonly=true/></td>
            <td><input size=25 type="text" id="lngbox" readonly=true/></td>
            <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
            <td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/></td>
        </tr>
    </table>
</div>

JavaScript

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
    var x=document.getElementById('POITable').insertRow(1);
    var c1=x.insertCell(0);
    var c2=x.insertCell(1);
    c1.innerHTML="NEW CELL1";
    c2.innerHTML="NEW CELL2";
}

现在，如您所见，在我的表格中，我有文本字段和按钮。我想要的是：

  1. 只是为了重复行的结构。我现在不能这样做，因为innerHTM 只需要文本。如何插入文本字段或标签？

  2. 文本字段的 id 也应该不同，因为稍后我将检索这些值以将其放入数据库。

  3. 我还想添加一个函数来增加 POI 的数量

有人可以帮我吗？

6个回答

您可以只克隆具有输入的第一行，然后获取嵌套输入并更新其 ID 以添加行号（并对第一个单元格执行相同操作）。

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
    var x=document.getElementById('POITable');
       // deep clone the targeted row
    var new_row = x.rows[1].cloneNode(true);
       // get the total number of rows
    var len = x.rows.length;
       // set the innerHTML of the first row 
    new_row.cells[0].innerHTML = len;

       // grab the input from the first cell and update its ID and value
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

       // grab the input from the first cell and update its ID and value
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

       // append the new row to the table
    x.appendChild( new_row );
}

下面的演示

Show code snippet

@Pow：使用例如在我的评论以上，改变，使初始克隆从第一行到该行：clone = tbody.removeChild(tbody.rows[0]);。因此，您将从服务器发送该行，然后立即将其删除，并将其存储在clone. 然后创建另一个按钮来添加该初始行。可能您只想在表格外有一个按钮来添加行，因为没有太多理由在表格中一遍又一遍地重复相同的按钮。
2021-03-19 00:39:45
我还有一个顾虑。如果我没有任何创建的行怎么办？假设我想做完全相同的事情。但是第 2 行（正在克隆）最初不存在。
2021-03-23 00:39:45
@Pow：不客气。我把另一个例子放在一起。这个将你的标题行放在一个<thead>元素中，其余的放在一个<tbody>元素中。此外，我更新了代码以在删除行时更新行号和 ID，并将一些代码移到其自己的函数中。
2021-03-24 00:39:45
谢谢...我会试试的！
2021-03-31 00:39:45
非常感谢！.. 小菜一碟！
2021-04-05 00:39:45

Easy Javascript 添加更多具有删除功能的行

干杯！

<TABLE id="dataTable">
<tr><td>
               <INPUT TYPE=submit name=submit id=button class=btn_medium VALUE=\'Save\'  >
               <INPUT type="button" value="AddMore" onclick="addRow(\'dataTable\')" class="btn_medium"    /> 
</td></tr>

<TR>
<TD> 
                <input type="text" size="20" name="values[]"/> <br><small><font color="gray">Enter Title</font></small> 
</TD>
</TR>
</table>



<script>


function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell3 = row.insertCell(0);
       cell3.innerHTML = cell3.innerHTML +' <input type="text" size="20" name="values[]"/> <INPUT type="button"  class="btn_medium" value="Remove" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);" /><br><small><font color="gray">Enter Title</font></small>';
  //cell3.innerHTML = cell3.innerHTML +' <input type="text" size="20" name="values[]"/> <INPUT type="button"  class="btn_medium" value="Remove" onclick="this.parentNode.parentNode.innerHTML=\'\';" /><br><small><font color="gray">Enter Title</font></small>';       
}

</script>

这似乎比上面的答案更清晰......

<script>
var maxID = 0;
function getTemplateRow() {
var x = document.getElementById("templateRow").cloneNode(true);
x.id = "";
x.style.display = "";
x.innerHTML = x.innerHTML.replace(/{id}/, ++maxID);
return x;
}
function addRow() {
var t = document.getElementById("theTable");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
r.parentNode.insertBefore(getTemplateRow(), r);

}
</script>


<table id="theTable">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr id="templateRow" style="display:none">
<td>{id}</td>
<td><input /></td>
</tr>
</table>


<button onclick="addRow();">Go</button>
对于原型设计，没有更好的了。
2021-03-16 00:39:45
谢谢...是的，我猜我必须:)
2021-03-19 00:39:45
@BradLaney 为什么要为这样的事情学习 jQuery？我并不反对 jQuery，但是，很多人依赖 jQuery 来完成可以使用纯 JS 完成的简单事情。几年后，人们甚至会忘记 JS 的基础知识。
2021-03-31 00:39:45

如果在每一行上放置一个删除按钮，则：

<tr>
  <td><input type="button" value="Delete row" onclick="deleteRow(this);">
  <td><input type="text">
  <td><input type="text">

而 deleteRow 函数可以是：

function deleteRow(el) {
    // while there are parents, keep going until reach TR 
    while (el.parentNode && el.tagName.toLowerCase() != 'tr') {
        el = el.parentNode;
    }

    // If el has a parentNode it must be a TR, so delete it
    // Don't delte if only 3 rows left in table
    if (el.parentNode && el.parentNode.rows.length > 3) {
        el.parentNode.removeChild(el);
    }
}

如果您的所有行都具有相同的内容，则通过克隆现有行来添加行会快得多：

function addRow(tableID) {
    var table = document.getElementById(tableID);

    if (!table) return;

    var newRow = table.rows[1].cloneNode(true);

    // Now get the inputs and modify their names 
    var inputs = newRow.getElementsByTagName('input');

    for (var i=0, iLen=inputs.length; i<iLen; i++) {
        // Update inputs[i]
    }

    // Add the new row to the tBody (required for IE)
    var tBody = table.tBodies[0];
    tBody.insertBefore(newRow, tBody.lastChild);
}
这会在最后一行之前添加新行。如何在最后一行后添加新行？
2021-03-19 00:39:45

您可以以最简单的方式向表中添加一行，如下所示：-

我发现这是添加 row 的最简单方法。令人敬畏的是，即使它包含输入元素，它也不会更改已经存在的表格内容。

row = `<tr><td><input type="text"></td></tr>`
$("#table_body tr:last").after(row) ;

这#table_body是表体标签的 id 。

其它你可能感兴趣的问题
上一篇IE8 的边框半径 下一篇显示更新的日志文件的内容