jQuery数据表-将行作为变量传递给模式

时间：2020-08-23 13:08:51

标签： javascript jquery datatables

我有一个数据表，在该表上单击编辑图标会打开一个模式窗体，显示受影响行中的数据。

我以模式形式进行更改，然后单击按钮以将更改保存到数据库。
成功更改数据库中的数据后，我想更新数据表中的已编辑行，但是在这里出现错误：“未捕获的TypeError：thisrow.find不是函数”。

这是我的HTML表格：

<table id='myTable1' class='row-border hover' width='100%'>
    <thead>
        <tr>
            <th>Product</th>
            <th>Unit</th>
            <th>Price</th>
            <th>Amount</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>product_01</td>
            <td>5</td>
            <td>39,23</td>
            <td>196,15</td>
            <td><a data-id='176254' data-what='Edit' data-val1='product_01' data-val2='5' data-val2txt='boxes' data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='196.15' data-tit0='line item' data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'><\/i> <\/a></td>
        </tr>
        <tr>
            <td>product_02</td>
            <td>4</td>
            <td>39,23</td>
            <td>156,92</td>
            <td><a data-id='176255' data-what='Edit' data-val1='product_02' data-val2='4' data-val2txt='boxes' data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='156.92' data-tit0='line item' data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'><\/i> <\/a></td>
        </tr>
        <tr>
            <td>product_03</td>
            <td>4</td>
            <td>39,23</td>
            <td>156,92</td>
            <td><a data-id='176256' data-what='Edit' data-val1='product_03' data-val2='4' data-val2txt='boxes' data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='156.92' data-tit0='line item' data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'><\/i> <\/a></td>
        </tr>
        <tr>
            <td>product_04</td>
            <td>3</td>
            <td>39,23</td>
            <td>117,69</td>
            <td><a data-id='176257' data-what='Edit' data-val1='product_04' data-val2='3' data-val2txt='boxes' data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='117.69' data-tit0='line item' data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'><\/i> <\/a></td>
        </tr>
        <tr>
            <td>product_05</td>
            <td>2</td>
            <td>39,23</td>
            <td>78,46</td>
            <td><a data-id='176258' data-what='Edit' data-val1='product_05' data-val2='2' data-val2txt='boxes' data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='78.46' data-tit0='line item' data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'><\/i> <\/a></td>
        </tr>
    </tbody>
</table>



这是我的JS：

$(document).ready(function () {

    var thisrow;
    var button;

    $('#myTable1 tbody').on('click', 'i.fa-edit', function (e) {
        thisrow = kTable.row($(this).parents('tr'));
        button = $(thisrow.data()[4]);                                // [4] contains data-* values
        $('#myModItem').modal("show");
    });

    /* ###########################  MODAL FORM  ################################# */
    $('#myModItem').on('show.bs.modal', function () {
        var id = button.data('id');          
        var val1 = button.data('val1');
        var val2 = button.data('val2');
        var val3 = button.data('val3');
        var modal = $(this);
        modal.find('.val1').text(button.data('tit1'));
        modal.find('.val2').text(button.data('tit2'));
        modal.find('.val3').text(button.data('tit3'));
        // doing other stuff like this
       ...

        // click on button in modal form to save changes
        modal.find("#btn-insert").on("click", function (e) {
            e.preventDefault();                                       // prevent page reload
            var id = modal.find('#id').val();
            var mval2 = modal.find("#val2").val();
            var mval3 = modal.find("#val3").val();

            $.ajax({
                url: "modal/item_update.php",                         // does the database operation
                method: "POST",
                data: {id: id, val2: mval2, val3: mval3},
                success: function (data) {
                    if (data === "") {                                // on success update datatable with new values
                        
                        // here I got the error: 
                        // Uncaught TypeError: thisrow.find is not a function
                        thisrow.find("td:eq(1)").text(mval2);
                        thisrow.find("td:eq(2)").text(mval3);
                    }
                }
            });
            $('.modal').modal('hide');
        });
    });


    var kTable = $('#myTable1').DataTable({
        lengthMenu: [[10, 20, 50, -1], [10, 20, 50, "All"]],
        pageLength: 10,
        autoWidth: false,
        columnDefs: [
            {targets: [0], width: '300px'},
            {targets: [0, 1, 2, 3, 4], orderable: false},
            {targets: [1, 2, 3], className: 'dt-body-right'},
            {targets: [4], className: 'dt-body-center'}
        ]}
    });
});

因此，我的变量“ thisrow”有问题，但我不知道是什么。
有人可以让我朝正确的方向吗？

是的，我不得不说对我来说Javascript / jQuery仍然是我必须发现的世界。

1 个答案:

答案 0 :(得分：1)

您正在使用 thisrow ，因为它是jQuery对象。相反，它是一个数据表行。

要将其转换为jQuery对象（该行），您可以简单地：

var tr = thisrow.nodes().to$();
tr.find("td:eq(1)").text('mval2');
tr.find("td:eq(2)").text('mval3');

有关详细信息，请查看.to$()文档。

var thisrow;
var button;

$('#myTable1 tbody').on('click', 'i.fa-edit', function (e) {
    thisrow = kTable.row($(this).parents('tr'));
    button = $(thisrow.data()[4]);                                // [4] contains data-* values
    $('#myModItem').modal("show");
});

/* ###########################  MODAL FORM  ################################# */
$('#myModItem').on('show.bs.modal', function () {
    var id = button.data('id');
    var val1 = button.data('val1');
    var val2 = button.data('val2');
    var val3 = button.data('val3');
    var modal = $(this);
    modal.find('.val1').text(button.data('tit1'));
    modal.find('.val2').text(button.data('tit2'));
    modal.find('.val3').text(button.data('tit3'));
    // doing other stuff like this...

    // click on button in modal form to save changes
    modal.find("#btn-insert").on("click", function (e) {
        e.preventDefault();                                       // prevent page reload
        var tr = thisrow.nodes().to$();
        tr.find("td:eq(1)").text('mval2');
        tr.find("td:eq(2)").text('mval3');
        $('.modal').modal('hide');
    });
});


var kTable = $('#myTable1').DataTable({
    lengthMenu: [[10, 20, 50, -1], [10, 20, 50, "All"]],
    pageLength: 10,
    autoWidth: false,
    columnDefs: [
        {targets: [0], width: '300px'},
        {targets: [0, 1, 2, 3, 4], orderable: false},
        {targets: [1, 2, 3], className: 'dt-body-right'},
        {targets: [4], className: 'dt-body-center'}
    ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>


<div id="myModItem" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btn-insert">btn-insert</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<table id='myTable1' class='row-border hover' width='100%'>
    <thead>
    <tr>
        <th>Product</th>
        <th>Unit</th>
        <th>Price</th>
        <th>Amount</th>
        <th>Edit</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>product_01</td>
        <td>5</td>
        <td>39,23</td>
        <td>196,15</td>
        <td><a data-id='176254' data-what='Edit' data-val1='product_01' data-val2='5' data-val2txt='boxes'
               data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='196.15' data-tit0='line item'
               data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'></i>
            </a></td>
    </tr>
    <tr>
        <td>product_02</td>
        <td>4</td>
        <td>39,23</td>
        <td>156,92</td>
        <td><a data-id='176255' data-what='Edit' data-val1='product_02' data-val2='4' data-val2txt='boxes'
               data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='156.92' data-tit0='line item'
               data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'></i>
            </a></td>
    </tr>
    <tr>
        <td>product_03</td>
        <td>4</td>
        <td>39,23</td>
        <td>156,92</td>
        <td><a data-id='176256' data-what='Edit' data-val1='product_03' data-val2='4' data-val2txt='boxes'
               data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='156.92' data-tit0='line item'
               data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'></i>
            </a></td>
    </tr>
    <tr>
        <td>product_04</td>
        <td>3</td>
        <td>39,23</td>
        <td>117,69</td>
        <td><a data-id='176257' data-what='Edit' data-val1='product_04' data-val2='3' data-val2txt='boxes'
               data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='117.69' data-tit0='line item'
               data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'></i>
            </a></td>
    </tr>
    <tr>
        <td>product_05</td>
        <td>2</td>
        <td>39,23</td>
        <td>78,46</td>
        <td><a data-id='176258' data-what='Edit' data-val1='product_05' data-val2='2' data-val2txt='boxes'
               data-val3='4800.000' data-val3txt='boxes' data-val4='39.23' data-val5='78.46' data-tit0='line item'
               data-tit1='product' data-tit2='unit' data-tit3='price' data-tit4='amount'><i class='fa fa-edit'></i>
            </a></td>
    </tr>
    </tbody>
</table>

相关问题
最新问题