使用JavaScript在表格中生成行 [英] Generate rows in a table using javascript
问题描述
我尝试使用javascript在表格中插入新行，当我点击一个按钮时。这是我正在使用的表。
< table id =POITablestyle =width：120％; border：4px solid #ddd;>
< tr>
< td style =width：10％;> Hito< / td>
< td style =width：55％;>描述< / td>
< td style =width：20％;> Tiempo< / td>
< td style =width：15％;> Accion< / td>
< / tr>
< tr>
< td> 1< / td>
< td>< input type =textid =latboxname =latbox []style =width：100％;/>< / td>
< td>< select name =lngbox []id =lngboxonchange = suma（this.form）>
< option value =0> Seleccione tiempo< / option>
< option value =7> 1 Semana< / option>
< option value =14> 2 Semanas< / option>
< option value =30> 1 Mes< / option>
< / select>
< / td>
< td>< input type =buttonid =addmorePOIbuttonvalue =+onclick =insRow（this）style =height：25px; width：25px/ >< / TD>
< / tr>
< tr>
< td> 2< / td>
< td>< input type =textid =latboxname =latbox []style =width：100％;/>< / td>
< td>< select name =lngbox []id =lngboxonchange = suma（this.form）>
< option value =0> Seleccione tiempo< / option>
< option value =7> 1 Semana< / option>
< option value =14> 2 Semanas< / option>
< option value =30> 1 Mes< / option>
< / select>< / td>
< td>< input type =buttonid =addmorePOIbuttonvalue =+onclick =insRow（this）style =height：25px; width：25px/>
< input type =buttonid =delPOIbuttonvalue = - onclick =deleteRow（this）style =height：25px; width：25px/>< / td>
< / tr>
当我点击调用一个javascript函数来创建一个新行，并在点击该按钮的行之前插入。
这是脚本
$ p
$ b $ $ $ $ $ $ $ $ $ $ $ $ $ X =的document.getElementById（ 'POITable'）;
var i = row.parentNode.parentNode.rowIndex;
var new_row = x.rows [2] .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（'select'）[0];
inp2.id + = len;
inp2.value ='';
// alert（i）;
//x.appendChild（new_row）;
x.insertBefore（new_row，x.childNodes [i]）;
}
< / SCRIPT>
在变量i中，我得到了要插入的行的索引之前的新排。
当索引是由JavaScript代码（i> 2）生成的新行时，我没有任何问题，但是当我尝试使用引用第1行或第2行的索引（那些是静态的，在HTML），代码将新行放在所有行之前，而不是放在它们之间。
我认为问题在于javascript无法移动第二个索引。
有人知道如何将第二行移动一个空格，那么？
谢谢。
你的代码之前的行被添加到tbody之外insertBefore与第二个参数是不正确的，这是行号。它应该是下面的代码中正确的行元素。
函数insRow（row）{
var x = document.getElementById（'POITable'）。getElementsByTagName（'tbody ）[0];
var i = row.parentNode.parentNode.rowIndex;
var new_row = x.rows [2] .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（'select'）[0];
inp2.id + = len;
inp2.value ='';
// alert（i）;
//x.appendChild（new_row）;
console.log（i）;
x.insertBefore（new_row，row.parentNode.parentNode）;
}
I'm trying to use javascript to insert new rows in a table when I click a button .This is the table that I'm using.
<table id="POITable" style="width: 120%; border: 4px solid #ddd;">
<tr>
<td style="width:10%;">Hito</td>
<td style="width:55%;">Descripcion</td>
<td style="width:20%;">Tiempo</td>
<td style="width:15%;">Accion</td>
</tr>
<tr>
<td>1</td>
<td ><input type="text" id="latbox" name="latbox[]" style="width:100%;"/></td>
<td><select name="lngbox[]" id="lngbox" onchange=suma(this.form)>
<option value="0">Seleccione tiempo</option>
<option value="7">1 Semana</option>
<option value="14">2 Semanas</option>
<option value="30">1 Mes</option>
</select>
</td>
<td><input type="button" id="addmorePOIbutton" value="+" onclick="insRow(this)" style="height:25px; width:25px"/></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" id="latbox" name="latbox[]" style="width:100%;"/></td>
<td><select name="lngbox[]" id="lngbox" onchange=suma(this.form)>
<option value="0">Seleccione tiempo</option>
<option value="7">1 Semana</option>
<option value="14">2 Semanas</option>
<option value="30">1 Mes</option>
</select></td>
<td><input type="button" id="addmorePOIbutton" value="+" onclick="insRow(this)" style="height:25px; width:25px"/>
<input type="button" id="delPOIbutton" value="-" onclick="deleteRow(this)" style="height:25px; width:25px"/></td>
</tr>
When I click on "" call to a javascript function that create a new row and insert before the row that has the button that I click.
This is the script
function insRow(row)
{
var x=document.getElementById('POITable');
var i=row.parentNode.parentNode.rowIndex;
var new_row = x.rows[2].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('select')[0];
inp2.id += len;
inp2.value = '';
//alert(i);
//x.appendChild( new_row );
x.insertBefore( new_row, x.childNodes[i]);
}
</SCRIPT>
In the variable "i" I get the index of the row in which I'm going to insert the new row before. I have no problem when the index it's a new row generated by the javascript code(i>2) but when I try with a index that make references to the row 1 or 2 (The ones that are static, created in the html), the code put the new row before all the rows and not between them. I think that the problem is that the javascript can not move the second index.
Someone know how to move the second row one space to put other row before that?
Thanks.
You have made some mistakes in your code earlier row were added outside tbody also insertBefore was incorrect with 2nd argument being i which was row number. It should be the row element which is correct in below code.
function insRow(row){
var x=document.getElementById('POITable').getElementsByTagName('tbody')[0];
var i=row.parentNode.parentNode.rowIndex;
var new_row = x.rows[2].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('select')[0];
inp2.id += len;
inp2.value = '';
//alert(i);
//x.appendChild( new_row );
console.log(i);
x.insertBefore( new_row, row.parentNode.parentNode);
}
这篇关于使用JavaScript在表格中生成行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
