JQuery如何获取第2和第3个TD内容取决于第4个td点击

时间:2013-06-19 12:04:29

标签: javascript jquery

这里的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)
});

2 个答案:

答案 0 :(得分:2)

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

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

演示-----> http://jsfiddle.net/bpGXp/19/

更新了一个-----> http://jsfiddle.net/bpGXp/21/(没有空格)

答案 1 :(得分:1)

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

<强> CODE

$("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
});

希望有所帮助