jquery add/remove table on click on checkbox

Dennie
Dennie used Ask the Experts™
on
Hi,

I wan to use jquery to add/remove a table with a form by using checkbox. How could I do this?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
If you have the id of the table you can remove the table by
$('#myTableId').remove();

Similarly you can check the value of checkbox, by
$('#mycheckbox').val();

If the value is "on", then you can remove the table

Author

Commented:
I want Jquery to load create table on the click. So when the page is loaded the table isn't created yet. So I can dynamically display and hide it
Not sure if i have understood the question correctly, please check the following link on how to create table dynamically using jquery
http://stackoverflow.com/questions/1226541/creating-tables-dynamically-in-jquery
http://datatables.net/
http://jtemplates.tpython.com/
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I just want a table with a form:

<form>
  <table>
     <tr>
        <td>hi</td>
        </td><input type="text"></td>
    </tr>
  </table>
</form>

Only to be present in the HTML code when clicked on a check box... en when unchecked again removed
Is it mandatory that the form is made by jQuery? And is it important that the form is even made by javascript at all? Could you not embed it into a <DIV> tag which shows up as invisible when the page loads, but when you check the checkbox it will show up and unchecking will make it invisible again. Like this code I attached.
<html>
<head>
<script>
function toggleFormDiv(that,targetDiv) {
	if(that.checked) {
		document.getElementById(targetDiv).style.display = "block";
	} else {
		document.getElementById(targetDiv).style.display = "none";
	}
}
</script>
</head>

<body>
<input type="checkbox" onclick="javascript:toggleFormDiv(this,'someDiv');"> - Form Shown
<div id="someDiv" style="display:none;">
	<form>
		<table>
		<tr>
			<td>hi</td>
			</td><input type="text"></td>
		</tr>
		</table>
	</form>
</div>
some other stuff
</body>
</html>

Open in new window

Commented:
See the answer below
$('#blockid').append('HTML here')

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial