SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like this now:

    j6auZ.jpg

    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.


Bookmarks

Posting Permissions

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