1

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.

Improve this question
7
  • I suggest you take time to look at KnockoutJS or AngularJS so that you don't have to fiddle with HTML manually. The frameworks will do the dirty job for you. Commented Dec 13, 2012 at 23:37
  • Your last tr element has a closing </tr> but there's no opening <tr> before the td. Also, it looks like you're replicating just the URL input, are you just wanting this element replicated (both the td elements), or are you trying to create a new entry for all the inputs and td elements (and increment their text numerically)? Commented Dec 13, 2012 at 23:37
  • "my_div" is not a good ID for a TR element, is it? Commented Dec 13, 2012 at 23:37
  • I updated what I wanted. Any names I have are testing names; they aren't final. Commented Dec 13, 2012 at 23:51
  • So you want to append a row to the existing table? Commented Dec 14, 2012 at 0:00

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

How do I make it so the rows are added in between url and etc?
0

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>
Improve this answer

5 Comments

I want the <tr></tr>. Thanks for the name suggestion.
But you already have one, which is why youre getting a row within a row. "my_div" is a <tr>, so you just need to populate whats inside it.
I think I understand now. Try what I have posted.
The 2nd url row appears next to the 1st url row instead of under.
OK I have fixed it so that it replaces HTML for the entire table by finding the row to insert it above. Heres the fiddle... jsfiddle.net/afPrc/51/embedded/result

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.