首页 新闻 会员 周边

jquery ajax读取table 某一行的数据

0
悬赏园豆:50 [已解决问题] 解决于 2015-12-22 14:53

table是这样的 id,name,age,email,adress。id被我隐藏不显示在table,我想点击每一行后面的详情,用jquery ajax读取这一行的数据,该怎么做

<table>
  <tr>
    <td>name</td>
    <td>age</td>
    <td>emaill</td>
    <td>adress</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>21</td>
    <td></td>
    <td></td>
    <td><input type="button"id=""value="详情"/> </td>
  </tr>
  <tr>
    <td>李四</td>
    <td>31</td>
    <td></td>
    <td></td>
    <td><input type="button" id="more" value="详情"/> </td>
  </tr>
</table>

伊夏丶的主页 伊夏丶 | 初学一级 | 园豆:9
提问于:2015-12-18 09:52
< >
分享
最佳答案
0

  <tr data-id="xxx">
    <td>name</td>
    <td>age</td>
    <td>emaill</td>
    <td>adress</td>
    <td><button data-id="11">Click</button></td>
  </tr>

var dataId = $(this).data('id'); //点击按钮,获取id

//该干嘛干嘛...

收获园豆:35
幻天芒 | 高人七级 |园豆:37175 | 2015-12-19 10:13

一下子点醒了 我实际用的是DataGrid 我的按钮是超链接写的  按照这样的 该怎么定义上文的tr呢 事件又该怎么写

伊夏丶 | 园豆:9 (初学一级) | 2015-12-19 16:28

@伊夏丶: 就把data-id放在超链接上哇,我上面贴的代码里面tr那里的data-id是多余的。

幻天芒 | 园豆:37175 (高人七级) | 2015-12-19 20:59

@幻天芒: 好我试试

伊夏丶 | 园豆:9 (初学一级) | 2015-12-21 09:42
其他回答(5)
0
//只能帮你到这了
$("input[type=button]").live("click",function(){
    var td=$(this).closest("tr").find("td");
    
    $.each(td,function(index,element){
        
    });
});
MrNice | 园豆:3450 (老鸟四级) | 2015-12-18 10:00

和我想要的结果好像不一样。。

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 10:06

@伊夏丶: 你想怎么做,根据id再向后台读取?你这table中的值是怎么获取的?

支持(0) 反对(0) MrNice | 园豆:3450 (老鸟四级) | 2015-12-18 10:24

@MrNice:sql语句获取的啊,显示在table,我点击详情,是在第二个页面的另一个table显示详情的

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 10:33

@伊夏丶: 这个好解决

你这绑定button时给它一个data-id的属性,值就是数据id,当点击button时取出当前button的data-id

的值调用然后跳转到第二页面并加上参数id,第二个页面一加载就根据id取出对应记录显示

支持(0) 反对(0) MrNice | 园豆:3450 (老鸟四级) | 2015-12-18 10:54

@MrNice: 你说的我明白了 

{
                field : 'more',
                title : '详情',
                width : 30,
                formatter : function(value, rowData,rowIndex) {
                    return "<a href=\"javascript:void(0)\" onclick=\"More('"
                    + rowData.More
                    + "')\">详情</a>";
                    },
            }

但是我的按钮是超链接这样的 不能绑定id啊  要是绑定了就都是那个id的数据了

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 11:03

@MrNice: 我写input type="button" 只是举个例子 因为都是要写onclick事件的

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 11:04

@伊夏丶: 

{
                field : 'more',
                title : '详情',
                width : 30,
                formatter : function(value, rowData,rowIndex) {
                    return "<a href=\"javascript:void(0)\" +"data-id="+rowData.ID+"onclick=\"More('"
                    + rowData.More
                    "')\">详情</a>";
                    },
            }
//jquery取值就是这么取,我这么选取你根据自己实际情况
$("a").live("click",function(){
      var id=    $(this).data("id");
      alert(id);
});
支持(0) 反对(0) MrNice | 园豆:3450 (老鸟四级) | 2015-12-18 11:12

@MrNice:按你直接写的报错 我改成 id=\"'"+rowData.ID+"'\"  下面的jquery又报错$(...).live is not a function 好像是我写错了

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 14:38

@伊夏丶: 写错那估计是我拼错了

支持(0) 反对(0) MrNice | 园豆:3450 (老鸟四级) | 2015-12-18 15:15

@MrNice: 但是下面那段是我写错地方了吗 报错$(...).live is not a function

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 15:16

@伊夏丶: 那就把live换成on

支持(0) 反对(0) MrNice | 园豆:3450 (老鸟四级) | 2015-12-18 15:19
0

你只获取那一行的id值 去后台读取就可以啦

老沙沙沙 | 园豆:187 (初学一级) | 2015-12-18 10:06

我想用jquey ajax获取 然后在另一个页面显示 要是后台读取又费一步

支持(0) 反对(1) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 10:08

还有  怎么用jqueryajax获取我也不是很清楚

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 10:10

@伊夏丶: 这跟ajax 没什么关系吧

$("table").on("click","input[type=button]",function(){

var tds=$(this).closest("tr").children("td");

var name = tds.eq(0).text();

...

})

支持(0) 反对(0) 老沙沙沙 | 园豆:187 (初学一级) | 2015-12-18 10:17

@老沙沙沙: = =我就这样举个例子 我实际用的是easyui的DataGrid 最后的详情也不是按钮是超链接,不过写的事件都是一样的。我就想知道遇到这种问题该怎么做,学会就好了

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 10:24
0

你做的是什么页面呀? 纯HTML么。。

搁忆 | 园豆:612 (小虾三级) | 2015-12-18 11:49

页面就纯htnl  js单独写的

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 14:25

@伊夏丶: http://blog.csdn.net/caoyuan10036/article/details/7227214 ,你去看看,页面传值的

支持(0) 反对(0) 搁忆 | 园豆:612 (小虾三级) | 2015-12-18 14:34

@搁忆: 我想用 xxx.jsp?id=..&name=..这样的

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-18 15:17

@伊夏丶:http://ask.csdn.net/questions/178524

支持(0) 反对(0) 搁忆 | 园豆:612 (小虾三级) | 2015-12-18 15:32
0

首先对于这种操作表格总的一行或者一列,肯定是要使用事件捕获的。

$('#tableid').click(function(event){

if(event.target === 一行的标记){

 event.target//获取一行的信息,调用ajax方法:

$.ajax({});

}

})

收获园豆:15
xingoo | 园豆:711 (小虾三级) | 2015-12-20 10:49

不会event。。

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-21 09:42

@伊夏丶: 这个是必须要会的,要不然你要给每一行加事件么?

支持(0) 反对(0) xingoo | 园豆:711 (小虾三级) | 2015-12-21 13:38

@xingoo: 我现在是通过点击 详情 然后获取  

{ field : 'more', title : '详情', width : 30, formatter : function(value, rowData,rowIndex) { return "<a href=\"javascript:void(0)\" onclick=\"More('" + rowData.More + "')\">详情</a>"; }, }我每一行都有这个超链接,不用用event吧

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-21 15:08

@伊夏丶: 你是直接设置onclick属性了,这样有点不解耦.....效果确实是一样的

支持(0) 反对(0) xingoo | 园豆:711 (小虾三级) | 2015-12-22 15:46
0

来晚了,分没了。看你怎么绑定的数据,1、model直接绑定数据,只能通过Id找到那一行,然后遍历每个td,获取text();2、Ajax获取数据绑定,获取数据后,保存在一个数组变量中,通过id去这个变量中拿数据。

Engineer | 园豆:331 (菜鸟二级) | 2015-12-25 10:19

表格我是在js用easyui的datagrid写的

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-25 10:51

@伊夏丶: onSelect事件

当用户选择一行时触发,参数如下:
rowIndex:被选择的行索引,从0开始。
rowData:对应于被选择行的记录。

支持(0) 反对(0) Engineer | 园豆:331 (菜鸟二级) | 2015-12-25 10:59

@Engineer: 我现在差不多这样写的 获取row 再传到别的页面

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2015-12-25 11:14
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册