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

分类：编程问答

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

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

我以模式形式进行更改，然后单击按钮以将更改保存到数据库。
成功更改数据库中的数据后，我想更新数据表中的已编辑行，但是在这里出现错误：“未捕获的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,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,"All"]],pageLength: 10,autoWidth: false,columnDefs: [
            {targets: [0],width: '300px'},{targets: [0,1,2,3,4],orderable: false},{targets: [1,3],className: 'dt-body-right'},{targets: [4],className: 'dt-body-center'}
        ]}
    });
});

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

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

解决方法

您正在使用 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,"All"]],pageLength: 10,autoWidth: false,columnDefs: [
        {targets: [0],width: '300px'},{targets: [0,1,2,3,4],orderable: false},{targets: [1,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,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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot