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>

I don't want that within:

<tr id="my_div"></tr>

I just have that there because I don't know what to do.

Answers:

Answer

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.

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

Don't use innerHTML to modify tables, it will throw an error in most versions of IE. Use DOM methods.

Don't use an A element when you don't want an link or anchor, use an element like a button or styled span.

You can't add a TR element as a child of a DIV element, it's invalid. You must add it as a child of a table section element (thead, tbody or tfoot). In some cases you can add rows to a table element but some browsers don't like that either.

So to create the new row, use:

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'

now append the TR to a table section somewhere.

document.getElementById('myTable').tBodies[0].appendChild(tr);

The whole thing looks like:

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

You could build the row to add in the bottom table and have it hidden, then just clone it and modify the bits that need it.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.