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

    dynamically add multiple rows to table or input that data into a new table

    Hey guys! Totally new to javascript, have another question. You just nailed it last time so I am here for round two:

    This is sort of like, wanting to add an entirely other function. The code below works great but the mini "Add Items" buttons are just there for show.

    How can I make it so when they hit the mini "Add Items" button, it creates a number of rows under that row that contain new input boxes based on the quantity, for input of entirely different data about each item.

    Making a new table underneath all of this to contain this data is definitely a possibility and it would probably make things easier to read. I was thinking about using jQuery to collapse these new rows down so that there was just a + / - button to collapse them, not overly necessary though.

    Thanks in advance!

    The HTML:

    Code:
    <input type="button" value="Delete Item" onclick="deleteRow('dataTable')" class="btn btn-inverse pull-right"/><input type="button" value="Add New Item" onclick="addRow('dataTable')" class="btn btn-info pull-right"/>
    
    <table id="dataTable" width="350px" border="1" class="table table-hover">
    <tr><th></th><th></th><th>QTY</th><th>SKU</th><th>Cost (each)</th></tr>
    <tr>
    <td><input type="checkbox" name="chk"/></td>
    <td> 1 </td>
    <td> <input type="text" name="qty" class="span4"/> </td> <td> <div class="ui-widget"><input type="text" id="skubox"/></div> </td> <td> <div class="input-prepend input-append"><span class="add-on">$</span><input type="text" class="span5"/></div> </td> <td> <button class="btn btn-mini" type="button">Add Items</button> </td>
    </tr>
    </table>
    The Javascript:

    Code:
    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;
    // quantity
    var cell3 = row.insertCell(2);
         cell3.className = "span4";
         var element2 = document.createElement("input");
         element2.type = "text";
         element2.name = "qty" + rowCount;
         element2.className = "span4";
         cell3.appendChild(element2);
    // SKU
    var cell4 = row.insertCell(3);
         var skudiv = document.createElement("div");
         skudiv.id = "skubox";
         var element3 = document.createElement("input");
         element3.type = "text";
         element3.name = "sku" + rowCount;
         skudiv.appendChild(element3);
         cell4.appendChild(skudiv);
    // cost
    var cell5 = row.insertCell(4);
         var costdiv = document.createElement("div");
         costdiv.className = "input-prepend input-append";
         var element4 = document.createElement("input");
         element4.type = "text";
         element4.name = "cost" + rowCount;
         element4.className = "span5";
         var spanelement = document.createElement("span");
         spanelement.className = "add-on";
         spanelement.innerHTML = "$";
         costdiv.appendChild(spanelement);
         costdiv.appendChild(element4);
         cell5.appendChild(costdiv);
    // add items
         var cell6 = row.insertCell(5);
         var element5 = document.createElement("button");
         element5.name = "additembutton" + rowCount;
         element5.className = "btn btn-mini";
         element5.innerHTML = "Add Items"
         cell6.appendChild(element5);
     
    }
     
            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);
                }
            }

  • #2
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hey I'm sort of stuck. It almost works, but there are so many different ways to do what I'm trying to do it's confusing. I look at 10 examples and they're all different.

    Code:
    /* ------------------- ADD ROW ------------------- */
    
    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;
    		// quantity
                var cell3 = row.insertCell(2);
    			cell3.className = "span4";
                var element2 = document.createElement("input");
    			element2.type = "text";
    			element2.name = "qty" + rowCount;
    			element2.className = "span4";
    			cell3.appendChild(element2);
    		// SKU
    			var cell4 = row.insertCell(3);
    			var skudiv = document.createElement("div");
    			skudiv.className = "input-prepend input-append";
                var element3 = document.createElement("input");
                element3.type = "text";
    			element3.name = "sku" + rowCount;
    			var skuspanelement = document.createElement("span");
    			skuspanelement.className = "add-on";
    			skuspanelement.innerHTML = "SKU";
                skudiv.appendChild(skuspanelement);
    			skudiv.appendChild(element3);
    			cell4.appendChild(skudiv);
    		// cost
    			var cell5 = row.insertCell(4);
    			var costdiv = document.createElement("div");
    			costdiv.className = "input-prepend input-append";
                var element4 = document.createElement("input");
                element4.type = "text";
    			element4.name = "cost" + rowCount;
    			element4.className = "span5";
    			var spanelement = document.createElement("span");
    			spanelement.className = "add-on";
    			spanelement.innerHTML = "$";
                costdiv.appendChild(spanelement);
    			costdiv.appendChild(element4);
    			cell5.appendChild(costdiv);
    		// add items
                var cell6 = row.insertCell(5);
                var element5 = document.createElement("button");
    			element5.name = "additembutton" + rowCount;
    			element5.className = "btn btn-mini";
    			element5.onclick = function() { addmultirow('dataTable') };
    			element5.innerHTML = "Add Items";
    			cell6.appendChild(element5);
    		}
    		
    /* ------------------- DELETE ROW ------------------- */
     
            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); }
            }
    
    
    		
    /* ------------------- ADD ROW SN ------------------- */
    		function addRowSN(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;
    		// quantity
                var cell3 = row.insertCell(2);
    			cell3.className = "span4";
                var element2 = document.createElement("input");
    			element2.type = "text";
    			element2.name = "qty" + rowCount;
    			element2.className = "span4";
    			cell3.appendChild(element2);
    		// SN
    			var cell4 = row.insertCell(3);
    			var sndiv = document.createElement("div");
    			sndiv.className = "input-prepend input-append";
                var element3 = document.createElement("input");
                element3.type = "text";
    			element3.name = "sn" + rowCount;
    			element3.className = "span5";
    			var snspanelement = document.createElement("span");
    			snspanelement.className = "add-on";
    			snspanelement.innerHTML = "SN";
                sndiv.appendChild(snspanelement);
    			sndiv.appendChild(element3);
    			cell4.appendChild(sndiv);
    		// UniqueID
    			var cell5 = row.insertCell(4);
    			var costdiv = document.createElement("div");
    			costdiv.className = "input-prepend input-append";
                var element4 = document.createElement("input");
                element4.type = "text";
    			element4.name = "uid" + rowCount;
    			element4.className = "span5";
    			var spanelement = document.createElement("span");
    			spanelement.className = "add-on";
    			spanelement.innerHTML = "ID";
                costdiv.appendChild(spanelement);
    			costdiv.appendChild(element4);
    			cell5.appendChild(costdiv);
    		// delete items
                var cell6 = row.insertCell(5);
                var element5 = document.createElement("button");
    			element5.name = "deleteitem" + rowCount;
    			element5.className = "btn btn-mini btn-inverse";
    			element5.innerHTML = "Delete Item"
    			element5.onclick = function() { deleteRowNCB('dataTable') };
    			cell6.appendChild(element5);
    		}
    /* ------------------- DELETE ROW SN ------------------- */
            function deleteRowSN(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); }
            }
    /* ------------------- DELETE ROW W/O CHECKBOX ------------------- */
                       // this needs a little TLC //
            function deleteRowNCB(tableID) 
    		
    		{
    			var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
    			
    			table.deleteRow(2);
                        rowCount--;
                        i--;
    		}
    		
    		
    /* ------------------- ADD MULTI ROW ------------------- */
    		function addmultirow() {
    			var qtyofrows = document.getElementById("qty");
    			var theqty = qtyofrows.value;
    			for (var i=0; i < theqty; i++)
    				{
    				addRowSN("dataTable");
    				}
    			}
    /* ------------------- ROW COLLAPSER ------------------- */
    		function hiderow() {
    			if( document.getElementById("hidethis").style.display=='none' ){
    			document.getElementById("hidethis").style.display = '';
    			}else{
    			document.getElementById("hidethis").style.display = 'none';
    			}
    			}
    Big blob of the HTML:

    Code:
    <div class="row-fluid">
    	<div class="span12">
    		<div class="span9">
    		<div class="well">
    			<legend>Invoice Items</legend><input type="button" value="Delete Item Type" onclick="deleteRow('dataTable')" class="btn btn-inverse pull-right"/><input type="button" value="Add Item Type" onclick="addRow('dataTable')" class="btn btn-info pull-right"/>
     			<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>Cost (each)</th><th></th></tr>
    			<tr id="hidethis">
    			<td><input type="checkbox" name="chk"/></td>
    			<td> 1 </td>
    			<td> <input type="text" id="qty" class="span4"/> </td> <td> <div class="ui-widget input-prepend input-append"><span class="add-on">SKU</span><input type="text" id="skubox"/></div> </td> <td> <div class="input-prepend input-append"><span class="add-on">$</span><input type="text" class="span5"/></div> </td> <td> <button class="btn btn-mini" type="button" onclick="addmultirow('dataTable')">Add Items</button> </td>
    			</tr>
    			</table>
    			</div><!--/well-->
    		</div><!--/span-->
    	</div><!--/span-->
    </div><!--/row-->
    <div class="row-fluid">
    	<div class="span12">
    		<button onClick="hiderow();">Hide Row</button>
    	</div><!--/span-->
    </div><!--/row-->
    Right now if you input text into the first qty box and hit 'add items' it will create that many rows to put serial numbers onto. That's great, but I want to make those rows attach together somehow, so they are collapsible. The only way I can think of would be to make the tables nest together. So if we were to apply some jQuery to re-organise the table, they would move as a set. Figuring how how to change the function to create a table containing rows right now instead of just adding the rows, it's confusing.

    Help greatly appreciated.

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    When you insert row(s) you can give them a className. You can style this class with css and use JS or jQuery to hide or show them.
    Code:
    var row = table.insertRow(rowCount);
    row.className = "expando";
    
    $('.expando').show(); // jQuery to show all rows with this class (and .hide())
    You could even use CSS(3) to format, for example, every third-row of the table.

    Personally (FWIW) I would probably have added an initially-hidden row and cloned it each time to create new rows, using a documentFragment - but I'm not suggesting you re-start!
    Last edited by AndrewGSW; 12-12-2012 at 09:15 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    When you insert row(s) you can give them a className. You can style this class with css and use JS or jQuery to hide or show them.
    Code:
    var row = table.insertRow(rowCount);
    row.className = "expando";
    
    $('.expando').show(); // jQuery to show all rows with this class (and .hide())
    You could even use CSS(3) to format, for example, every third-row of the table.

    Personally (FWIW) I would probably have added an initially-hidden row and cloned it each time to create new rows, using a documentFragment - but I'm not suggesting you re-start!
    Never too late for anything at this point, as long as it's progress. This is the first javascript thing I've ever written, and now I can actually create and do things, but it's a learning process. If I were to back-pedal a little bit and find a new path, I can only benefit from learning at this point.

    So I think I'm off to a good start with the subtable thing. I actually got it to create the nested table all by myself. It's a bit shoddy but it's there.

    Code:
    /* ------------------- CREATE TABLE ------------------- */
    
    
    		function createTable(tableID) {
    			var table = document.getElementById(tableID);
    			var rowCount = table.rows.length;
    			var row = table.insertRow(rowCount);
    			var cell1 = row.insertCell(0);
    		// new table!
                var cell2 = row.insertCell(1);
                var newtable = document.createElement("table");
    			newtable.name = "tableb" + rowCount;
                cell2.appendChild(newtable);
    			cell2.colSpan = "4";
    			var newrow = document.createElement("tr");
    			var newtd = document.createElement("td");
    			var newtd2 = document.createElement("td");
    			newtable.appendChild(newrow);
    			newtds = newtd + newtd2;
    			newrow.appendChild(newtds);
    			newtd.innerHTML = "asgggas";
    			newtd2.innerHTML = "gsdagff";
    		// delete items
                var cell3 = row.insertCell(2);
                var element5 = document.createElement("button");
    			element5.name = "deleteitem" + rowCount;
    			element5.className = "btn btn-mini btn-inverse";
    			element5.innerHTML = "Delete Item"
    			element5.onclick = function() { deleteRowNCB('dataTable') };
    			cell3.appendChild(element5);
    			
    			}
    I'm trying to figure out how to create two <td>'s next to each other in the new table. newtds = newtd + newtd2; doesn't work and newrow.appendChild(newtd + newtd2); doesn't work. Looking around maybe I need nextSibling? That's the most recent rut I'm in lmao.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Probably..
    Code:
    			var newrow = document.createElement("tr");
    			var newtd = document.createElement("td");
    			var newtd2 = document.createElement("td");
                            newrow.appendChild(newtd);
                            newrow.appendChild(newtd2);
    			newtable.appendChild(newrow);
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    rvialoux (12-12-2012)

  • #6
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    Probably..
    Code:
    			var newrow = document.createElement("tr");
    			var newtd = document.createElement("td");
    			var newtd2 = document.createElement("td");
                            newrow.appendChild(newtd);
                            newrow.appendChild(newtd2);
    			newtable.appendChild(newrow);
    OMG thank you so much. I completely forgot we could do that, I think I had done that before. Man, banging my head against the wall over something like that, overthought it a bit. w00t

  • #7
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    man, it's coming along pretty well right now

    my create table function is massive, still growing, adding new cells and everything going perfectly.

    Code:
    /* ------------------- CREATE TABLE ------------------- */
    
    		function createTable(tableID) {
    			var qtyofrows = document.getElementById("qty"); // grab the quantity first
    			var theqty = qtyofrows.value;
    			var table = document.getElementById(tableID);
    			var rowCount = table.rows.length;
    			var row = table.insertRow(rowCount);
    			var cell1 = row.insertCell(0);
    		// new table!
    			var cell2 = row.insertCell(1);
    			var newtable = document.createElement("table");
    			newtable.name = "tableb" + rowCount;
    			cell2.appendChild(newtable);
    			cell2.colSpan = "4";
    			skurow = document.createElement("tr");
    			skurowqtytd = document.createElement("td");
    			skurowskutd = document.createElement("td");
    			skurowcosttd = document.createElement("td");
    			skurowdeltd = document.createElement("td");
    			newtable.appendChild(skurow);
    			skurow.appendChild(skurowqtytd);
    			skurow.appendChild(skurowskutd);
    			skurow.appendChild(skurowcosttd);
    			skurow.appendChild(skurowdeltd);
    		// Qty Cell
    			skurowqtytd.className = "span4";
    			var qtycellelement = document.createElement("input");
    			qtycellelement.type = "text";
    			qtycellelement.name = "qty" + rowCount;
    			qtycellelement.className = "span4";
    			skurowqtytd.appendChild(qtycellelement);
    		// SKU Cell
    			var skurowskudiv = document.createElement("div");
    			skurowskudiv.className = "input-prepend input-append";
    			var skurowskutext = document.createElement("input");
    			skurowskutext.type = "text";
    			skurowskutext.name = "sku" + rowCount;
    			var skurowspanelement = document.createElement("span");
    			skurowspanelement.className = "add-on";
    			skurowspanelement.innerHTML = "SKU";
    			skurowskudiv.appendChild(skurowspanelement);
    			skurowskudiv.appendChild(skurowskutext);
    			skurowskutd.appendChild(skurowskudiv);
    		// Cost Cell
    			var skurowcostdiv = document.createElement("div");
    			skurowcostdiv.className = "input-prepend input-append";
    			var skurowcostinput = document.createElement("input");
    			skurowcostinput.type = "text";
    			skurowcostinput.name = "cost" + rowCount;
    			skurowcostinput.className = "span5";
    			var skurowcostspan = document.createElement("span");
    			skurowcostspan.className = "add-on";
    			skurowcostspan.innerHTML = "$";
    			skurowcostdiv.appendChild(skurowcostspan);
    			skurowcostdiv.appendChild(skurowcostinput);
    			skurowcosttd.appendChild(skurowcostdiv);
    		// Delete Item Type Button
    			var deleteitemtypebutton = document.createElement("button");
    			deleteitemtypebutton.name = "deleteitem" + rowCount;
    			deleteitemtypebutton.className = "btn btn-mini btn-inverse";
    			deleteitemtypebutton.innerHTML = "Delete Item Type"
    			deleteitemtypebutton.onclick = function() { deleteRowNCB('dataTable') };
    			skurowdeltd.appendChild(deleteitemtypebutton);
    			
    			for (var i=0; i < theqty; i++)
    				{
    				var itemrow = document.createElement("tr");
    				var sntd = document.createElement("td");
    				var idtd = document.createElement("td");
    				var deleteitemtd = document.createElement("td");
    				newtable.appendChild(itemrow);
    				itemrow.appendChild(sntd);
    				itemrow.appendChild(idtd);
    				itemrow.appendChild(deleteitemtd);
    			// SN cell
    				var sndiv = document.createElement("div");
    				sndiv.className = "input-prepend input-append";
    				var serialnumbercellinput = document.createElement("input");
    				serialnumbercellinput.type = "text";
    				serialnumbercellinput.name = "sn" + rowCount;
    				serialnumbercellinput.className = "span6";
    				var snspanelement = document.createElement("span");
    				snspanelement.className = "add-on";
    				snspanelement.innerHTML = "SN";
    				sndiv.appendChild(snspanelement);
    				sndiv.appendChild(serialnumbercellinput);
    				sntd.appendChild(sndiv);
    			// UniqueID cell
    				var iddiv = document.createElement("div");
    				iddiv.className = "input-prepend input-append";
    				var element4 = document.createElement("input");
    				element4.type = "text";
    				element4.name = "uid" + rowCount;
    				element4.className = "span6";
    				var spanelement = document.createElement("span");
    				spanelement.className = "add-on";
    				spanelement.innerHTML = "ID";
    				iddiv.appendChild(spanelement);
    				iddiv.appendChild(element4);
    				idtd.appendChild(iddiv);
    			// delete items cell
    				var deleteindividualitembutton = document.createElement("button");
    				deleteindividualitembutton.name = "deleteitem" + rowCount;
    				deleteindividualitembutton.className = "btn btn-mini btn-inverse";
    				deleteindividualitembutton.innerHTML = "Delete Item"
    				deleteindividualitembutton.onclick = function() { deleteRowNCB('dataTable') };
    				deleteitemtd.appendChild(deleteindividualitembutton);
    				} //end loop
    			}
    Beautiful, and functional, a ways to go still.

    My current humm-dinger is how can I put 'disabled' in the input text field?

    Here is an example:

    Code:
    <input type="text" placeholder="Condition" id="retrievedcondition" disabled><br />
    Twitter bootstrap greys out the field so the user cannot change it.

    My plan here is to make it so when we enter qty, sku, cost, a new table is generated, and the top row of that table displays the qty, sku, and cost that they just entered in the previous row, but the input is disabled because there is no point in it not being disabled. I put a button on there to delete the entire item type (so the entire row with a table in it) and buttons to delete the individual items (basically if they enter QTY of 5, they get a table with a header row and 5 rows to enter serial numbers, but if they click the button to delete an item, so they now have a qty of 4, the QTY cell that is greyed out and disabled should decrement down to 4).

    So instead of having it so they push a button to create a new item type (which was my original plan), the top row is static and is used as a tool to create new subtables.

    Should be pretty handy once it's done.

    Now to add that disabled right before the end of the input tag it would be epic. Going to be an interesting one. I figured maybe it doesn't matter where in the tag it sits so I tried document.createElement("input disabled"); and it just explodes in horror.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I don't know what else is going on there, but if you want to disable a dynamically created input...
    Code:
    var inp=document.createElement("input")
    inp.disabled=true;

  • Users who have thanked xelawho for this post:

    rvialoux (12-13-2012)

  • #9
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    I don't know what else is going on there, but if you want to disable a dynamically created input...
    Code:
    var inp=document.createElement("input")
    inp.disabled=true;
    That works! W00t! Thx!

  • #10
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    kk I got another one. I just cruise until I hit a wall, the latest wall is this:

    how do I add. . . data-toggle= to something? like:

    Code:
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
      simple collapsible
    </button>
    and data-target/data-parent

    using Javascript?

    edit: ah solved it!!

    Code:
    .setAttribute("data-toggle","collapse")
    excellent!!
    Last edited by rvialoux; 12-13-2012 at 09:50 PM.

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Yes, data-* attributes require setAttribute() but most other attributes can be directly asssigned: .disabled=, .id=, etc..
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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