我不确定如何在我想要的地方添加一行。
<script language="javascript">
var i = 1;
function changeIt()
{
i++;
my_div.innerHTML = my_div.innerHTML +"<tr><td valign='middle'><strong>URL "+ i+":</strong></td><td><input name='url'+ i type='text' size='40' /></td></tr>"
}
</script>
<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
<table width="300px">
<tr>
<td valign="middle"><strong>Name:</strong></td>
<td><input name="name" type="text" size="40" /></td>
</tr>
<tr>
<td valign="middle"><strong>Password:</strong></td>
<td><input name="password" type="text" size="40" /></td>
</tr>
<tr>
<td valign="middle"><strong>URL:</strong></td>
<td><input name="url" type="text" size="40" /><a href="" onClick="changeIt();return false;">+</a></td>
</tr>
<tr id="my_div"></tr>
<tr>
<td valign="middle"><strong>ETC:</strong></td>
<td><input name="etc" type="text" size="40" /></td>
</tr>
以下是我希望显示行的位置:
<tr id="my_div"></tr>
目前,它会在一行中生成新行。我不希望这样。我只想要一个不连续的新行。
当我点击+我希望它产生:
<tr>
<td valign="middle"><strong>URL 2:</strong></td>
<td><input name="url2" type="text" size="40" /></td>
</tr>
我不希望这样:
<tr id="my_div"></tr>
我就是那样,因为我不知道该怎么做。
答案 0 :(得分:3)
不要使用innerHTML来修改表,它会在大多数IE版本中引发错误。使用DOM方法。
当您不想要链接或锚点时,请不要使用A元素,使用类似按钮或样式范围的元素。
您不能将TR元素添加为DIV元素的子元素,它无效。您必须将其添加为表节元素(thead,tbody或tfoot)的子节点。在某些情况下,您可以向表元素添加行,但某些浏览器也不喜欢这样。
所以要创建新行,请使用:
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
// Much better to add a class and do this stuff with CSS
td.style.valign = 'middle';
var span = document.createElement('span');
span.style.fontWeight = 'bold';
span.appendChild(docment.createTextNode('URL ' + i);
td = tr.appendChild(document.createElement('td'));
var input = td.appendChild(document.createElement('input'));
input.name = 'url' + i;
input.type = 'text';
input.size = '40'
现在将TR附加到某处的表格部分。
document.getElementById('myTable').tBodies[0].appendChild(tr);
整个事情看起来像:
<script>
var i = 1;
function changeIt() {
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
td.style.valign = 'middle';
var span = td.appendChild(document.createElement('span'));
span.style.fontWeight = 'bold';
span.appendChild(document.createTextNode('URL ' + i));
td = tr.appendChild(document.createElement('td'));
var input = td.appendChild(document.createElement('input'));
input.name = 'url' + ++i;
input.type = 'text';
input.size = '40'
document.getElementById('myTable').tBodies[0].appendChild(tr);
}
</script>
<form>
<table width="300px">
<tr>
<td valign="middle"><strong>Name:</strong></td>
<td><input name="name" type="text" size="40" /></td>
</tr>
<tr>
<td valign="middle"><strong>Password:</strong></td>
<td><input name="password" type="text" size="40" /></td>
</tr>
<tr>
<td valign="middle"><strong>URL:</strong></td>
<td><input name="url" type="text" size="40">
<input type="button" onclick="changeIt();" value="+"></td>
</tr>
<tr id="my_div"></tr>
<tr>
<td valign="middle"><strong>ETC:</strong></td>
<td><input name="etc" type="text" size="40" /></td>
</tr>
</table>
</form>
<table id="myTable">
<tbody></tbody>
</table>
您可以构建要添加到底部表中的行并将其隐藏,然后只需克隆它并修改需要它的位。
答案 1 :(得分:0)
好的,所以要在URL1之后向表中添加另一行,先给出行,URL1,id
属性然后附加到innerHTML。我将JS设置为从1开始重新检索当前的URL编号,这样每次单击该按钮时,它都会附加一个URL行。
我还更新了您的name
属性以包含''
刻度
<script language="javascript">
var i = 1;
function changeIt(){
var myCurrentTable = document.getElementById("myTable");
var txt = myCurrentTable.innerHTML;
i++;
txt = txt.replace('<tr id="etc_row">', '</tr><tr id="url_row_' + i + '"><td valign="middle"><strong>URL '+ i+':</strong></td><td><input name="url' + i + '" type="text" size="40" /></td><tr id="etc_row">');
myCurrentTable.innerHTML = txt;
}
</script>
<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
<table id="myTable" width="300px">
<tr id="name_row">
<td valign="middle"><strong>Name:</strong></td>
<td><input name="name" type="text" size="40" /></td>
</tr>
<tr id="pw_row">
<td valign="middle"><strong>Password:</strong></td>
<td><input name="password" type="text" size="40" /></td>
</tr>
<tr id="url_row_1" >
<td valign="middle"><strong>URL:</strong></td>
<td><input name="url" type="text" size="40" /><a href="#" onClick="javascript:changeIt();">+</a></td>
</tr>
<tr id="etc_row">
<td valign="middle"><strong>ETC:</strong></td>
<td><input name="etc" type="text" size="40" /></td>
</tr>
</table>