Trying to make a nested collapsible table? Help! New to this!

JavaScript
1

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.

/* ------------------- 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:

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

2

It looks like this now:

That’s after clicking to create a row or two.

Ideally somehow if they click the ‘add items’, it should, it think, dynamically create a second table right under that one within that table and the top row of that table contains the qty and sku but not editable anymore, and it shows the x number of rows under it, and a button would collapse that down to just the qty row. So the top row there is static, once they click ‘add items’ it should blank out the cells to reuse it again.

Sorry if it sounds like I want something huge built here but it’s like so close to perfection.