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.
Before you post, read our: 
