Question

当用户点击某行时，我想从该行中提取特定信息并填充标签和输入控件。如何使用jQuery获取表格行的单元格的值并将其放入标签？

<table id="searchTable" class="display JColResizer">
    <thead><tr class="tableHeader" style="background-color: rgb(238, 238, 238);">
        <td style="width: 99px;">Parcel</td>
        <td style="width: 80px;">Account</td>
        <td style="width: 158px;">Owner</td>
        <td style="width: 158px;">In Care Of</td>
        <td style="width: 158px;">Situs Address</td>
        <td style="width: 158px;">Situs City, State, Zip</td>
        <td style="width: 158px;">Mailing Address</td>
        <td style="width: 158px;">Mailing City, State, Zip</td>
        <td style="width: 158px;">Reponse Code</td>
        <td style="width: 158px;">Initial Mail Date</td>
        <td style="width: 160px;">Reclass Mail Date</td>
    </tr></thead>
    <tbody><tr id="123">
        <td>21753566</td>
        <td></td>
        <td>10101 N ARABIAN TRAIL LLC</td>
        <td></td>
        <td>10101 N ARABIAN TR 2023</td>
        <td>SCOTTSDALE AZ  85258</td>
        <td>5 TRENTON CT </td>
        <td>SOUTH BARRINGTON IL  60010</td>
        <td>Qualified Family Member</td>
        <td>2013-03-21</td>
        <td></td>
    </tr>
    <tr id="234">
        <td>21753566</td>
        <td></td>
        <td>10101 N ARABIAN TRAIL LLC</td>
        <td></td>
        <td>10101 N ARABIAN TR 2023</td>
        <td>SCOTTSDALE AZ  85258</td>
        <td>5 TRENTON CT </td>
        <td>SOUTH BARRINGTON IL  60010</td>
        <td>Qualified Family Member</td>
        <td>2013-03-21</td>
        <td></td>
    </tr>
    <tr id="345">
        <td>21753566</td>
        <td></td>
        <td>10101 N ARABIAN TRAIL LLC</td>
        <td></td>
        <td>10101 N ARABIAN TR 2023</td>
        <td>SCOTTSDALE AZ  85258</td>
        <td>5 TRENTON CT </td>
        <td>SOUTH BARRINGTON IL  60010</td>
        <td>Qualified Family Member</td>
        <td>2013-03-21</td>
        <td></td>
    </tr></tbody>           
</table>

Answer 1

http://jsfiddle.net/oypu8Lmz/

$('#mytable tr').click(function(){
    //finding all cell in clicked row
    $(this).find('td').each(function(ind,obj){
        //set cell value in input
        $('.cell').eq(ind).val($(this).text());
    })
})

Answer 2

您是否尝试过为所有td元素设置onclick？

<input type="text" id="textInput">    
    <table>
        <tr>
            <td onclick="fieldClicked(this);">Contents</td>
            <td onclick="fieldClicked(this);">Whatever</td>
        </tr>
    </table>

然后是一个javascript函数，如：

function fieldClicked(target)
{
    $("#textInput").val($(target).html());
}

或者说如果用户点击一行，你想要一行中两个td元素的值：

<input type="text" id="textInput">    
<table>
    <tr onclick="rowClicked(this);">
        <td>FirstName</td>
        <td>LastName</td>
    </tr>
</table>

使用javascript函数：

function rowClicked(target) 
{
    var firstName = $(target).children("td").eq(0).html();
    var lastName = $(target).children("td").eq(1).html(); 
    $("#textInput").val("Selected name is: "+firstName+" "+lastName); 
}

如何获取用户单击并将其放入隐藏字段的表行ID的值？

2 个答案: