Javascript Add Table Row

Question

I\'m not sure how to add a row where I want it.

Answer 1

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.

Answer 2

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>