Hey! New to javascript, but it's seemingly one of the most important tools at a webmaster's disposal.
So I learned the basics, and right now I'm trying to make a dynamic form that we can add rows on as more items are needed in the list.
I borrowed a form from some random site and tweaked it to my specifications *almost* and I was wondering if the gurus on this site could guide me in the right direction?
Here's the script:
Code:
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
// checkbox
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
// row number
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
// quantity
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
// SKU
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
cell4.appendChild(element3);
// serial number
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
cell5.appendChild(element4);
// unique ID
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
cell6.appendChild(element5);
// cost
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
cell7.appendChild(element6);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
Basically I am using Twitter Bootstrap, and I am trying to apply a class of "span3" to the qty cells. I imagine there is other formatting I would want to do, but if we can figure that out, we're sailing! I have tried a few different ways which seemed obvious to me but I'm only a level 1 JS'r.
edit! WOW I figured it out. 2 googles later.
element2.className = "span3";
now it works! yay! I am now level 2 javascripter!
Last edited by rvialoux; 12-04-2012 at 09:39 PM..
Reason: solved!
So, given the above, you might want to try something like:
Code:
<script type="text/javascript">
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
// checkbox
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chk" + rowCount;
cell1.appendChild(element1);
// row number
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount; // YOU MISCOUNTED!
// With the <th> row, when you call this function first time, rowCount will be 2!
// quantity
var cell3 = row.insertCell(2);
cell3.className = "span3";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "qty" + rowCount;
cell3.appendChild(element2);
... and so on ...
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
(And shouldn't you be consistent? Use <TR> or <tr> but not mix them? And <TR> and <TD> and <INPUT> are only legal in HTML, not in XHTML.)
Great observation, if you see the ones in lowercase, that was me, the uppercase ones were from this code template. the table was a TABLE before, slowly I'm going to change them all to lowercase, I didn't know it was bad for XHTML, I just don't like shouting in my code !
I did actually add the class to the actual HTML table there, but I added the span class to the input, adding it to the td doesn't really work, the input box is the entire width of the cell, and all subsequent rows have the right input box width.
I was trying to figure out how to get around the header row consuming the 2nd position, you saved me a lot of headscratching. It was my addition, it works with the thing, but killed the number incrementing until you came along.
Now, it still makes the text entry on the cells being added as wide as the table will allow, by only putting the class on the cell.
And to apply that format, the outside div, the span before the input, and it should be awesome.
So I think I got the span added properly, just trying to figure out how to add the outside divs.
Code:
// cost
var cell7 = row.insertCell(6);
var costdiv = document.createElement("div");
costdiv.className = "input-prepend input-append";
costdiv.appendChild(costcell);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "cost" + rowCount;
var spanelement = document.createElement("span");
spanelement.className = "add-on";
spanelement.innerHTML = "$";
costcell.appendChild(spanelement);
costcell.appendChild(element6);
cell7.appendChild(costdiv);
That's my best crack at it. Still tinkering. I'm going to adjust my naming scheme once its working better, but does that make sense though? Doesn't work but the dollar sign used to show up before I tried adding the div.
Note: If you simply use appendChild(), the objects get added to the parent in the order you do the appends.
You really only need to use insertBefore( ) when you want to *NOT* append elements in sequential order.
So appendChild() is the right thing to use here, but be sure to append to the *RIGHT* element.
Hm, if I change costcell to costdiv on the last lines there, then costcell isn't being defined anywhere else..
Code:
// cost
var cell7 = row.insertCell(6);
var costdiv = document.createElement("div");
costdiv.className = "input-prepend input-append";
costdiv.appendChild(costcell);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "cost" + rowCount;
var spanelement = document.createElement("span");
spanelement.className = "add-on";
spanelement.innerHTML = "$";
costdiv.appendChild(spanelement);
costdiv.appendChild(element6);
cell7.appendChild(costdiv);
I was thinking, costdiv.appendChild(costcell); will put costcell within the div, and then don't I append the span and the element6 to costcell? (which doesn't work so clearly not but I'm just trying to wrap my head around it.)
It's hard for me to comprehend the fact that I can comprehend this now.
Before you post, read our: 
