如何选择表格行? [英] how to select table row?

查看:94
本文介绍了如何选择表格行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想选择每个表格行。我昨天得到了解决方案。它与我的HTML工作正常,但是当我通过php.below从我的代码添加来自mysql的数据时它不起作用。



1. index.php



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>

< br $> b $ b

2. query.php





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





3. mysql table

CREATE DATABASE /*!32312 IF NOT EXISTS*/`test` /*!40100 DEFAULT CHARACTER SET latin1 */;

USE `test`;

/*Table structure for table `employee` */

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;

/*Data for the table `employee` */

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);

/*Table structure for table `employee_temp` */

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;

推荐答案

(document).ready(function(){
var id = 0;
(document).ready(function(){ var id=0;


(table#dataTable)。on('click' ,function(){
var rows =
("table#dataTable").on('click',function(){ var rows =


('tr')。not(':first');
rows.on('click',function(e){
var row =
('tr').not(':first'); rows.on('click', function(e) { var row =


这篇关于如何选择表格行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆