Javascript 添加表格行 [英] Javascript Add Table Row

问题描述

我不知道如何在需要的地方添加一行.

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 添加表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！