使用JavaScript动态添加/删除表格行 [英] Add/Delete table rows dynamically using JavaScript

问题描述

我试图在这个例子中添加/删除表格行和这个例子。

以下是我的代码：

HTML表单

 < div id =POItablediv> 
< input type =buttonid =addPOIbuttonvalue =Add POIs/>< br />< br /> 
< table id =POITableborder =1> 
< tr> 
< td> POI< / td> 
< td>纬度< / td> 
< td>经度< / td> 
< td>删除？< / td> 
< td>添加行？< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>< input size = 25 type =textid =latboxreadonly = true />< / td> 
< td>< input size = 25 type =textid =lngboxreadonly = true />< / td> 
< td>< input type =buttonid =delPOIbuttonvalue =Deleteonclick =deleteRow（this）/>< / td> 
< td>< input type =buttonid =addmorePOIbuttonvalue =添加更多兴趣点onclick =insRow（）/>< / td> 
< / tr> 
< / table> 
< / div> 
  

JavaScript

  function deleteRow（row）
 {
 var i = row.parentNode.parentNode.rowIndex; 
 document.getElementById（'POITable'）。deleteRow（i）; 
 
 
 $ b函数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; 
 
 
 
 
 
 $ b现在，正如你所看到的，在我的表格中我有文本字段和按钮。我想要的： 
 
 
 
 
 
只需重复该行的结构即可。我现在无法做到这一点，因为innerHTM只需要文本。如何插入文本字段或标签？
   
 
 
文本字段的id也应该不同，因为稍后将检索值以将其放入数据库中。
  
 
 
我想放置一个函数来增加兴趣点的数量以及
 
任何人都可以帮我解决问题吗？ 
解决方案
您可以克隆具有输入的第一行，然后获取嵌套输入并更新其ID以添加行数字（并且对第一个单元格做同样的处理）。 
 
 
 函数deleteRow（row）
 {
 var i = row.parentNode.parentNode.rowIndex; 
 document.getElementById（'POITable'）。deleteRow（i）; 
 
 
 
函数insRow（）
 {
 var x = document.getElementById（'POITable'）; 
 //深层克隆目标行
 var new_row = x.rows [1] .cloneNode（true）; 
 //获取行总数
 var len = x.rows.length; 
 //设置第一行的innerHTML 
 new_row.cells [0] .innerHTML = len; 
 
 //从第一个单元格获取输入并更新其ID和值
 var inp1 = new_row.cells [1] .getElementsByTagName（'input'）[0]; 
 inp1.id + = len; 
 inp1.value =''; 
 
 //从第一个单元格获取输入并更新其ID和值
 var inp2 = new_row.cells [2] .getElementsByTagName（'input'）[0]; 
 inp2.id + = len; 
 inp2.value =''; 
 
 //将新行追加到表
 x.appendChild（new_row）; 
 
  
以下演示 
 
 
 
 
  function deleteRow（row）{var i = row.parentNode.parentNode.rowIndex; document.getElementById（'POITable'）。deleteRow（i）;}函数insRow（）{console.log（'hi'）; var x = document.getElementById（'POITable'）; var new_row = x.rows [1] .cloneNode（true）; var len = x.rows.length; new_row.cells [0] .innerHTML = len; var inp1 = new_row.cells [1] .getElementsByTagName（'input'）[0]; inp1.id + = len; inp1.value =''; var inp2 = new_row.cells [2] .getElementsByTagName（'input'）[0]; inp2.id + = len; inp2.value =''; x.appendChild（new_row）;}  

< div id = POItablediv > < input type =buttonid =addPOIbuttonvalue =Add POIs/>< br />< br /> < table id =POITableborder =1> < TR> < TD> POI< / TD> < TD>纬度< / TD> < TD>经度< / TD> < TD>删除< / TD> < td>添加行？< / td> < / TR> < TR> < TD→1< / TD> < td>< input size = 25 type =textid =latbox/>< / td> < td>< input size = 25 type =textid =lngboxreadonly = true />< / td> < td>< input type =buttonid =delPOIbuttonvalue =Deleteonclick =deleteRow（this）/>< / td> < td>< input type =buttonid =addmorePOIbuttonvalue =添加更多兴趣点onclick =insRow（）/>< / td> < / TR> < / table>

I'm trying to add/delete table rows following this example and this example.

Here's my code:

HTML Form

<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";
}

Now, as you can see, In my table I have text fields and buttons. What I want:

1. Just to repeat the structure of the row. I can't do it right now since innerHTM just takes texts. How can I insert a textfield or label?

2. The ids of the textfields should also be different since I'll retrieve the values later to put it in a database.

3. I want to put a function to increment the number of POIs as well

Can anyone help me out please?

解决方案

You could just clone the first row that has the inputs, then get the nested inputs and update their ID to add the row number (and do the same with the first cell).

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 );
}

Demo below

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


function insRow() {
  console.log('hi');
  var x = document.getElementById('POITable');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;

  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';
  x.appendChild(new_row);
}

<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" /></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>

这篇关于使用JavaScript动态添加/删除表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！