问题描述
我不知道如何在需要的地方添加一行.
I'm not sure how to add a row where I want it.
<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>
以下是我希望行出现的位置:
The following is where I want the rows to appear:
<tr id="my_div"></tr>
目前在一行中产生新行.我不想要那个.我只想要一个新行,而不是一行.
Currently that produces new rows within a row. I don't want that. I only want a new row not in a row.
当我点击 + 我希望它产生:
When I click the + I want it to produce:
<tr>
<td valign="middle"><strong>URL 2:</strong></td>
<td><input name="url2" type="text" size="40" /></td>
</tr>
我不想要那个:
<tr id="my_div"></tr>
我只是在那里,因为我不知道该怎么做.
I just have that there because I don't know what to do.
推荐答案
好的,所以要在 URL1 之后添加另一行到表中,给之前的行 URL1,一个 id
属性然后附加到内部HTML.我将 JS 设置为检索当前 URL 编号,从 1 开始,这样每次单击按钮时,它都会附加一个 URL 行.
Ok, so to add another row to the table after URL1, give the row before, URL1, an id
attribute then append to the innerHTML. I set the JS to retrive the current URL number, starting with 1, so that each time you click the button, it appends a URL row.
我还更新了您的 name
属性以包含 ''
刻度
I also updated your name
attribute to include the ''
ticks
<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>
这篇关于Javascript 添加表格行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!