i want to select each table row. i got a solution yesterday. it work fine with my html but it not work when i add data from mysql by php.below is my code.
1. index.php
<html>
<head><title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
$(document).ready(function(){
var id=0;
$("table#dataTable").on('click',function(){
var rows = $('tr').not(':first');
rows.on('click', function(e) {
var row = $(this);
id = row.attr('id');
if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
row.addClass('highlight');
} else {
rows.removeClass('highlight');
row.addClass('highlight');
}
});
$(document).bind('selectstart dragstart', function(e) {
e.preventDefault(); return false;
});
});
$('#button').on('click',function(){
if(id==''){
alert('please select item to display!');
return false;
}else{
var r=confirm("You have select row id: "+id);
if(r==true){
window.location.reload(true);
}else{
return false;
}
}
});
});
function getId(str) {
var qty=$('input[name=calc_result]').val();
if (str=="") {
document.getElementById("addRow").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("addRow").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("POST","query.php?id="+str,true);
xmlhttp.send();
//window.location.reload(true);
}
</script>
</head>
<body>
<input id="button" type="button" value="click" />
<INPUT id="1" type="button" value="id 1" onclick="getId(this.id)" />
<INPUT id="2" type="button" value="id 2" onclick="getId(this.id)" />
<INPUT id="3" type="button" value="id 3" onclick="getId(this.id)" />
<div class="addRow" id="addRow">
<table id="dataTable" class="rounded-corner">
<tr id="1">
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</table>
</div>
</body>
</html>
2. query.php
<?php
$con = mysqli_connect('localhost','root','','test');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}else{
echo 'Connection Success!';
}
$id='';
if(isset($_GET['id'])){
$id=$_GET['id'];
}
$result=mysqli_query($con,"SELECT * FROM employee WHERE id=".$id);
$row=mysqli_fetch_array($result);
$id=$row['id'];
$name=$row['name'];
$age=$row['age'];
$salary=$row['salary'];
mysqli_query($con,"INSERT INTO employee_temp VALUES('$id','$name','$age','$salary')");
$rs=mysqli_query($con,"SELECT * FROM employee_temp");
echo '<table id="dataTable" class="rounded-corner">';
echo '<tr>';
echo '<th>ID</th><th>Name</th><th>Age</th><th>Salary</th>';
echo '</tr>';
while($row=mysqli_fetch_array($rs)){
echo '<tr>';
echo '<td>'.$row['id'].'</td>';
echo '<td>'.$row['name'].'</td>';
echo '<td>'.$row['age'].'</td>';
echo '<td>'.$row['salary'].'</td>';
echo '</tr>';
}
echo '</table>';
?>
3. mysql table
CREATE DATABASE `test` ;
USE `test`;
DROP TABLE IF EXISTS `employee`;
CREATE TABLE `employee` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(25) DEFAULT NULL,
`age` int(11) DEFAULT NULL,
`salary` double DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
insert into `employee`(`id`,`name`,`age`,`salary`) values (1,'andra',24,200),(2,'alex',26,500),(3,'soki',23,200),(4,'akita',30,1500),(5,'mosny',28,1000),(6,'jamola',27,1000);
DROP TABLE IF EXISTS `employee_temp`;
CREATE TABLE `employee_temp` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(25) DEFAULT NULL,
`age` int(11) DEFAULT NULL,
`salary` double DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;