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

淩亂°似流年 2023-10-18 22:35 72阅读 0赞

第一步：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>	
    	
    	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    	
    	<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>

结果截图：

![Center][]

[Center]: https://img-blog.csdn.net/20130805160334250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center