1

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

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

我只是在那里，因为我不知道该怎么做。

4

2 回答 2

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>

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

于 2012-12-14T01:59:55.637 回答
0

好的，所以要在 URL1 之后向表中添加另一行，给前面的行 URL1 一个id属性，然后附加到 innerHTML。我将 JS 设置为检索当前的 URL 编号，从 1 开始，这样每次单击按钮时，它都会附加一个 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>
于 2012-12-13T23:28:22.667 回答