Question

<table>
    <thead> 
        <tr>
            <th>Name</th>
            <th>Address</th>
        </tr>
    </thead> 
    <tbody>
        <tr>
            <td>Bob</td>
            <td>300 Wacker Drive</td>
        </tr>
    </tbody>
</table>

如果我点击Bob，我想取回值“Name”。我怎么能用jQuery做到这一点？

Answer 1

是。点击td

var thVal = $(this).closest('table').find('th').eq( this.cellIndex).text();
alert(thVal);

Answer 2

我做了这个小提琴来模拟桌子上的ajax调用，但我觉得你的工作非常适合http://jsfiddle.net/ncubica/Umxjb/

在您的情况下，您可以将data-id属性更改为data-name="bob"并使用$target.attr("data-name")

请求值

HTML

<i style='display:none' id="loadingPopup">Loading</i>
<table>
    <tr>
        <td data-id="td1"> row 1</td>
    </tr>        
   <tr>        
        <td data-id="td2"> row 2</td>
    </tr>
    <tr>
        <td data-id="td3"> row 3</td>
    </tr>        
</table>

JS

$("table").on("click", function(event){
    var $target = $(event.target); 
    if($target.is("td")){
        var id = $target.attr("data-id");
        makeAjax(id);
    }
});

//simulating ajax

function makeAjax(id){
    //you will have to use ajax an retrieve you json format
    //i will simulate ajax only
    $("#loadingPopup").show();
    var _json = { id : id, value : "some value", description : "some description"};
    setTimeout(function(){response(_json)}, 1000);
}

function response(_json){
    $("#loadingPopup").hide();    
    alert(_json.id + " - " + _json.value);
}

CSS

table{font-family:arial; font-size:12px; width:100%}
table tr td{border-bottom:1px solid #CCC; padding:10px; 100%}

快乐的编码!!

检测表单击中的值

2 个答案: