2 Replies - 708 Views - Last Post: 24 September 2012 - 10:11 AM

#1 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Dynamically add row to table

Posted 24 September 2012 - 09:43 AM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Dynamically add row to table

#2 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: Dynamically add row to table

Posted 24 September 2012 - 09:59 AM

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.
Was This Post Helpful? 1
  • +
  • -

#3 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: Dynamically add row to table

Posted 24 September 2012 - 10:11 AM

Wicked, that seemed to do the trick.

Thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1