Question

我不确定如何在我想要的地方添加一行。

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

我就是那样，因为我不知道该怎么做。

Answer 1

不要使用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>

您可以构建要添加到底部表中的行并将其隐藏，然后只需克隆它并修改需要它的位。

Answer 2

好的，所以要在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>

Javascript添加表行

2 个答案: