JQuery如何获取第二和第三TD内容取决于第四TD点击

JQuery how to fetch 2nd and 3rd TD content depend on 4th td click

本文关键字：TD 点击 取决于 何获取 获取 JQuery      更新时间：2023-09-26

这里的html标记有一个表，我需要获取点击td的内容，并将其保存到隐藏字段。
JS FIDDLE DEMO

Html标记: 

<table>
    <tr style="color:#333333;background-color:#F7F6F3;" class="odd">
        <td style="width:70px;" class="  sorting_1">1</td>
        <td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">Customer Relations</span> 
        </td>
        <td>one</td>
        <td align="center" style="width:80px;" class=" ">
            <img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_1" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
        </td>
        <td class=" "><a href="abc.aspx?id=1">View Details</a> 
        </td>
    </tr>
    <tr style="color:#333333;background-color:#F7F6F3;" class="odd">
        <td style="width:70px;" class="  sorting_1">2</td>
        <td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">Marketing </span>
        </td>
        <td>two</td>
        <td align="center" style="width:80px;" class=" ">
            <img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_2" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
        </td>
        <td class=" "><a href="abc.aspx?id=3">View Details</a>
        </td>
    </tr>
    <tr style="color:#333333;background-color:#F7F6F3;" class="odd">
        <td style="width:70px;" class="  sorting_1">3</td>
        <td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">General</span>
        </td>
        <td>three</td>
        <td align="center" style="width:80px;" class=" ">
            <img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_3" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
        </td>
        <td class=" "><a href="abc.aspx?id=3">View Details</a>
        </td>
    </tr>
</table>
<input id="hdid" type="hidden" />
<input id="hdcol2" type="hidden" />
<input id="hdcol3" type="hidden" />
JavaScript: 

$("img[class^='update_']").live('click', function (event) {
    var getId = $(this).attr("class")
    $("#hdid").val(getId);
    alert(getId)
});

$(this).closest('tr').find('td').eq(1).text();

和

$(this).closest('tr').find('td').eq(2).text();

Demo -----> http://jsfiddle.net/bpGXp/19/

更新一个-----> http://jsfiddle.net/bpGXp/21/(不含空格)

看这里:http://jsfiddle.net/bpGXp/18/

$("img[class^='update_']").live('click', function (event) {
    var tr = $(this).closest("tr");
    var tds = $(tr).find("td");
    alert($(tds[0]).text() + " | " + $(tds[1]).text() + " | " + $(tds[2]).text());
    //save col1, col2 and col3 values where you need it
});

希望有所帮助

相关文章：