asked on

jquery add/remove table on click on checkbox

Hi,

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

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

Dennie

ASKER

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

SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dennie

ASKER

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

SleepinDevil

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

ASKER CERTIFIED SOLUTION

Dennie

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial