new JS project...

allworknoplay · 04-24-2009, 12:31 AM

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>&nbsp;</td>
    <td><div align="right" class="style12">choose how many to selected <br />
      before disabling the rest!</div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </form>
</table>
<p>&nbsp;</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??