...

View Full Version : Resolved adding a class to an object.



rvialoux
12-04-2012, 09:26 PM
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:


<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>

and the html:


<!-- the buttons! -->
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /><br /><br />

<table id="dataTable" width="350px" border="1" class="table table-hover">
<TR><TH></TH><TH></TH><TH>QTY</TH><TH>SKU</TH><TH>Serial Number</TH><TH>Unique ID</TH><TH>Cost (each)</TH></TR>
<tr>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD> <TD> <INPUT type="text" /> </TD> <TD> <INPUT type="text" /> </TD> <TD> <INPUT type="text" /> </TD> <TD> <INPUT type="text" /> </TD>
</tr>
</table>

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!

Old Pedant
12-04-2012, 09:41 PM
Ummm...but shouldn't your "QTY" cells have <input>s that have a NAME???

And shouldn't they have had the class you wanted even in the original table?

THat is:


<table id="dataTable" width="350px" border="1" class="table table-hover">
<TR>
<TH></TH>
<TH></TH>
<TH>QTY</TH>
<TH>SKU</TH>
<TH>Serial Number</TH>
<TH>Unique ID</TH>
<TH>Cost (each)</TH>
</TR>
<tr>
<TD><INPUT type="checkbox" name="chk1"/></TD>
<TD> 1 </TD>
<TD class="span3"><INPUT name="qty1" type="text" /> </TD>
<TD><INPUT name="sku1" type="text" /> </TD>
<TD><INPUT name="sn1" type="text" /> </TD>
<TD><INPUT name="unique1" type="text" /> </TD>
<TD><INPUT name="cost1" type="text" /> </TD>
</tr>
</table>

(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.)

Old Pedant
12-04-2012, 09:49 PM
And language="JavaScript" is long long obsolete.

So, given the above, you might want to try something like:


<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 ...

rvialoux
12-04-2012, 10:08 PM
Ummm...but shouldn't your "QTY" cells have <input>s that have a NAME???

And shouldn't they have had the class you wanted even in the original table?

THat is:


<table id="dataTable" width="350px" border="1" class="table table-hover">
<TR>
<TH></TH>
<TH></TH>
<TH>QTY</TH>
<TH>SKU</TH>
<TH>Serial Number</TH>
<TH>Unique ID</TH>
<TH>Cost (each)</TH>
</TR>
<tr>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD class="span3"><INPUT name="qty1" type="text" /> </TD>
<TD><INPUT name="sku1" type="text" /> </TD>
<TD><INPUT name="sn1" type="text" /> </TD>
<TD><INPUT name="unique1" type="text" /> </TD>
<TD><INPUT name="cost1" type="text" /> </TD>
</tr>
</table>

(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 ! :D

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.

rvialoux
12-04-2012, 10:22 PM
You're awesome!

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.

If I do..


// quantity
var cell3 = row.insertCell(2);
cell3.className = "span3";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "qty" + rowCount;
element2.className = "span3";
cell3.appendChild(element2);

Then the text entry boxes are small.

Old Pedant
12-04-2012, 11:08 PM
So do as you said you did and use element2.className = "span3"; instead.

rvialoux
12-04-2012, 11:23 PM
So do as you said you did and use element2.className = "span3"; instead.

Yup, that seems to look pretty good.

This is coming along quite well. My first time ever modifying javascript and it's got some form to it!

Can I ask another?

So looking at things.. I figured there must be a way I can add some divs and things somehow.

So imagine in HTML it looks like this:


<div class="input-prepend input-append">
<span class="add-on">$</span>
<input class="span5" id="inputinvoicecost" type="text">
</div>

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.


// 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.

Old Pedant
12-04-2012, 11:34 PM
No.

As written, that code would produce

<td>
<span class="ad-on">$</span>
<input type="text" name="cost2"/>
<div class="input-prepend input-append">
</dIv>
</td>

You incorrectly appended the span and the input to the <td> ("costcell") and *NOT* to the <div>.

You should have ended that code with:


costdiv.appendChild(spanelement);
costdiv.appendChild(element6);
cell7.appendChild(costdiv);


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.

rvialoux
12-04-2012, 11:51 PM
No.

As written, that code would produce

<td>
<span class="ad-on">$</span>
<input type="text" name="cost2"/>
<div class="input-prepend input-append">
</dIv>
</td>

You incorrectly appended the span and the input to the <td> ("costcell") and *NOT* to the <div>.

You should have ended that code with:


costdiv.appendChild(spanelement);
costdiv.appendChild(element6);
cell7.appendChild(costdiv);


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..


// 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.

Old Pedant
12-05-2012, 12:01 AM
Ummm...costcell wasn't being defined anywhere in your original code!

All along it should have been cell7 as your code was written.

So now your new code looks right, to me, *EXCEPT* you need to KILL the line


costdiv.appendChild(costcell);




I was thinking, costdiv.appendChild(costcell); will put costcell within the div,

It would. If you had any variable named costcell that referred to any HTML element.

But you don't HAVE anything named costcell so are you expecting it to magically appear? HINT: It won't.

rvialoux
12-05-2012, 05:50 PM
Ummm...costcell wasn't being defined anywhere in your original code!

All along it should have been cell7 as your code was written.

So now your new code looks right, to me, *EXCEPT* you need to KILL the line


costdiv.appendChild(costcell);



It would. If you had any variable named costcell that referred to any HTML element.

But you don't HAVE anything named costcell so are you expecting it to magically appear? HINT: It won't.

You. Are. Awesome. Yup, killing the costcell line made it work.

Here's my before and after shot: http://i.imgur.com/afvBE.png

Quite pleased! Now I can apply this same technique to other things!

Thanks and I'll let you know if I get stuck again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum