jquery对表格一列按钮单击事件操作,拿到所在行的id列的值

时间:2021-05-13 10:17:18
jquery对表格一列按钮单击事件操作,拿到所在行的id列的值
怎样能用jquery在点击一个修改按钮时拿到按钮所在行的编号id呢?按钮我用的是
类选择器,也可以用其他的,只要能实现功能就行..,哪位朋友能给个思路?谢谢了

4 个解决方案

#1



<table>
<tr>
<td>1</td>
<td>aaa</td>
<td>xxx</td>
<td><button class="btn">修改</button></td>
</tr>
<tr>
<td>3</td>
<td>bbb</td>
<td>xxxx</td>
<td><button class="btn">修改</button></td>
</tr>
<tr>
<td>7</td>
<td>ccc</td>
<td>xxx</td>
<td><button class="btn">修改</button></td>
</tr>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
var id = $(this).parents("tr").children("td:nth-child(1)").text();
alert(id)
})
})
</script>

#2



  $(".btn").click(function () {

                alert($(this).parents("tr").children("td:nth-child(1)").text()+"--child");

                alert($(this).parents("tr").children("td").first().text()+"--first");

            });

#3


jquery对表格一列按钮单击事件操作,拿到所在行的id列的值赚分不容易啊 呵呵 我也贴个 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
    $("table tr").find('td:last').click(function(){
        var id = $(this).parents("tr").find('td:first').text();
        alert(id)
    })
})
</script>
</head>

<body>
<table>
    <tr>
        <td>1</td>
        <td>aaa</td>
        <td>xxx</td>
        <td>修改</td>
    </tr>
    <tr>
        <td>3</td>
        <td>bbb</td>
        <td>xxxx</td>
        <td>修改</td>
    </tr>
    <tr>
        <td>7</td>
        <td>ccc</td>
        <td>xxx</td>
        <td>修改</td>
    </tr>
</table>

</body>

</html>


#4


结贴喽,谢谢了

#1



<table>
<tr>
<td>1</td>
<td>aaa</td>
<td>xxx</td>
<td><button class="btn">修改</button></td>
</tr>
<tr>
<td>3</td>
<td>bbb</td>
<td>xxxx</td>
<td><button class="btn">修改</button></td>
</tr>
<tr>
<td>7</td>
<td>ccc</td>
<td>xxx</td>
<td><button class="btn">修改</button></td>
</tr>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
var id = $(this).parents("tr").children("td:nth-child(1)").text();
alert(id)
})
})
</script>

#2



  $(".btn").click(function () {

                alert($(this).parents("tr").children("td:nth-child(1)").text()+"--child");

                alert($(this).parents("tr").children("td").first().text()+"--first");

            });

#3


jquery对表格一列按钮单击事件操作,拿到所在行的id列的值赚分不容易啊 呵呵 我也贴个 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
    $("table tr").find('td:last').click(function(){
        var id = $(this).parents("tr").find('td:first').text();
        alert(id)
    })
})
</script>
</head>

<body>
<table>
    <tr>
        <td>1</td>
        <td>aaa</td>
        <td>xxx</td>
        <td>修改</td>
    </tr>
    <tr>
        <td>3</td>
        <td>bbb</td>
        <td>xxxx</td>
        <td>修改</td>
    </tr>
    <tr>
        <td>7</td>
        <td>ccc</td>
        <td>xxx</td>
        <td>修改</td>
    </tr>
</table>

</body>

</html>


#4


结贴喽,谢谢了