Question

我想点击<td>内的按钮，点击后获取<td>内的其他<tr>的值这是目前为止的代码：

＆＃13;

        $(document).ready(function(){
    			$('#main').find('tr').on("click", function() {
    				var customerId =  $(this).find('td:eq(1)').text();
    					$('#texti').text(customerId);
    		});
    
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add new list item</button>
        <p>Click the above button to dynamically add new list items. You can remove it later.</p>
    	<table id="main">
        <tr>
            <td>list item 1 </td>
            <td>list item 2 </td>
            <td>list item 3 </td>
    		<td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
        </tr>
    	<tr>
            <td>list item 4</td>
            <td>list item 5</td>
            <td>list item 6</td>
    		<td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
        </tr>
    	<tr>
            <td>list item 7</td>
            <td>list item 8</td>
            <td>list item 9</td>
    		<td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
        </tr>
    	</table>
    	<a name="texti" id="texti"> x </a>

＆＃13;

此代码有效，但我只想按钮执行此操作。在我的代码中，当我单击列表项1，列出项2或列表项3时，它们用作按钮。我不想要那个，我想点击按钮

Answer 1

您的点击事件是针对整行的，因此第一步是将其设为按钮：

$("#main tr input[type='button']").on("click", function() {

然后事件处理程序用于按钮，因此您需要最多行来获取单元格：

$("#main tr input[type='button']").on("click", function() {
    var row = $(this).closest("tr");
    var customerId = row.find('td:eq(1)').text();
    $('#texti').text(customerId);  // assume this is outside the row
});

作为额外的，我建议您通过给它一个类来指明哪个单元格包含您想要的数据，然后您不需要使用索引：

<tr>
    <td>list item 1 </td>
    <td class='data-customerid'>list item 2 </td>
    <td>list item 3 </td>
    <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
</tr>

然后

var customerId = row.find("td.data-customer-id').text();

Answer 2

1.将find('tr')更改为find('tr input')，它只匹配按钮类型。

2. closest函数返回最近的表行（对于我们来说，包含单击按钮的行）。

使用此：

$('#main').find('tr input').on("click", function() {
     var customerId =  $(this).closest('tr').find('td:eq(1)').text();
     $('#texti').text(customerId);
});

这是jsfiddle：solution

Answer 3

1.try $("input[type='button']")只匹配按钮。

2. Video Tutorial。匹配关闭父节点。

3.然后find('td:eq(1)')。如果需要tr的所有值，只需删除find('td:eq(1)')

$(document).ready(function(){
            $("input[type='button']").on("click", function() {
                var customerId =  $(this).closest('tr').find('td:eq(1)').text();
                    $('#texti').text(customerId);
        });

    });

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    <button>Add new list item</button>
    <p>Click the above button to dynamically add new list items. You can remove it later.</p>
    <table id="main">
    <tr>
        <td>list item 1 </td>
        <td>list item 2 </td>
        <td>list item 3 </td>
        <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
    </tr>
    <tr>
        <td>list item 4</td>
        <td>list item 5</td>
        <td>list item 6</td>
        <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
    </tr>
    <tr>
        <td>list item 7</td>
        <td>list item 8</td>
        <td>list item 9</td>
        <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
    </tr>
    </table>
    <a name="texti" id="texti"> x </a>

Answer 4

你应该绑定点击输入而不是tr。遍历每一行并在其上查找输入和绑定事件。

positionPerFrame

Answer 5

您也可以使用：

$(document).ready(function () {
            $('#main').on("click", 'input[type="button"]', function () {
                var customerId = $(this).parent().siblings('td:eq(1)').text();
                $('#texti').text(customerId);
            });

        });

签入fiddle。

Answer 6

尝试按* name属性

选择按钮

$("input[name*='updateBox']").on("click", function() 
{
   var customerId =  $(this).closest('tr').find('td:eq(1)').text();
   $('#texti').text(customerId);
});

Answer 7

更改$('#main').find('tr').on("click", function()...

到

$('#main').find('tr td input').on("click", function()...

单击表格中的td内的按钮并获取其他td值

7 个答案: