[nick2price]

Hi guys, cant get something working. I have a simple table like so

<table class="table1">
  <tr>
    <td class="title">1:</td>
    <td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
    <td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
    <td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
  </tr>

  <tr>
    <td class="title">2:</td>
    <td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
    <td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
    <td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
  </tr>
</table>

I also have a button which calls a javascript event. What I want to do is when the button is clicked, for a new tr to be added, along with the fields. So far, I have this in my table

<INPUT type="button" value="Add Row" onclick="addTableRow()" />

And the js code

function addTableRow(){
var newcontent = stdContent.replace(/xx/g, newno);

var stdContent = "<td class='title'>xx:</td>" +
    "<td><input type='text' placeholder='Giving' class='selector' name='givingxx' autocomplete='off'/></td>" +
    "<td><input type='text' placeholder='Getting' class='selector' name='gettingxx' autocomplete='off'/></td>" +
    "<td><input type='text' name='popupdatexx' id='popupdatexx' class='popupdate' value='When' /></td>";

var newrow = document.createElement('tr');
// give your table an id..
var theTable = document.getElementByClass('table1');
var newno;
newno = 3;  // increment at some point
theTable.appendChild(newrow);
var newcontent = stdContent.replace('xx', newno);
newrow.innerHTML = newcontent;

}

This doesnt seem to work though, so not to sure what I am doing wrong.

[Atli]

Hey.

There is no document.getElementByClass function. Classes, by definition, are not unique, so a function to get a single element by it's class does not make sense. There is a document.getElementsByClassName function (IE9+) that will return a list of elements with that class.

If you are trying to id an element based on a class name, perhaps you should be using an ID instead?


Also, line #2 of the code is premature. The stdContent variable doesn't exist yet, so it would probably cause an error at that point.

[nick2price]

Wicked, that seemed to do the trick.

Thanks