Ok guys, I made myself a pretty cool new JS project and I tried to do it without your help but it's not going anywhere.
You can see it here:
http://www.gatebattle.com/dynamic_row_and_checkbox.html
What I want the user to do is enter a number where it says:
"Enter # of Rows to create:"
Then it will dynamically create rows. I used the onBlur function for the input box...
If they enter 3, it creates 3 rows, but if they then enter 2, it removes one row...
I figured this would be fun to do...there's other things I want it to do too, but I want to try to figure those items out myself, but right now I need to get over this hurdle...
JS:
Code:
<script type="text/javascript">
// Use this VAR later
var selected_checkboxes = 0;
/* Default to 1 when page initially loads, must have at least 1 row.
Otherwise get number of rows from user input. Value cannot be 0 or negative. */
if(!document.testform.get_rows_input) var getRow = 1;
// Get input value from user (document.testform.get_rows_input.value) and dynamically create rows
function addRows(document.testform.get_rows_input.value){
getRow = document.testform.get_rows_input.value
var table = document.getElementById('users');
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');
var inp1 = document.createElement('INPUT');
for(i=1;i<=getRow;i++){
table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td2.appendChild(inp1);
}
}
</script>
HTML:
Code:
<table width="1024" border="0" align="center" cellpadding="2" cellspacing="1">
<form name="testform" action="" method="POST">
<tr bgcolor="#e0e0e0">
<td width="152"><div align="right"><span class="style10">Enter # of Rows to create: </span></div></td>
<td width="78"><span class="style10">
<label>
<input name="get_rows_input" type="text" value="1" size="10" maxlength="10" onBlur="addRows(this.value);" />
</label>
</span></td>
<td width="233"><div align="right" class="style10">Maximum selected checkboxes: </div></td>
<td width="60"><input name="textfield" type="text" size="10" maxlength="10" /></td>
<td width="469"><div align="center" class="style10">You have selected <span class="style11">
<script type="text/javascript">
document.write(selected_checkboxes);
</script>
</span> of checkboxes. <span class="style11">
<script type="text/javascript">
//document.write(leftover_checkboxes);
</script>
</span> left before disabling. </div></td>
</tr>
<tr bgcolor="#e0e0e0">
<td bgcolor="#e0e0e0"><div align="right" class="style12">default is 1 </div></td>
<td> </td>
<td><div align="right" class="style12">choose how many to selected <br />
before disabling the rest!</div></td>
<td> </td>
<td> </td>
</tr>
</form>
</table>
<p> </p>
<table width="1024" border="0" align="center" cellpadding="4" cellspacing="1">
<tbody id="users">
<tr bgcolor="#EEEEEE">
<td width="41" bgcolor="#EEEEEE">#</td>
<td width="41"></td>
<td width="735">Name</td>
</tr>
<tr>
<td>1</td>
<td><input type="checkbox" name="checkbox" value="checkbox" onClick="countMe();" /> </td>
<td>John Doe </td>
</tr>
</tbody>
</table>
It's probably easier though to just go to my site and view the page source maybe??