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

ボブをクリックすると、値「名前」が返されます。jQueryを使用してこれを行うにはどうすればよいですか?

4

2 に答える 2

0

テーブルを介した 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%}

ハッピーコーディング!!

于 2013-07-11T15:25:06.720 に答える