Solved

Add one to many table rows based on checkbox values

Posted on 2010-11-14
7
525 Views
Last Modified: 2012-05-10
I have one select list and 4 checkboxes. I have enter the option value and the value of the checkbox as 2 separate values in a row.

 If one checkbox is checked, I am able to add a table row. I need help in adding multiple rows at one time if multiple checkboxes are checked.

Please help.

Thank you
sshivanna

So far this is my code...

SCRIPT

<script type="text/javascript">
      
      $(function() {

            $("#btn_addrole").click(function(){
                  if ($("#Launcher").is(":checked") == true) {
                  $("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#Launcher").val()+'</td></tr>');
                  }
            });
      });      
</script>
---------------------
HTML code
--------------------
            <table class="git-role-table">
            <tr><td>
                  <select id="surveyoptions" >
                        <option value="opt1">Option 1</option>
                        <option value="opt2">Option 2</option>
                        <option value="opt3">Option 3</option>
                        <option value="opt4">Option 4</option>
                  </select>
            </td>
            <td><input type="checkbox" id="Launcher" value="Launcher">&nbsp;Launcher&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="Preparer" value="Preparer">&nbsp;Preparer&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="Reviewer" value="Reviewer">&nbsp;Reviewer&nbsp;&nbsp;&nbsp;
            </td>
            <td>
                  <input type="button" id="btn_addrole" value="Add Role" />
            </td>
            </tr>
            </table>

<div id="role_container">
      <table id="rolestable">
            <tr><td>&nbsp;</td></tr>
      </table>
</div>


0
Comment
Question by:sshivanna
  • 3
  • 3
7 Comments
 
LVL 14

Accepted Solution

by:
sam2912 earned 500 total points
ID: 34134202

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#btn_addrole").click(function(){
		if ($("#Launcher").is(":checked") == true) {
			$("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#Launcher").val()+'</td></tr>');
		}
		if ($("#Preparer").is(":checked") == true) {
			$("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#Preparer").val()+'</td></tr>');
		}
		if ($("#Reviewer").is(":checked") == true) {
			$("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#Reviewer").val()+'</td></tr>');
		}
	});
});
</script>
</head>
<body>
<table class="git-role-table" border="1">
	<tr>
		<td><select id="surveyoptions" >
				<option value="opt1">Option 1</option>
				<option value="opt2">Option 2</option>
				<option value="opt3">Option 3</option>
				<option value="opt4">Option 4</option>
			</select></td>
		<td><input type="checkbox" id="Launcher" value="Launcher">
			&nbsp;Launcher&nbsp;&nbsp;&nbsp;
			<input type="checkbox" id="Preparer" value="Preparer">
			&nbsp;Preparer&nbsp;&nbsp;&nbsp;
			<input type="checkbox" id="Reviewer" value="Reviewer">
			&nbsp;Reviewer&nbsp;&nbsp;&nbsp; </td>
		<td><input type="button" id="btn_addrole" value="Add Role" /></td>
	</tr>
</table>
<div id="role_container">
	<table id="rolestable" border="1">
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>
</body>
</html>

Open in new window

0
 
LVL 14

Expert Comment

by:sam2912
ID: 34134205
Actually the "== true" can be removed, as the .is() function already returns a boolean value.
if($("#Launcher").is(":checked") == true) {

TO

if($("#Launcher").is(":checked")) {

Open in new window

0
 
LVL 7

Expert Comment

by:cstsang
ID: 34134228
Is it what you need?
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
		<script language=javascript>
			 $(function() {

            $(".btn_addrole").click(function(){
                  if ($(this).is(":checked") == true) 
                  {
	                  var table=$(".git-role-table").get(0);
	                  var row=document.createElement("tr");
	                  cell=row.insertCell(row.length);
	                  cell.innerHTML=$("#surveyoptions option:selected").val();
	                  cell=row.insertCell(row.length);
	                  cell.innerHTML=$(this).val();
	                  table.appendChild(row);
             	  }
            });
      });      

		</script>
	</head>
	<body>
	  <table class="git-role-table">
            <tr><td>
                  <select id="surveyoptions" >
                        <option value="opt1">Option 1</option>
                        <option value="opt2">Option 2</option>
                        <option value="opt3">Option 3</option>
                        <option value="opt4">Option 4</option>
                  </select>
            </td>
            <td><input type="checkbox" id="Launcher" value="Launcher" class="btn_addrole">&nbsp;Launcher&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="Preparer" value="Preparer" class="btn_addrole">&nbsp;Preparer&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="Reviewer" value="Reviewer" class="btn_addrole">&nbsp;Reviewer&nbsp;&nbsp;&nbsp;
            </td>
            <td>
                  <input type="button" id="btn_addrole" value="Add Role" />
            </td>
            </tr>
        </table>

		<div id="role_container">
		      <table id="rolestable">
		            <tr><td>&nbsp;</td></tr>
		      </table>
		</div>
	</body>
</html>		

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 2

Author Comment

by:sshivanna
ID: 34136055
Thank you for your responses. I am sorry I didn't explain my challenge correctly.

Here is what I want.

A user can select one of the options from the select list and can check one or more of the checkboxes before he clicks the 'Add Role' button.  For each checkbox checked, I need to insert a row into the table.

When the user checks only one of the checkboxes, that is not a problem. I am able to add a row.

What I really need is to check which of the checkboxes are checked and add a row for each checked checkbox with its value.

So if the user checks 3 checkboxes and select an option, I need to insert 3 rows into the table.
0
 
LVL 2

Author Comment

by:sshivanna
ID: 34136276
Thank you guys for your assistance. The problem is solved. Here is the solution to the problem.

I had to create a function and call the function to add roles.

<script type="text/javascript">
      
      $(function() {

            $("#btn_addrole").click(function(){
                  if ($("#Launcher").is(":checked")) {
                        addRole('Launcher');
                  }

                  if ($("#Reviewer").is(":checked")) {
                        addRole('Reviewer');
                  }

                  if ($("#Preparer").is(":checked")) {
                        addRole('Preparer');
                  }
            });

            function addRole(roleId){
                  $("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#"+roleId).val()+'</td></tr>');
            }

      });      

</script>
0
 
LVL 14

Expert Comment

by:sam2912
ID: 34136408
TS, did you test my code in the first post?
0
 
LVL 2

Author Comment

by:sshivanna
ID: 34136430
@sam2912, Thank you for pointing it out. I totally missed it. That worked. Thank you.
0

Featured Post

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to reload page and grab querystring 2 21
Html CheckBox obtain Its Value 5 27
how to use .length with "input" 2 24
Javascript 2 19
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question