使用按鈕傳遞td數據

Question

我有一張表，我想給用戶選擇的能力。我在行的開頭添加了一個按鈕value =「Update」，並分配了一個onclick值。我的問題是我想從行中發送其他項目（在同一行上的td> s）到按鈕所調用的函數。

如何從按鈕所在行獲取信息？我想將「名稱」和「上次更新時間」傳遞給按鈕調用的函數。我嘗試使用以下：

$("#Report input[name=btn_id]").closest('td').attr('text') 

但它返回「不確定」，這我並不驚訝，因爲我認爲這是由於它不知道從拉什麼行的表。

下面是表的視圖： 下面是表後面的代碼：

<table align="center" border="1" class="report" id="report"> 
<thead> 
    <tr> 
     <th width="75">Update</th> 
     <th width="500">Name</th> 
     <th width="50">Info</th> 
     <th width="100">location</th> 
     <th width="100">Last Update Time</th> 
    </tr> 
</thead> 
<tbody> 
    <tr class="parent" id="other_app"> 
     <td align="center"> 
      <input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)"> 
     </td> 
     <td name="App_Name">Test1</td> 
     <td align="center">None</td> 
     <td align="center">Desktop</td> 
     <td align="center">2014-06-30 18:22:39</td> 
    </tr> 
    <tr class="parent" id="other_app"> 
     <td align="center"> 
      <input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)"> 
     </td> 
     <td name="App_Name">Test1</td> 
     <td align="center">None</td> 
     <td align="center">Server</td> 
     <td align="center">2014-03-30 16:20:15</td> 
    </tr> 
</tbody> 

任何幫助，將不勝感激。

Answer 1

擁抱這個的力量。

使用：

onclick="UpdateRec(this)" 

..in你的函數：

function UpdateRec(el) { 
    var targetRow = $(el).parents('tr') 
    ... 
} 

使用這傳遞到點擊的元素的引用。然後你可以使用jQuery來選擇父錶行。從那裏你可以使用.find（）來選擇該行中的任何內容。

另一種方式來做到這一點是使用HTML5數據 - 屬性，這個按鈕本身：

<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" /> 

在同樣的功能，那麼你可以使用$(el).data('appName')直接獲得的價值，而不在其他的DOM查找值元素。

Answer 2

//Add a click listener on all your buttons using event delegation 
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]'); 

function onUpdateButtonClicked() { 
    var rowValues = $(this) 
     .parent() //select parent td 
     .nextAll() //select all next siblings of that parent td 
     .map(function() { //loop through the tds, collecting their text value 
      return $(this).text(); 
     }).get(); //return the result as an array 

    //do what you want with rowValues 
} 

Answer 3

我建議你使用普通的類來處理所有的更新按鈕和常見的點擊事件處理程序。

這裏是小提琴：http://jsfiddle.net/jwet6z6x/

HTML：

<table align="center" border="1" class="report" id="report"> 
<thead> 
    <tr> 
     <th width="75">Update</th> 
     <th width="500">Name</th> 
     <th width="50">Info</th> 
     <th width="100">location</th> 
     <th width="100">Last Update Time</th> 
    </tr> 
</thead> 
<tbody> 
    <tr class="parent" id="other_app"> 
     <td align="center"> 
      <input class="updateBtn" type="button" name="btn_id" value="Update"> 
     </td> 
     <td name="App_Name">Test1</td> 
     <td align="center">None</td> 
     <td align="center">Desktop</td> 
     <td align="center">2014-06-30 18:22:39</td> 
    </tr> 
    <tr class="parent" id="other_app"> 
     <td align="center"> 
      <input class="updateBtn" type="button" name="btn_id" value="Update"> 
     </td> 
     <td name="App_Name">Test1</td> 
     <td align="center">None</td> 
     <td align="center">Server</td> 
     <td align="center">2014-03-30 16:20:15</td> 
    </tr> 
</tbody> 

的Javascript：

$(".updateBtn").click(function(){ 
    var name = $(this).parent().parent().find('td').eq(1).html() 
    var time = $(this).parent().parent().find('td').eq(4).html() 
    alert (name); 
    alert (time); 
}) 

Answer 4

我會做如下：http://jsfiddle.net/Lk91cpup/2/

<table> 
<tr id="row_1"> 
    <td> 
     <input type="button" id="btn_row_1" class="btn" value="Update"> 
    </td> 
    <td id="text_row_1">Test1</td> 
    <td>None</td> 
    <td>Desktop</td> 
    <td >2014-06-30 18:22:39</td> 
</tr> 
<tr id="row_2"> 
    <td> 
     <input type="button" id="btn_row_2" class="btn" value="Update"> 
    </td> 
    <td id="text_row_2">Test2</td> 
    <td>None</td> 
    <td>Server</td> 
    <td>2014-03-30 16:20:15</td> 
</tr> 
    </table> 

和JavaScript

$(document).ready(function(){ 

    $(".btn").click(function(){ 

     var id = this.id.substring(this.id.lastIndexOf("_") + 1); 

     alert($("#text_row_" + id).text()); 

    }); 

}); 

Answer 5

<tr class="parent" id="other_app"> 
    <td align="center"> 
     <input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')"> 
    </td> 
    <td name="App_Name">Test1</td> 
    <td align="center">None</td> 
    <td align="center">Desktop</td> 
    <td align="center">2014-06-30 18:22:39</td> 
</tr> 

既然你已經寫了一個javascript函數調用爲什麼不包括你需要正確的事情？

這是簡單但不是最佳實踐。