Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    adding a class to an object.

    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>
    and the html:

    Code:
    			<!-- 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!
    Last edited by rvialoux; 12-04-2012 at 09:39 PM. Reason: solved!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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:
    Code:
    <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.)
    Last edited by Old Pedant; 12-04-2012 at 09:47 PM.
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    And language="JavaScript" is long long obsolete.

    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.

  • Users who have thanked Old Pedant for this post:

    rvialoux (12-04-2012)

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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:
    Code:
    <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 !

    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.

  • #5
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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..

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

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    So do as you said you did and use element2.className = "span3"; instead.
    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.

  • #7
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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:

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

    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.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    No.

    As written, that code would produce
    Code:
    <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:
    Code:
    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.
    Last edited by Old Pedant; 12-04-2012 at 11:39 PM.
    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.

  • #9
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    No.

    As written, that code would produce
    Code:
    <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:
    Code:
    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..

    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.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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
    Code:
    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.
    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.

  • #11
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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
    Code:
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •