www.webdeveloper.com
Results 1 to 7 of 7

Thread: create a row using checkboxes

Hybrid View

  1. #1
    Join Date
    Aug 2004
    Posts
    195

    create a row using checkboxes

    Im trying to figure out how to use checkboxes to add rows (up to five) to an existing table, heres the html,
    HTML Code:
    <form name="myform">
    Row 1 <input type="checkbox" name="check_list" onClick="addRow(1)"><br>
    Row 2 <input type="checkbox" name="check_list" onClick="addRow(3)"><br>
    Row 3 <input type="checkbox" name="check_list" onCheck="addRow(3)"><br>
    Row 4 <input type="checkbox" name="check_list" onCheck="addRow(4)"><br>
    Row 5 <input type="checkbox" name="check_list" onCheck="addRow(5)"><br>
    <button type="button"onClick="CheckAll(document.myform.check_list)">Check All</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" onClick="UnCheckAll(document.myform.check_list)">Unheck All</button>
    </form> 
       <table id="dynamo" align="center" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    	<th>&nbsp;</th>
    	<th>Column 1</th>
    	<th>Column 2</th>	
    	<th>Column 3</th>	
    	</tr>	
    	</table>
    heres the function to create the row
    Code:
    function addRow(x)
    {
    var mytable = document.getElementById("dynamo");
    
    var row=document.createElement("tr");
    var col1=document.createElement("td");
    var rowcount=document.createTextNode("Row "+x);
    var col2=document.createElement("td");
    var col3=document.createElement("td");
    var col4=document.createElement("td");
    
    col1.appendChild(rowcount);
    
    mytable.appendChild(row);
    mytable.appendChild(col1);
    mytable.appendChild(col2);
    mytable.appendChild(col3);
    mytable.appendChild(col4);
    }
    I'm trying to get all the borders to show (even the tds with no content)
    Also, im trying to toggle the rows, so if the box isn't checked the row goes away.
    javascriptss.png
    Thanks...
    Last edited by lukeurtnowski; 06-05-2014 at 05:40 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    195
    ok, made some headway on this beasrt, Now the checkboxes add/delete the row. When the page loads, all the boxes are checked and all 5 rows can be seen. The problem now is that when I press the uncheck all button (only the 4th row is deleted. What am I doing wrong? Shouldn't they all go asway?
    Heres my Javascript
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    function isChecked(x)
    {
    var checkbox = document.getElementById("box"+x);
    
      if(checkbox.checked){
      addRow(x);
      } else {
      deleteRow(x);
      }
    }
    function addRow(x)
    {
    
      var mytable = document.getElementById("dynamo");
    
      var row = mytable.insertRow(1);
      row.setAttribute('id','row'+x);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      cell1.innerHTML = "Row "+x;
    }
    function deleteRow(x)
    {
      var row = document.getElementById("row"+x);
    
      row.deleteCell(0);
      row.deleteCell(0);
      row.deleteCell(0);
      row.deleteCell(0);
      mytable.deleteRow(x);
    }
    function CheckAll(chk)
    {
    for (i = 0; i < chk.length; i++)
    chk[i].checked = true ;
    	for(var x = 1;x <= 5; x++)
    	{
    	addRow(x);
    	}
    }
    
    function UnCheckAll(chk)
    {
    for (i = 0; i < chk.length; i++)
    chk[i].checked = false ;
    	for(var x = 4;x >= 0; x--)
    	{
    	deleteRow(x);
    	}
    
    }
    </script>
    Heres my HTML
    HTML Code:
    <body onload="CheckAll(document.myform.check_list)">
    <form name="myform">
    Row 1 <input type="checkbox" name="check_list" id="box1" onClick="isChecked(1)"><br>
    Row 2 <input type="checkbox" name="check_list" id="box2" onClick="isChecked(2)"><br>
    Row 3 <input type="checkbox" name="check_list" id="box3" onClick="isChecked(3)"><br>
    Row 4 <input type="checkbox" name="check_list" id="box4" onClick="isChecked(4)"><br>
    Row 5 <input type="checkbox" name="check_list" id="box5" onClick="isChecked(5)"><br>
    <button type="button"onClick="CheckAll(document.myform.check_list)">Check All</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" onClick="UnCheckAll(document.myform.check_list)">Unheck All</button>
    </form> 
    <table id="dynamo" align="center" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    	<th>&nbsp;</th>
    	<th>Column 1</th>
    	<th>Column 2</th>	
    	<th>Column 3</th>	
    	</tr>	
    </table>
    
    
    </body>
    togglrrows1.pngtogglrrows3.png
    Thanks...

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    It would be better to display two buttons to add a row (its disappear with the 5th row) or to delete a row (if any) of your table...

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440

    Lightbulb

    If you already know the contents of the table rows to display,
    it would seem easier to control if you did something like this...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Add/Remove Table Rows </title>
    
    </head>
    <body>
     <form name="myform">
      <fieldset id="check_list" style="width:20%">
      <legend> Check List </legend>
      Row 1 <input type="checkbox" onclick="setreset('row0',this.checked)"><br>
      Row 2 <input type="checkbox" onclick="setreset('row1',this.checked)"><br>
      Row 3 <input type="checkbox" onclick="setreset('row2',this.checked)"><br>
      Row 4 <input type="checkbox" onclick="setreset('row3',this.checked)"><br>
      Row 5 <input type="checkbox" onclick="setreset('row4',this.checked)"><br>
      <button type="button"onclick="CheckList('check_list',true)">Check All</button>
       &nbsp;&nbsp;&nbsp;&nbsp;
      <button type="button" onclick="CheckList('check_list',false)">Unheck All</button>
      </fieldset>
     </form> 
    
    <table id="dynamo" align="center" border="0" cellpadding="0" cellspacing="0" width="20%">
     <thead>
      <tr>
      <th>&nbsp;</th>
      <th>Column 1</th>
      <th>Column 2</th>	
      <th>Column 3</th>	
      </tr>	
     </thead>
    
     <tbody>
      <tr id="row0">  <th>Row 1</th>  <th>1/1</th>  <th>1/2</th>  <th>1/3</th> </tr>	
      <tr id="row1">  <th>Row 2</th>  <th>2/1</th>  <th>2/2</th>  <th>2/3</th> </tr>	
      <tr id="row2">  <th>Row 3</th>  <th>3/1</th>  <th>3/2</th>  <th>3/3</th> </tr>	
      <tr id="row3">  <th>Row 4</th>  <th>4/1</th>  <th>4/2</th>  <th>4/3</th> </tr>	
      <tr id="row4">  <th>Row 5</th>  <th>5/1</th>  <th>5/2</th>  <th>5/3</th> </tr>	
    
     </tbody>
    </table>
    
    <script type="text/javascript">
    
    function CheckList(IDS,flag) {
      var sel = document.getElementById(IDS).getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        sel[i].checked = flag;
        if (flag) { document.getElementById('row'+i).style.display = ''; }
             else { document.getElementById('row'+i).style.display = 'none'; }
    
      }
    }
    
    function setreset(IDS,flag) {
      if (flag) { document.getElementById(IDS).style.display = ''; }
           else { document.getElementById(IDS).style.display = 'none'; }
    }
    
    window.onload = function() {
      CheckList('check_list',true);
      setreset('check_list',true);
    }
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Aug 2004
    Posts
    195
    thanks Jimmer, it works, but im trying to understand your code, can you explain it?

  6. #6
    Join Date
    Jun 2014
    Posts
    27
    IT's all the Javascript that has been used to render what you want to.
    The script will call the proper button as they are in, with function. The parameter id will control which button has been pressed while the flag let them enable and disable. Easy to understand!

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440

    Lightbulb

    Sure,

    The HTML is just that. Nothing special other than adding a unique ID value for each row.
    The onclick in each checkbox calls on the setreset() function in the JS function described below.
    The <body onload=...> is replaced by the "window.onload = function() ..." on startup.

    The JS has only two functions: CheckList() and setreset().
    Each used the same parameters passed.

    The IDS relates to the unique row ids in each <tr> tag of the table.
    The setreset() function just changes the CSS display parameter for each IDS specified.
    The flag parameter is just true or false depending upon the checkbox.checked value.

    The CheckList() function just collect all the <input...> tags in the variable 'sel'
    'sel' is SIMILAR to an array, but in this context is called a collection.
    Each 'sel' points to each of the <input type="checkbox" ...>s in the <fieldset> tag.
    Again, CSS parameters are set (true) or reset (false), depending upon the 'flag' setting passed.

    Let me know if that is not clear enough.
    You should be able to google each of the commands for further explanations,
    but speak up if you continue to have problems
    Last edited by JMRKER; 06-06-2014 at 03:18 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles