(jsp和servlet功能篇)jsp+Jquery实现点击行，获取行数据

最新推荐文章于 2023-12-12 09:43:10 发布

在奋斗的大道

最新推荐文章于 2023-12-12 09:43:10 发布

阅读量1.7k

点赞数 1

分类专栏： jsp和Servlet(功能篇)

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/9768707

版权

jsp和Servlet(功能篇) 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

第一步：jquery代码：

},
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>

结果截图：