如何单击表行调用模式除了一个列单元格

时间:2013-12-09 06:06:36

标签: jquery twitter-bootstrap

借用其他问题How can i show data using a modal when clicking a table row (using bootstrap)

中的代码

我修改了一点,这是一个新问题:

我正在使用一列选择设置值(状态),每次我尝试选择值并设置它,因为整行调用模态,这个单元格也是如此,如何确保表行仍然调用模态,但是当我在Status列中选择任何单元格时,我可以设置值(没有模态显示)?这可能吗?

HTML:     

订单

<table class="table table-striped" <thead>
<tr>
    <th>ID</th>
    <th>Customer</th>
    <th>Status</th>
</tr>
</thead>
<tbody>
    <tr data-toggle="modal" data-id="1" data-target="#orderModal">
        <td>1</td>
        <td>24234234</td>
        <td>
            <select>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
        </td>
    </tr>
    <tr data-toggle="modal" data-id="2" data-target="#orderModal">
        <td>2</td>
        <td>24234234</td>
        <td>
            <select>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
        </td>
    </tr>
    <tr data-toggle="modal" data-id="3" data-target="#orderModal">
        <td>3</td>
        <td>24234234</td>
        <td>
            <select>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
        </td>
    </tr>
</tbody>
</table>
<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3>Order</h3>

</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>

JS:

$(function(){
$('#orderModal').modal({
    keyboard: true,
    backdrop: "static",
    show:false,

}).on('show', function(){
      var getIdFromRow = $(event.target).closest('tr').data('id');
    //make your ajax call populate items or what even you need
    $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow  + '</b>'))
});

});

这是jsfiddle:http://jsfiddle.net/bootstrap1987/padA5/

谢谢,

0 个答案:

没有答案