tableToJSON 使用 ；对动态表格处理非常优秀

最新推荐文章于 2024-05-17 09:58:23 发布
最新推荐文章于 2024-05-17 09:58:23 发布
阅读量439 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43187334/article/details/112784081
版权

人很话不多 上代码


<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->


</head>
<body class="no-skin">


<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">
                        <H5 align="left">测试</H5>
                        <form action="productInfo/attribute.do" method="post" name="Form2" id="Form2">
                            <div class="row pre-scrollable">

                                <table id="attributeList" class="table table-striped table-bordered table-hover"  style="margin-top:5px;">
                                    <thead>

                                    <tr>
                                        <th class="center" data-override="name">性名</th>
                                        <th class="center" data-override="age">年龄</th>
                                        <th class="center" data-override="status">性别</th>
                                        <th class="center" data-override="productAttributeId" hidden>编号</th>
                                        <th class="center">操作</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                                <tr>
                                                      <td class="center">
                                                        <input type="text"  name="name"  value="" >
                                                    </td>
                                                    <td class="center"><input type="text"  name="age" value=""></td>
                                                    <td class="center">
                                                        <input type="radio" name="status0" value="1" checked>男
                                                        <input type="radio" name="status0" value="0"  >女
                                                    </td>
                                                    <td class="center">
                                                        <a class="btn btn-xs btn-success" title="删除"  onclick="del1();" >
                                                            <i class="font-style: norma" title="删除">删除</i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="center">
                                                        <input type="text"  name="name"  value="" >
                                                    </td>
                                                    <td class="center"><input type="text"  name="age" value=""></td>
                                                    <td class="center">
                                                        <input type="radio" name="status1" value="1" checked>男
                                                        <input type="radio" name="status1" value="0"  >女
                                                    </td>
                                                    <td class="center">
                                                        <a class="btn btn-xs btn-success" title="删除"  onclick="del1();" >
                                                            <i class="font-style: norma" title="删除">删除</i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="center">
                                                        <input type="text"  name="name"  value="" >
                                                    </td>
                                                    <td class="center"><input type="text"  name="age" value=""></td>
                                                    <td class="center">
                                                        <input type="radio" name="status2" value="1" checked>男
                                                        <input type="radio" name="status2" value="0"  >女
                                                    </td>
                                                    <td class="center">
                                                        <a class="btn btn-xs btn-success" title="删除"  onclick="del1();" >
                                                            <i class="font-style: norma" title="删除">删除</i>
                                                        </a>
                                                    </td>
                                                </tr>

                                    </tbody>
                                </table>
                            </div>
                            <div class="page-header position-relative">
                                <table style="width:100%;">
                                    <tr>
                                        <td style="vertical-align:top;">
                                            <a class="btn btn-mini btn-info" onclick="saveAdd();"><i class="ace-icon fa fa-plus bigger-120"></i>保存</a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </form>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->

    <!-- 返回顶部 -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>

</div>
<!-- JQuery获取表格数据 -->
<script src="../../static/ace/js/jquery.js"></script>
<script src="../../static/js/jquery.tabletojson.min.js"></script>

<script type="text/javascript">
    // 保存添加的属性
    function saveAdd() {
        var table = $('#attributeList').tableToJSON({
            ignoreColumns: [4],//这是忽略操作   ignoreColumns: [1,4] 这是多项忽略 年龄和操作
            extractor : {
                //自定义  cellIndex 对应 列数下标从零开始 $cell 对应 当前td的内容 可以理解为$(this)
                0 : function(cellIndex, $cell) {
                    return $cell.find('input[name="name"]').val();
                },
                1: function(cellIndex, $cell) {
                    return $cell.find('input[name="age"]').val();
                },
                2 : function(cellIndex, $cell) {
                    return $cell.find('input[type="radio"]:checked').val();
                },
                3 : function(cellIndex, $cell) {
                    return $cell.find('input[name="productAttributeId"]').val();
                }
            }
        });
        console.log("是什么"+JSON.stringify(table));
    }
</script>
</body>
</html>

在这里插入图片描述

一米^O^曦阳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery+json实现动态创建复杂表格table的方法
10-21
主要介绍了jQuery+json实现动态创建复杂表格table的方法,涉及jQuery针对json数据的解析与表格动态创建操作相关技巧,需要的朋友可以参考下
探索数据的魔力：Tabletojson，让HTML表格轻松转换为JSON
最新发布
gitblog_00051的博客
06-18 286
探索数据的魔力：Tabletojson，让HTML表格轻松转换为JSON 项目地址:https://gitcode.com/maugenst/tabletojson 在大数据和信息时代，将网页上的静态表格数据转化为可操作的JSON格式变得尤为重要。今天，我们来深入了解一款名为Tabletojson的强大工具，它简化了从HTML表中提取数据并转换为JSON对象的过程，适用于开发者与数据分析师，为数据...
table转json
丿火凤燎原的博客
03-09 824
1.第一种方法直接用tabletojson.js 链接：http://lightswitch05.github.io/table-to-json/ 2. <table class="table" id="playlistTable"> <thead> <tr> <th> 名称 </th> &lt...
html 表格转json数据格式,TabletoJson,表格转json数据格式
weixin_35949435的博客
06-05 267
//引用方法DataSet dataSetnum = fy.GetPageDataset(table, "*", "PropertyID", 1, 1, 1, 1, "");DataSet dataSet = fy.GetPageDataset(table, "*", "PropertyID", Convert.ToInt32(Request["limit"]), Convert.ToInt32...
TableTojson方法
开源控Meteor的博客
06-17 2734
//从数据库中查询出数据表，并返回查询的表 public System.Data.DataTable QueryTab(string sql) { System.Data.DataSet result = new System.Data.DataSet(); using (System.Data.OleDb.OleDbConn
推荐：Table To JSON - 数据表格转JavaScript对象神器
gitblog_00061的博客
05-17 347
推荐：Table To JSON - 数据表格转JavaScript对象神器 项目地址:https://gitcode.com/lightswitch05/table-to-json 如果你经常在Web开发中处理HTML表格数据，那么这款开源库——Table To JSON是你不容错过的选择。这个轻量级的jQuery插件能够将你的HTML表格无缝转换为JavaScript对象，使数据处理变得简单而...
C# DataTable 转换成JSON数据 三种方法
weixin_50595983的博客
08-14 1620
C# DataTable 转换成JSON数据 三种方法
tabletojson的js
07-26
例如，你可以利用jQuery选择器获取表格，然后使用`tabletojson`进行转换。 8. **版本升级**: `table-to-json-master`可能指的是库的主分支或最新版本，保持库的更新以获取最新的特性、修复和性能提升。确保检查项目...
JQuery 动态生成Table表格实例代码
11-29
本实例将详细讲解如何使用jQuery的`append`和`appendto`方法来动态生成Table表格。 首先，让我们了解`append`和`appendto`这两个jQuery方法。`append`方法用于在匹配元素的末尾添加新的内容，而`appendto`则是相反...
对Vue table 动态表格td可编辑的方法详解
01-21
element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化。 名称 width=140> <el v-if=scope.row.isEdit xss=removed v-model=scope.row.name></el> <label v-...
tabletojson:一个用于node.js的npm模块，用于将HTML表转换为JSON对象
05-02
表到JSON 尝试将HTML表转换为JSON。 可以将单个表的标记作为字符串，HTML的片段或整个页面或仅作为URL传递（带有可选的回调函数；还支持promises）。 响应始终是一个数组。 响应中的每个数组条目都代表在页面上找到的一个表（以在HTML中找到它们的顺序相同）。 从2.0版开始，tabletojson完全用打字稿编写。 !!! 注意!!!：自不推荐使用request.js以来，版本2.0.0中的API更改不兼容。 更多信息... 从版本1. +转换到2.x Require必须从const tabletojson = require('../lib/tabletojson'); 到const tabletojson = require('../lib/tabletojson').Tabletojson; 或const {Tabletojson: tabletojso
前端开源库-tabletojson
08-30
前端开源库-tabletojsonTableToJSon，将HTML表转换为JSON对象
html <table>表数据转 Json 格式
xuanwuziyou的专栏
01-17 4977
表数据转 Json 格式的javascript函数如下： var keysArr = new Array("key0", "key1","key2"); function TableToJson(tableid) { //tableid是你要转化的表的表名，是一个字符串，如"example" var rows = document.getElemen
【实战】将html文档中table转化为json或xlsx
camille的专栏
01-21 1793
需求 我想获取当前访问页面的table中的数据，然后存储文文本或excel文件 借助工具 tabletojson xlsx 或者手动爬取HTML文档，然后借助jQuery等工具手动解析文档 tabletojson INTRO：尝试将HTML tables转换为JSON。 RETURN：始终返回一个数组，长度根据html中的table数量决定 注意： 如果table列中存在重复的列名，会给后面的列名加上数字后缀，如: xxxx_2 如果存在合并行rowspan，会被自动解除合并，恢复原始数据 表格的第一
将table转换为Json(Jquery的Ajax方法读取)
热门推荐
bradleydan的专栏
08-31 1万+
1. 创建Users表 create table Users ( UserId int identity(1,1) primary key, UserName varchar(20) ) insert into Users values('Bradley') insert into Users values('Dan')   2. 创建JsonHelper类 public cla
将table的值转为json传到后台
q_1092535160的博客
01-29 669
【版权所有，文章允许转载，但须以链接方式注明源地址，否则追究法律责任】 【创作不易，点个赞就是对我最大的支持】 前言 仅作为学习笔记，供大家参考 总结的不错的话，记得点赞！ 前台页面 编号 姓名 年龄 性别 1 张三 16 男 .
数据表转换成json(DatatableToJson)
weixin_30852367的博客
07-09 413
1 #region 转换Table为JSON数据 2 /// <summary> 3 /// 转换Table为JSON数据 4 /// </summary> 5 /// <param name="dt"></param> 6 /// &l...
Datatable 转 Json 数组 详细介绍
qq_33416262的博客
08-05 721
Datatable 转 Json 数组 详细介绍
ant design vue使用表格a-table开发复杂动态的表格
06-08
好的，关于Ant Design Vue中使用a-table开发复杂动态的表格，我可以给你一些建议...以上是我对于Ant Design Vue中使用a-table开发复杂动态表格的一些建议和指导，希望能对你有所帮助。如果还有其他问题，欢迎继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值