(jsp和servlet功能篇)jsp+Jquery实现点击行，获取行数据
第一步：jquery代码：
function bindDate() {
alert("????");
$
.ajax( {
url : "dingdan",
type : 'post',
success : function(data) {
if (data != null || data != "") {
// 解析相关json 格式数据
var dataObj = eval("(" + data + ")");
for ( var i = 0; i < dataObj.length; i++) {
var liushuih = dataObj[i].liushuih;
var chuangjiansj = dataObj[i].chuangjiansj;
var dangqianwz = dataObj[i].dangqianwz;
var mudedi = dataObj[i].mudedi;
var chengke_id = dataObj[i].chengke_id;
var jiajia = dataObj[i].jiajia;
var yuyinwj = dataObj[i].yuyinwj;
var dengdaisj = dataObj[i].dengdaisj;
// 在table 添加一行新数据
var tr = "<tr><td >"
+ liushuih
+ "</td><td >"
+ chuangjiansj
+ "</td><td >"
+ dangqianwz
+ "</td><td >"
+ mudedi
+ "</td><td >"
+ chengke_id
+ "</td><td >"
+ jiajia
+ "</td><td >"
+ yuyinwj
+ "</td><td >"
+ dengdaisj
+ "</td><td><a href='#' οnclick='rowDate()'>查询操作</a></td></tr>"
$("#ygxxtable").append(tr);
}
} else {
alert("没有数据");
}
},
error : function(data) {
}
});
}
// 选择行数据实例代码
function rowDate() {
var $table = $("#ygxxtable");// 获取表
var $trs = $table.find("tr");// 获取行
var liushuih;
var chuangjiansj;
var dangqianwz;
var mudedi;
var chengke_id;
var jiajiavar;
var yuyinwj;
var dengdaisj;
// 遍历数据表的行数
for ( var i = 0; i < $trs.length; i++) {
var $tr = $trs.eq(i);// 循环获取每一行
$tr.on("click", function() { // 为每一行添加click事件
var $td = $tr.find("td");// 获取行内数据
liushuih = $td.eq(0).text();
alert("相关信息："+$td.eq(0).text())
chuangjiansj = $td.eq(1).text();
dangqianwz = $td.eq(2).text();
mudedi = $td.eq(3).text();
chengke_id = $td.eq(4).text();
jiajia = $td.eq(5).text();
yuyinwj = $td.eq(6).text();
dengdaisj = $td.eq(7).text();
});
}
}
第二步:jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>订单信息分页</title>
<!--加载jquery核心文件 -->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<!--加载Jquery功能代码 -->
<script type="text/javascript" src="js/edc.js"></script>
</head>
<body>
<input type="Submit" value="Jsp+Jquery分页" align="MIDDLE" οnclick="bindDate();"/>
<table border="3" id="ygxxtable">
<tr>
<th>订单编号</th>
<th>创建时间</th>
<th>当前位置</th>
<th>目的地</th>
<th>乘客编号</th>
<th>愿意加价</th>
<th>语音文件</th>
<th>等待时间</th>
<th>功能操作</th>
</tr>
</table>
<div id="foot">
<div class="breakpage">3条记录 1/1 <a id="previous" href="#" οnclick="page()">上一页</a> <a id="next" href="#" οnclick="page()">下一页</a></div>
</div>
</body>
</html>
结果截图：
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
