Javascript 添加表格行

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 方法。

当您不需要链接或 anchor 时，请不要使用 A 元素，请使用按钮或带样式的 span 等元素。

您不能将 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>

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