Question

我有一个表，我想让用户能够选择。我在行的开头添加了一个按钮value =“Update”，并分配了一个onclick值。我的问题是我想从行向按钮调用的函数发送其他项目（在同一行的td＆gt; s）。

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

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

但它返回“undefined”，我并不感到惊讶，因为我认为这是因为它不知道要从哪一行拉出来。

以下是该表的视图： 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>

任何帮助都将不胜感激。

Answer 1

拥抱此的力量。

使用：

onclick="UpdateRec(this)"

..在你的函数中：

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函数调用，为什么不只是包含你需要的东西呢？

这是更简单但不是最佳做法。

使用按钮传递td数据

5 个答案: