使用按钮传递td数据

我有一张表，我想给用户选择的能力。我在行的开头添加了一个按钮value =“Update”，并分配了一个onclick值。我的问题是我想从行中发送其他项目（在同一行上的td> s）到按钮所调用的函数。使用按钮传递td数据

如何从按钮所在行获取信息？我想将“名称”和“上次更新时间”传递给按钮调用的函数。我尝试使用以下：

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

但它返回“不确定”，这我并不惊讶，因为我认为这是由于它不知道从拉什么行的表。

下面是表的视图： enter image description here 下面是表后面的代码：

<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>

任何帮助，将不胜感激。

来源

2014-09-19 ljman711

'attr（'text'）'不起作用。你可以使用'.text（）'。你也可以使用'$（this）'而不是使用选择器，因为'this'的值将是按钮上下文。 – bencripps 2014-09-19 16:47:08

如何将它们添加为按钮调用的JavaScript函数的参数？ – andrex 2014-09-19 17:04:53

拥抱这个的力量。

使用：

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查找值元素。

来源

2014-09-19 16:49:31

这很好。我不必为此修改很多代码，而且您还提供了包含引用的“d1”的合适方法。我不知道“数据”选项，这非常有启发性，我会使用它。我也将这个项目标记为一个。我使用提供的代码从TD获取详细信息，这节省了时间，因为我不想在多个地方添加数据。原始表格是通过JavaScript构建的，包含近9K行，包括子行，不希望增加构建时间。非常感谢你！！ – ljman711 2014-09-19 20:53:57

//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 
}

来源

2014-09-19 16:49:50 plalx

我试过这个，不能让它工作。就好像听众不接电话一样。我把它插入到准备好的部分以及在函数之前无效。我欣赏帮助。 – ljman711 2014-09-19 20:58:46

我建议你使用普通的类来处理所有的更新按钮和常见的点击事件处理程序。

这里是小提琴：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); 
})

来源

2014-09-19 16:51:21 zavg

这和上面的代码很好地结合在一起。获得'td'信息的能力非常有用。谢谢！ – ljman711 2014-09-19 20:55:05

@ ljman711欢迎您！ – zavg 2014-09-19 21:41:47

我会做如下：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()); 

    }); 

});

来源

2014-09-19 16:58:04

<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函数调用为什么不包括你需要正确的事情？

这是简单但不是最佳实践。

来源

2014-09-19 17:07:47 andrex

使用按钮传递td数据

回答

相关问题