Building a table using date ranges

ok…i’ve made some progress :slight_smile:
Here is what I have so far:

The HTML:

<tr>
<td style='width:60px'><a href='index.php?inc_id=32' onclick='return confirmDelete(this)'>Remove</a></td>
<td style='text-align:center'>test3</td>
<td><input type='text' value='$0.00' style='text-align:center' class='row0'/></td>
<td><input type='text' value='$0.00' style='text-align:center' class='row0'/></td>
<td ><input type='text' value='$35.00' style='text-align:center; background-color:#cccccc' class='row0'/></td>
<td><input type='text' value='$0.00' style='text-align:center' class='row0'/></td>
<td><input type='text' value='$0.00' style='text-align:center' class='row0'/></td>
<td><input type='text' value='$0.00' style='text-align:center' class='row0'/></td>
<td><input type='text' value='$0.00' style='text-align:center' class='row0'/></td>
<td><input type='text' value='$0.00' style='text-align:center' class='row0'/></td>
</tr>
<tr>
<td style='width:60px'><a href='index.php?inc_id=31' onclick='return confirmDelete(this)'>Remove</a></td>
<td style='text-align:center'>test2</td>
<td ><input type='text'  value='$213.00' style='text-align:center; background-color:#cccccc' class='row1'/></td>
<td ><input type='text'  value='$213.00' style='text-align:center; background-color:#cccccc' class='row1'/></td>
<td ><input type='text'  value='$213.00' style='text-align:center; background-color:#cccccc' class='row1'/></td>
<td ><input type='text'  value='$213.00' style='text-align:center; background-color:#cccccc' class='row1'/></td>
<td ><input type='text'  value='$213.00' style='text-align:center; background-color:#cccccc' class='row1'/></td>
<td ><input type='text'  value='$213.00' style='text-align:center; background-color:#cccccc' class='row1'/></td>
<td ><input type='text'  value='$213.00' style='text-align:center; background-color:#cccccc' class='row1'/></td>
<td ><input type='text'  value='$213.00' style='text-align:center; background-color:#cccccc' class='row1'/></td>
</tr>
<tr>
<td style='width:60px'><a href='index.php?inc_id=30' onclick='return confirmDelete(this)'>Remove</a></td>
<td style='text-align:center'>test</td>
<td ><input type='text'  value='$432.00' style='text-align:center; background-color:#cccccc' class='row2'/></td>
<td ><input type='text'  value='$432.00' style='text-align:center; background-color:#cccccc' class='row2'/></td>
<td ><input type='text'  value='$432.00' style='text-align:center; background-color:#cccccc' class='row2'/></td>
<td ><input type='text'  value='$432.00' style='text-align:center; background-color:#cccccc' class='row2'/></td>
<td ><input type='text'  value='$432.00' style='text-align:center; background-color:#cccccc' class='row2'/></td>
<td ><input type='text'  value='$432.00' style='text-align:center; background-color:#cccccc' class='row2'/></td>
<td ><input type='text'  value='$432.00' style='text-align:center; background-color:#cccccc' class='row2'/></td>
<td ><input type='text'  value='$432.00' style='text-align:center; background-color:#cccccc' class='row2'/></td>
</tr>
<input type='hidden' id='incrows' value='3' />
<input type='hidden' id='inccols' value='8' />
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td style='text-align:center; border-bottom:solid 1px; width:150px; min-width:150px'><strong>Total Income:</strong></td>
<td><input type='text'id='inctotal0' readonly='readonly' value='' style='font-weight:bold; text-align:center;' /></td>
<td><input type='text'id='inctotal1' readonly='readonly' value='' style='font-weight:bold; text-align:center;' /></td>
<td><input type='text'id='inctotal2' readonly='readonly' value='' style='font-weight:bold; text-align:center;' /></td>
<td><input type='text'id='inctotal3' readonly='readonly' value='' style='font-weight:bold; text-align:center;' /></td>
<td><input type='text'id='inctotal4' readonly='readonly' value='' style='font-weight:bold; text-align:center;' /></td>
<td><input type='text'id='inctotal5' readonly='readonly' value='' style='font-weight:bold; text-align:center;' /></td>
<td><input type='text'id='inctotal6' readonly='readonly' value='' style='font-weight:bold; text-align:center;' /></td>
<td><input type='text'id='inctotal7' readonly='readonly' value='' style='font-weight:bold; text-align:center;' /></td>
</tr>

And here is the script:

<script type="text/javascript">
$(document).ready(function() {
	var inccols = $('#inccols').val();
	var incrows = $('#incrows').val();
	var totallist = {};
	
	for(var h=0; h<inccols; h++){
		totallist[h] = 0.00;
	}
	
	for(var i=0; i<incrows; i++) {
		var j = 0;
		$('.row' + i).each(function() {
			var cellamount = $(this).val();
			cellamount = cellamount.replace('$','');	
			totallist[j] += parseFloat(cellamount);
			j++;
		});	
	}
	
	for(var k=0; k<inccols; k++){
	$('#inctotal' + k).val("$" + parseFloat(totallist[k]).toFixed(2));
	}
	
});
</script>

I’m including two hidden inputs with the values for total number of rows and columns in the php code.
Then I use these to create an array the right length to suit my number of columns. I populate the array with values of 0 so that the array is defined ready for the next step (maybe this is not the way to do it?)
Then for each of my rows (‘i’) I loop through and get all of the inputs with class name ‘row’ + i (in other words all of the columns in that row).
For each one of these I add the value to the totallist array in the correct index number.
Finally I set the value for the input with the correct name.

Seems to work ok :slight_smile:

Great! Sounds like you know a lot about JS now! Congrats! I didn’t think of using the “class” for a pointer!
Good idea!..

Sponsor our Newsletter | Privacy Policy | Terms of Service