embedding a form in table using jquery

narjis · December 28, 2011

I am successfully displaying values in my table using jquery but now I want a form to enclose these values and then save them if edited here is my php script

<?php 
$conn = mysql_connect("localhost","root","");
mysql_select_db("customer",$conn);
$query = "SELECT * FROM info_tb";
$details = array();
$res = mysql_query($query);
$count = mysql_num_rows($res);
$json['tables'] = "<form id='savingFrm' method='post' >";
$i=0;
if($count>=1){
while($result=mysql_fetch_assoc($res)){
	$json['tables'] .= "<tr>
		<td>" . $result['id'] . "</td>
		<td><input type='text' name='name_".$i."' value='" . $result['Name'] . "'/></td>
		<td><input type='text' name='father_".$i."' value='" . $result['Father'] . "'/></td>
		<td><input type='text' name='education_".$i."' value='" . $result['Education'] . "'/></td>
		<td><input type='text' name='age_".$i."' value='" . $result['age'] . "'/></td>
	</tr>";
	$i++;
}//end of while
}//end of if
$json['tables'] .= "<tr><td><input type='submit' value='Save' /></td></tr></form>";
echo json_encode($json);
mysql_close($conn);

when i keep this line $json['tables'] = "<form id='savingFrm' method='post' >"; it doesnot show the tables while when I change it to this $json['tables'] = ''; it shows the result perfectly how can I embed it inside the form. Following is my html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Showing Data</title>
</head>

<body>

<input type="button" value="Load!" id="load" />

<!--</div>-->
<script type="text/javascript" src="../jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="script.js">
</script>
<div id="container">
<table id="myTB" border=".2 em">
  <tr>
    <td>Id</td>
    <td>Name</td>
    <td>Father Name</td>
    <td>Class</td>
    <td>Age</td>
  </tr>
</table>

</div>
</body>
</html>

Here is javascript code

// JavaScript Document
$(document).ready(function(){
$("#container").hide();
});
$("#load").click(function(){
$.ajax({
dataType: 'json',
url: "data.php",
success:function(data){
	//console.log(data);
	//$('table').appendTo('#myTB').html("<form method='post' id='SaveFrm'");
$('table').append(data.tables);
$("#container").show();
}
});
});

Sign In

embedding a form in table using jquery

Recommended Posts

narjis

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information