Question

我有一个表格中的元素列表。如果单击一个按钮，弹出一个模态并在该模态中显示一些内容，我需要获取被单击的元素的id。我怎么能这样做？

<div id="collapseOne" class="accordion-body collapse">
    <div class="accordion-inner">
        <form action="" method="post">
            <table class="table">
                <thead>
                    <tr>
                        <td width="25%"><strong>Options</strong></td>
                        <td width="25%"><strong>Block id</strong></td>
                        <td width="25%"><strong>Block type</strong></td>
                        <td width="25%"><strong>Block order</strong></td>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>
                            <button data-toggle="modal" id="editBlockBtn" data-target="#editBLock" data-block-id="8" class="btn btn-warning btn-mini"></button> 
                            <button data-toggle="modal" id="editBlockBtn" data-target="#deleteBlock" data-block-id="8" class="btn btn-danger btn-mini"></button></td>
                        <td>8</td>
                        <td>image</td>
                        <td>1</td>
                    </tr>

                    <tr>
                        <td>
                            <button data-toggle="modal" id="editBlockBtn" data-target="#editBLock" data-block-id="9" class="btn btn-warning btn-mini"></button> 
                            <button data-toggle="modal" id="deleteBlockBtn" data-target="#deleteBlock" data-block-id="9" class="btn btn-danger btn-mini"></button></td>
                        <td>9</td>
                        <td>image</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
</div>

Answer 1

您可以再次将ID写入每个按钮的数据属性中。然后使用jquery的数据方法轻松访问。像这样：

PHP：

<button data-toggle="modal" data-target="#editBLock" data-block-id="<?php echo $block['id']; ?>" class="btn btn-warning btn-mini"><i class="icon-edit icon-white"></i></button>

JavaScript的：

$('button').click(function() {
   var clickedId = $(this).data('block-id');
});

如果您无法更改PHP代码，并且表格中的结构已修复，您可以这样做：

$('button').click(function() {
   var clickedId = $(this).parent().next('td').text();
});

Answer 2

首先： id=""是唯一的，您不能在两个元素中使用它两次。所以将这些更改为类：editBlockBtn和deleteBlockBtn。

所以，如果你想获得<td>的内容，最好为它们添加一个类：

<td class="Block-id">9</td>
<td class="Block-type">image</td>
<td class="Block-order">2</td>

现在您可以轻松获取closest() <tr>父级（或只使用parent()）：

$('.editBlockBtn').click(function() {
    var parentTr = $(this).closest('tr');
});

然后你可以得到内容：

var block_id = parentTr.find('.Block-id').text();
var block_type = parentTr.find('.Block-type').text();
var block_order = parentTr.find('.Block-order').text();

演示：http://jsfiddle.net/gbpkxbvv/

从带有模态的单击按钮获取值

2 个答案: