Extracting Data from a dynamic table
Posted: Mon Jun 04, 2012 10:11 pm
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
As I mentioned, the rows are adding nicely. Following is the javascript for adding rows:
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:
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.
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>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>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>Following is a sample from my console log after putting values in 7 rows of data.
Does anyone know why my routine:undefined
2nd Row
3rd Row
4th Row
- Treats the first row of data as "undefined"?
- Won't pick up values from the 5th row on up?