Page 1 of 1

Extracting Data from a dynamic table

Posted: Mon Jun 04, 2012 10:11 pm
by Pavilion
Hello -

I've been experimenting with a jQuery dynamic table. I've gotten pretty far with it, but now I want to extract data from the table and push it into an array for posting. This is where I'm getting stumped up.

Following is my html

Code: Select all

<h2>Add row</h2>
<div class="outer">
<div class="innera" name="data_container">
	<table id="add_table">
		<thead>
		<tr><th>Select</th><th>Upload</th><th>Description</th></tr>
		</thead>
		
		<form id="file_frm" name="add_frm">
			<tbody id="add_data">
			<tr name="data_row">
			<TD><INPUT type="checkbox" name="chk" style="margin:0"/></TD>
			<TD> <INPUT type="text" id="input1" name="dynamic[]" class="field" style="margin:0" /></TD>
			<TD> <INPUT type="file" id="input2" value="" name="dynamic[]" style="margin:0; height: 20px"/></TD>
			</tr>
			</tbody>
		</form>
		
		<tfoot>
			<tr>
			<td></td>
			<td border="0" colspan="2"><button onclick="javascript:addRow('add_table')">Add Attachment</button>
			<button onclick="javascript:deleteRow('add_table')">Delete Attachment</button>
			<button onclick="push_data('add_table')">SAVE</button>
			</td>
			</tr>
		</tfoot>
	</table>
</div>
</div>
As I mentioned, the rows are adding nicely. Following is the javascript for adding rows:

Code: Select all

<script>function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");

var cell1 = document.createElement("td");
var check1 = document.createElement("input");
check1.type = "checkbox";
check1.setAttribute('style', 'margin:0');
row.appendChild(check1);

var cell2 = document.createElement("td");
input1 = document.createElement("input");
input1.type = "text";
input1.setAttribute('style', 'margin:0; height: 12px');
input1.setAttribute("name","dynamic[]");
input1.setAttribute("class","field");

row.appendChild(input1);

var cell3 = document.createElement("td");
var input2 = document.createElement("input")
input2.type = "file";
input2.setAttribute('style', 'margin:0; height: 20px');
input1.setAttribute("name","dynamic[]");
input1.setAttribute("class","field");
row.appendChild(input2);


	cell1.appendChild(check1);
	cell2.appendChild(input1);
	cell3.appendChild(input2);
	 
	row.appendChild(cell1);
	row.appendChild(cell2);
	row.appendChild(cell3);

tbody.appendChild(row); 
} // END function to add rows, cells and input elements.</script>
The adding works, I include it here simply so others can see how the table is generated.

Following is my attempt to extract data from the table:

Code: Select all

<script>var i = 0;
function push_data(add_table) {
i=0;
	try {
	var var_table = document.getElementById(add_table);
	var rowCount = var_table.rows.length;
	for(var i=0; i<rowCount; i++) {
	 	var var_increment = i++;
	var row = var_table.rows[i];
	var desc = row.cells[1].childNodes[0];
		if(null != desc) {
			console.log(desc.value);
			rowCount--;
				i--;
		}
	}
	}catch(e) {
		console.log(e);
	}
}</script>
Now - here is the problem. The above routine feeds accurate data to the console.log for rows 2, 3 and 4. However row 1 comes back as "undefined" and any row greater than 4 doesn't feed into the console.log at all.

Following is a sample from my console log after putting values in 7 rows of data.
undefined
2nd Row
3rd Row
4th Row
Does anyone know why my routine:
  1. Treats the first row of data as "undefined"?
  2. Won't pick up values from the 5th row on up?
Any help with these questions is appreciated. Thank you in advance - Pavilion

Re: Extracting Data from a dynamic table

Posted: Tue Jun 05, 2012 8:17 pm
by Pavilion
Bumping this topic up.

I've figured out part of the problem. To review my original problems included:

Trying to build a routine which will iterate through a dynamically built html table and extract values. The routine I've built is not working. Originally my routine:
  1. Treated the first row of data as "undefined"?
  2. Wouldn't pick up values from the 5th row on up?
At this point I've figured out how to build a routine which picks up all values after the 1st row. Following is my routine as it stands now:

Code: Select all

function push_data(add_table) {
	var var_table = document.getElementById(add_table);
	var rowCount = var_table.rows.length;
	try {
	for(var i=0; rowCount>2; i++) {
	 	var var_increment = i++;
	var row = var_table.rows[i];
	var desc = row.cells[1].childNodes[0];
	var var_file = row.cells[2].childNodes[0];
		if(null != desc && null != var_file) {
			console.log(desc.value);
			console.log(var_file.value);
			rowCount--;
				i--;
		}
	}
	}catch(e) {
		console.log(e);
	}
}
My console.log is returning:
undefined
undefined
two
CSV_OutlookExport.csv
three
CSVExport.csv
four
OutlookExport.xls
five
diagram.jpg
six
test3.txt
seven
diagram.jpg
The two inputs in row one are returning undefined. After that EVERY row returns accurate values for both inputs.

Does anyone have any idea WHY my inputs in row one are being returned as "undefined"?

Thanks in advance - Pavilion