`

动态生成表格并不丢失原表格内容

阅读更多

目的是为了根据行列,例如根据颜色尺码,动态生成表格,并且表格变化的时候保存原来的值。为了方便写成了jquery插件的形式。

 

/**
 * @author zhangtan
 * @email ztreal@gmail.com
 * @since  2011-1-17
 * 动态生成表格
 * @version 1.0.4(2011-1-17)
 * @jquery  1.4.2
 */
(function($) {
    //基本参数  根据哪2个div内的checkbox在那个div内生成table
    //行列来源和生成表格目标 整合虚拟产品和实物产品共用同一js
    var defaults = {
        row: 'row',
        line: 'line',
        target: 'target',
        isXvNi:true

    };

    //存放变动前表格的行列条件和值
    function value(x, y, y2, v) {
        this.x = x;
        this.y2 = y2;
        this.y = y;
        this.v = v;
    }

    $.fn.createTable = function(options) {
        ///<summary>
        /// create table by row and line use div[id=line,row] in div[id=target]
        ///</summary>
        options = $.extend(defaults, options);
        var row = $("#" + options.row).find("input[type=checkbox][checked=true]");
        var line = $("#" + options.line).find("input[type=checkbox][checked=true]");
        var valueList = [];
        //如果表格内容有值,获取其条件和值,放入数组中。
        var tempvalue = $("#" + options.target).find("input[value]").each(function(iii) {
            var y = $(this).parent().parent().prevAll("tr").length + 1;
            var x = $(this).parent("td").prevAll("td").length;
            if ($.browser.mozilla) {
                valueList[iii] = new value($("#" + options.target).find("tr").eq(0).find("th").eq(x).html(), $(this).parent().parent().parent().find("tr").eq(y).find("td").eq(0).html(), $(this).parent().parent().parent().find("tr").eq(y).find("td").eq(1).html(),'<input type="text" value='+$(this).val()+'><\/input>'+$(this).parent().text());
            } else {
                valueList[iii] = new value($("#" + options.target).find("tr").eq(0).find("th").eq(x).html(), $(this).parent().parent().parent().find("tr").eq(y).find("td").eq(0).html(), $(this).parent().parent().parent().find("tr").eq(y).find("td").eq(1).html(), $(this).parent().html());
            }
        });

        var title = [];
        if (row.length >= 1) {
            title[0] = $("#" + options.row).find("span[istitle]").html();
        }
        if (line.length >= 1) {
            title[title.length] = $("#" + options.line).find("span[istitle]").html();
        }
        //根据是否为虚拟产品判断是否加入特定内容。
        if (options.isXvNi === false) {
            title[title.length] = '*折扣后价格';
            title[title.length] = '折扣';
            title[title.length] = '*库存';
        }else{
            title[title.length] = '*第三方产品编号';
            title[title.length] = '成本价';
            title[title.length] = '*市场价';
            title[title.length] = '*折扣后价格';
            title[title.length] = '折扣';
            title[title.length] = '*最大购买数量';
        }
        var head = "";
        var tr = "";
        $.each(row, function(i) {
            $.each(line, function(ii) {
                var td = "";
                td = td + "<td>" + $(line[ii]).next("label").html() + "</td>";
                td = td + "<td>" + $(row[i]).next("label").html() + "</td>";
                if (options.isXvNi === false) {
                    td = td + '<td><input type="text"><\/input>元</td><td><input type="text"><\/input>%</td><td><input type="text"><\/input>件</td>';
                }else{
                    td = td + '<td><input type="text"><\/input></td><td><input type="text"><\/input>元</td><td><input type="text"><\/input>元</td> <input type="text"><\/input>元</td><td><input type="text"><\/input>%</td><td><input type="text"><\/input>张</td>';
                }
                tr = tr + "<tr>" + td + "</tr>";
            });
        });
        //生成表格第一行表头
        for (var t = 0;t<title.length;t++) {
            head = head + "<th>" + title[t] + "</th>";
        }
        title = "<table><thead><tr>" + head + "</tr></thead></table>";
        $(this).empty();
        $(this).append(title);
        $(this).append(tr);
        var newValueList = [];
        //还原原来已经有的值
        for (var val=0;val<valueList.length;val++) {
            for (var i = 1; i <= $("#" + options.target).find("tr").eq(0).find("th").length; i++) {
                if (valueList[val].x == $("#" + options.target).find("tr").eq(0).find("th").eq(i).html()) {
                    var xx = i;
                    for (var a = 1; a < $("#" + options.target).find("tr").length; a++) {
                        if ($("#" + options.target).find("tr").eq(a).find("td").eq(0).html() == valueList[val].y && $("#" + options.target).find("tr").eq(a).find("td").eq(1).html() == valueList[val].y2) {
                            $("#" + options.target).find("tr").eq(a).find("td").eq(xx).html(valueList[val].v);
                        }
                    }
                }
            }
        }

    };


})(jQuery);
 
分享到:
评论

相关推荐

    动态添加表格实例_aspx开发教程.rar

    动态表格允许开发者根据需要在运行时生成表格结构,从而适应不确定数量的数据或者用户交互需求。 首先,我们需要理解ASP.NET Web Forms的基本架构。它是一种基于服务器控件的模型,控件在服务器端创建、处理事件并...

    生成pdf格式表格并使用base64进行编码传输,可以保存本地

    在提供的压缩包文件中,"生成pdf格式表格并使用base64进行编码传输"可能包含了实现这个功能的示例代码或教程。通过研究这些资源,你可以更好地理解和应用上述概念,从而在你的项目中创建和传输PDF表格。

    itext操作word生成目录、页码、表格、插入图片

    此外,转换过程中可能会丢失一些Word特有的格式或功能,因为PDF和Word的格式标准并不完全相同。 总结来说,通过iText和Apache POI的结合,我们可以实现对Word文档的深度操作,从而生成带有目录、页码、表格和图片的...

    ASP.NET源码——动态添加表格实例.zip

    如果在不正确的生命周期阶段创建控件,可能导致回发时控件丢失。 7. **ViewState**:ASP.NET使用ViewState来保持页面控件的状态,这对于动态添加的控件尤为重要,因为ViewState可以确保在回发时服务器能够记住已...

    CAD中ole类型表格打印PDF无法显示的解决方法

    这样做的目的是为了确保表格在打印过程中能够清晰地呈现出来,避免因为色彩问题导致的部分内容丢失。 **步骤二:优化OLE对象的打印设置** 1. **进入CAD设置**:在CAD软件主界面中,点击“工具”菜单下的“选项”...

    表格数据导出

    - 在导出前,确保数据已整理并格式化正确,避免丢失或错误的信息。 - 如果数据包含特殊字符或分隔符,选择合适的导出格式以防止数据混乱,例如,CSV可能不适合包含逗号的数据。 - 为了兼容性,可以选择较旧的文件...

    vue element 中的table动态渲染实现(动态表头)

    这样,我们就能根据`tableLabel`动态生成表格的列。 接下来,让我们看看如何从父组件向子组件传递数据。在Vue中,可以通过`props`属性将数据从父组件传递到子组件。在本例中,子组件定义了两个`props`:`tableData`...

    CAD表格转excel

    在CAD软件中,如AutoCAD,表格通常以DWT或DWG格式存在,这些格式对于非CAD用户来说可能不太方便处理。将这些表格转换为Excel,可以实现以下优势: 1. **易于编辑**:Excel提供了直观的界面,让用户轻松编辑数据,...

    .net动态添加行

    标签"动态添加行"强调了这个技术的核心在于根据用户需求动态生成和更新表格的行,而不是预先定义好固定的行数。 至于"DynamicTable"这个压缩包子文件的文件名称,可能是包含此DEMO代码的文件或类库,可能包含了实现...

    table-editor-obsidian,Obsidian表格插件,让你更好的体验笔记工具

    总的来说,“table-editor-obsidian”插件是Obsidian用户不可或缺的工具之一,它增强了Markdown笔记中的表格功能,使你能够更专业、更高效地管理信息。无论是学术研究、项目管理还是日常知识梳理,这款插件都将助你...

    wps,excel电子表格md5批量加密工具宏工具下载

    它提到了几个中国常用的搜索引擎(百度、搜狗)和安全软件(360),这可能意味着该工具可以通过这些平台找到,但具体是否与这些公司或产品有关联并不明确。此外,“加密手机”可能是指该工具可以应用于移动设备的...

    javascript清空table表格的方法

    但在面对动态内容频繁变化的表格时,可能需要考虑到事件监听器的丢失和性能问题,此时通过动态操作DOM来重新构建表格内容的方法会更加稳定和高效。总之,清空table表格的方法很多,关键是找到最适合当前项目需求的...

    动态新增行并取出所有数据

    在IT领域,动态新增行是一种常见的用户界面交互设计,它主要应用于数据输入或者表格编辑的场景,例如在网页表单、电子表格或者数据库管理应用中。这种功能允许用户根据需要自定义输入数据的数量,而不仅仅局限于预设...

    excel表格如何保存.doc

    在Excel中复制表格并保持格式,可以采取以下方法: 1. **全选表格**:全选按钮位于工作表左上角A1单元格的左上方,单击该位置可选中整个工作表,全选后的表格会呈现蓝色背景。 2. **复制与粘贴**:按下`Ctrl+C`进行...

    资料表格文档制作管理软件

    3. **版本控制**:自动保存历史版本,用户可以追溯并恢复到之前的任何版本,避免因误操作导致的数据丢失。 4. **协同编辑**:支持多人同时在线编辑同一份文档,实时同步修改,提高团队协作效率。 5. **权限管理**...

    查询自动生成工资表管理系统Excel表格.zip

    在这个场景中,"查询自动生成工资表管理系统Excel表格.zip" 提供了一个可能的解决方案,利用Excel的自动化功能来简化人力资源部门的工资计算与管理任务。以下是对这个系统可能涉及的知识点的详细说明: 1. **Excel...

    医疗器械经营企业管理记录表格-模板参照.pdf

    由于提供的文件内容实际上并未包含在问题中,我无法直接分析文件的标题、描述、标签和部分内容来生成知识点。但是,我可以根据标题和描述中提供的信息,即“医疗器械经营企业管理记录表格-模板参照”这一主题,为您...

    SQL Server 表Insert脚本生成工具

    1. **数据一致性**:通过精确复制现有的数据行,可以确保升级后的数据库与原数据库保持一致,避免了数据丢失或错误。 2. **可回滚性**:生成的脚本可以保存为文件,如果升级过程中出现问题,可以轻松地撤销操作,只...

    动态创建数SQL据库

    表格的结构(字段名、数据类型、约束等)可以根据程序逻辑动态生成。 ```sql CREATE TABLE 表名 ( 字段1 数据类型 约束, 字段2 数据类型 约束, ... ); ``` 4. **编程接口**:为了在程序中动态执行SQL,我们需要...

    java开发word模板填充转PDF文件

    2.使用poi填充word报表标签及表格数据技术,解决标签替换不生效、不到位、替换错误,中文乱码等常见问题。 3.使用jacob操作com组件技术将word转为PDF文件,解决转换后部分中文丢失、乱码、表格丢失、转换后失真等...

Global site tag (gtag.js) - Google Analytics