67,513
社区成员
发帖
与我相关
我的任务
分享求大神帮忙解决jquery中取table里tr td的值
首先我的表中数据都是通过ajax在js中获取的，代码如下：
$.ajax({
url:"http://localhost:8080/hospital/loadPatient.do",
type:"post",
resultType:"json",
success:function(result){
var patients=result.data;
$.each(patients,function(i,patient){
var li='<tr><td style="display:none;">'+patient.p_id+'</td><td class="center"> <label class="position-relative"> <input type="checkbox" class="ace" /> <span class="lbl"></span> </label> </td>'
var li=li+'<td>'+patient.p_name+'</td> <td>'+patient.p_sex+'</td> <td class="hidden-480">'+patient.p_phone+'</td> <td>'+patient.p_idcard+'</td>'
var li=li+'<td class="hidden-480"> <span class="label label-sm label-warning">'+patient.p_date+'</span> </td>'
var li=li+'<td>查看详情</td>'
var $li=$(li);
$li.data("p_id",patient.p_id);
$("#sample-t2").append($li);
})
}
})
第一处标红是为了方便取id,在前台隐藏的属性， 那么问题来了，当我下一次使用id的时候我在js中，应该怎么取，网上很多都只能取到第一条数据的id，在点击第二行还是取得第一条数据的id。
第二处标红是为了在点击是可以跳进某个js中，当我不会用元素选择器把他选中，这里应该怎么选，
声明一下，所有的数据都是从数据库中遍历出来的，所以不太会，希望答主回答是注意一下；
$.ajax({
url:"http://localhost:8080/hospital/loadPatient.do",
type:"post",
resultType:"json",
success:function(result){
var patients=result.data;
$.each(patients,function(i,patient){
var li='<tr><td style="display:none;">'+patient.p_id+'</td><td class="center"> <label class="position-relative"> <input type="checkbox" class="ace" /> <span class="lbl"></span> </label> </td>'
var li=li+'<td>'+patient.p_name+'</td> <td>'+patient.p_sex+'</td> <td class="hidden-480">'+patient.p_phone+'</td> <td>'+patient.p_idcard+'</td>'
var li=li+'<td class="hidden-480"> <span class="label label-sm label-warning">'+patient.p_date+'</span> </td>'
var li=li+'<td>查看详情</td>'
var $li=$(li);
$li.data("p_id",patient.p_id);
$("#sample-t2").append($li);
})
}
})
第一处标红是为了方便取id,在前台隐藏的属性， 那么问题来了，当我下一次使用id的时候我在js中，应该怎么取，网上很多都只能取到第一条数据的id，在点击第二行还是取得第一条数据的id。
第二处标红是为了在点击是可以跳进某个js中，当我不会用元素选择器把他选中，这里应该怎么选，
声明一下，所有的数据都是从数据库中遍历出来的，所以不太会，希望答主回答是注意一下；
...全文
请发表友善的回复…
发表回复
Braska 2018-01-29
- 打赏
- 举报
除非你的dom结构有问题，不然应该没错啊 你参考下我的demo。
<body>
<table id="sample" border="1"></table>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="javascript">
for (var i = 0;i < 10; i++) {
var li= '<tr><td style="display:none;">'+i+'</td><td class="center"> <label class="position-relative"> <input type="checkbox" class="ace" /> <span class="lbl"></span> </label> </td>'
li += '<td>'+'name'+i+'</td> <td>'+'sex'+i+'</td> <td class="hidden-480">'+'phone'+i+'</td> <td>'+'idcard'+i+'</td>'
li += '<td class="hidden-480"> <span class="label label-sm label-warning">'+'date'+i+'</span> </td>'
li += '<td> <div class="hidden-sm hidden-xs btn-group"> <button class="btn btn-xs btn-info"><i class="ace-icon fa fa-pencil bigger-120"></i></button><button class="btn btn-xs btn-danger" onclick="deletePat(this)"> <i class="ace-icon fa fa-trash-o bigger-120"></i></button><button class="btn btn-xs btn-warningls" onclick="addtrade(this)"><i class="ace-icon fa fa-flag bigger-120"></i> </button><button class="btn btn-xs btn-success"><i class="ace-icon fa fa-check bigger-120"></i></button></div></td>'
li += '<td><a onclick="getId(this)">查看详情</a></td></tr>';
$li = $(li)
$li.data("p_id", i);
$('#sample').append($li);
}
$('.btn').on('click', function() {
var tr = $(this).parents('tr');
alert($(tr).data('p_id'))
})
function getId(obj) {
alert($(obj).parent("td").siblings().eq(0).text());
//-====或者
var tr = $(obj).parents("tr")
console.log($(tr).data("p_id"))
//====
}
</script>
三线城市程序员 2018-01-29
- 打赏
- 举报
$('.btn').on('click', function() {
var tr = $(this).parents('tr');
alert($(tr).data('p_id'))
})
Braska 2018-01-29
- 打赏
- 举报
$('.btn').on('click', function() {
var tr = $(this).parents('tr');
alert($(tr).data('p_id'))
})
三线城市程序员 2018-01-29
- 打赏
- 举报
$('.btn').on('click', function() {
var tr = $(this).parents('tr');
alert($(tr).data('p_id'))
})
渣渣辉 2018-01-26
- 打赏
- 举报
在里面写个ID再用jQuery id选择器获取
三线城市程序员 2018-01-26
- 打赏
- 举报
如果我在上面的基础上又加了一个td,里面是由4个button组成，那我又该如何点击button获得当前这行的id呢，td代码如下：
<td> <div class="hidden-sm hidden-xs btn-group"> <button class="btn btn-xs btn-info"><i class="ace-icon fa fa-pencil bigger-120"></i></button><button class="btn btn-xs btn-danger" onclick="deletePat(this)"> <i class="ace-icon fa fa-trash-o bigger-120"></i></button><button class="btn btn-xs btn-warningls" onclick="addtrade(this)"><i class="ace-icon fa fa-flag bigger-120"></i> </button><button class="btn btn-xs btn-success"><i class="ace-icon fa fa-check bigger-120"></i></button></div></td>
Braska 2018-01-26
- 打赏
- 举报
$('.btn').on('click', function() {
var tr = $(this).parents('tr');
alert($(tr).data('p_id'))
})
Sunyiban 2018-01-25
- 打赏
- 举报
$("table tr").click(function(){
console.info(this.outerHTML);// 自己根据需要拿取this中的属性
});
Braska 2018-01-25
- 打赏
- 举报
<body>
<table id="sample" border="1"></table>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="javascript">
for (var i = 0;i < 10; i++) {
var li= '<tr><td style="display:none;">'+i+'</td><td class="center"> <label class="position-relative"> <input type="checkbox" class="ace" /> <span class="lbl"></span> </label> </td>'
li += '<td>'+'name'+i+'</td> <td>'+'sex'+i+'</td> <td class="hidden-480">'+'phone'+i+'</td> <td>'+'idcard'+i+'</td>'
li += '<td class="hidden-480"> <span class="label label-sm label-warning">'+'date'+i+'</span> </td>'
li += '<td><a onclick="getId(this)">查看详情</a></td></tr>';
$li = $(li)
$li.data("p_id", i);
$('#sample').append($li);
}
function getId(obj) {
alert($(obj).parent("td").siblings().eq(0).text());
//-====或者
var tr = $(obj).parents("tr")
console.log($(tr).data("p_id"))
//====
}
</script>
葛芮拉 2018-01-25
- 打赏
- 举报
或者直接用$(".label label-sm label-warning").text()取值
葛芮拉 2018-01-25
- 打赏
- 举报
点击详情可已加一个<a onclick="detail(this)">你的id值</a>
js里：
function detail(object){
alert(object.innerText);
}
三线城市程序员 2018-01-25
- 打赏
- 举报
能具体一些吗
葛芮拉 2018-01-25
- 打赏
- 举报
点击事件里用this.value不就取到了？
