Adding a row dynamically with JS/CSS?

@snarfblatApr 22.2008

I’m trying to build a prototype “search” tool that lets you create “rules” kinda like how you do with message filters in Thunderbird.

Basically, on the left I have a drop-down containing a table’s column names. Then I have three radio buttons (“Contains”, “Does not Contain”, “Equals”). Lastly, I have a text input field.

So, they might choose “last_name” “contains” “john”.

Now, I want to be able to click an “add row” link and have another duplicate set of fields appear below it. And so on.

How do I do that? I’m using ColdFusion as my server-side language, but that’s not really important here. Just in case anybody cares. ?

Thanks!

Rob

to post a comment

JavaScript

9 Comments(s) _↴

@mrhooApr 22.2008 — #You could have an empty row as the last element in a tbody that you want to add rows to dynamically.

Without content it is invisible (css), but you can clone it, add content to the clone's cells,

and use insertBefore to insert the cloned row just before the row that was cloned.

@snarfblatauthorApr 22.2008 — #Thanks! That sounds like a good way to go, but I'm not familiar with how to do that in JS. Are there any code examples I can see?

Here's what I've done so far, it partly works...

I have a DIV around the table (the whole table since I've never been able to affect portions of tables -- is that what tbody is for??)...

I have an empty div below it.

I grab the innerHTML out of the first div and then set the innerHTML of the empty div to the contents of the first one.

BUT, that doesn't give me the ability to recursively add more...

Rob

@jasonahouleApr 22.2008 — #Here is something I just put together really quick.

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 function addRow() {
 table = document.getElementById("myTable");
 alert(table);
 tr = document.createElement("tr");
 td = document.createElement("td");
 text = document.createTextNode("This is the second row");
 td.appendChild(text);
 tr.appendChild(td);
 table.appendChild(tr);
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;table&gt;
 &lt;tbody id="myTable"&gt;
 &lt;tr&gt;
 &lt;td&gt;This is the first row&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;a href="javascript:addRow()"&gt;Add Row&lt;/a&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@snarfblatauthorApr 22.2008 — #Thanks! That works great.

Only thing I have to figure out now is how to get the createTextNode line to let me insert HTML instead of just text...

Rob

@toicontienApr 22.2008 — #The document.createTextNode function doesn't allow you to insert HTML. You need to either create each HTML element and text element you want using document.createElement and document.createTextNode, or use the innerHTML property of the TD tags to insert HTML as a string.

@snarfblatauthorApr 23.2008 — #Okay, cool... thanks to everybody's help, it's doing (mostly) what I want. Here's what I have:

<i>
 </i>td = document.createElement("td");
 td.innerHTML = document.getElementById('mySelect').innerHTML;
 tr.appendChild(td);

I do this for each div that is wrapped around a form element... could be a select box, a text field, etc.

The problem I'm having now is that when I enter values into the form and click Submit, it's only submitting ONE of the form rows, i.e. the last one. What I was expecting was list of values, like form.keyword might be "john,fred,sam" if there were three keyword fields entered with those values.

What do I have to do to ensure that each added row becomes a valid form field?

Thanks!

Rob

@jasonahouleApr 25.2008 — #Make sure your form elements don't all have the same name.

@KorApr 25.2008 — #Here is something I just put together really quick.

<i>
 </i>function addRow() {
 table = document.getElementById("myTable");
 ...
 table.appendChild(tr);
 }

[/QUOTE]
Nope. A TABLE has a container element called TBODY. It is not required in HTML, but in javascript it is (and even if you don't write HTML the TBODY, javascript considers its presence anyway), so that any row must be appended to the TBODY element. Should have been:

<i>
 </i>...
 table = document.getElementById("myTable");
 [COLOR="Blue"]tbody=table.getElementsByTagName('tbody')[0];[/COLOR]
 ...
 [COLOR="Blue"]tbody.appendChild(tr);[/COLOR]
 }

@KorApr 25.2008 — #Okay, cool... thanks to everybody's help, it's doing (mostly) what I want. Here's what I have:

<i>
 </i>td = document.createElement("td");
 td.innerHTML = document.getElementById('mySelect').innerHTML;
 tr.appendChild(td);

[/QUOTE]
Nope. innerHTML is not a standard DOM method, thus it will not insert correctly the elements into the DOM tree. Either you use the same createElement(), appendChilds and so on, or, if you want to duplicate/copy a row you may use cloneNode(true) method.

Also in #JavaScript _↴

Site menu?Can't calculate a negative value???[IE] Page Loads 60% of the Time.

Success!

Help @snarfblat spread the word by sharing this article on Twitter...

Tweet This

Adding a row dynamically with JS/CSS?

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Adding a row dynamically with JS/CSS?

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴