目的是为了根据行列,例如根据颜色尺码,动态生成表格,并且表格变化的时候保存原来的值。为了方便写成了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);
分享到:
相关推荐
动态表格允许开发者根据需要在运行时生成表格结构,从而适应不确定数量的数据或者用户交互需求。 首先,我们需要理解ASP.NET Web Forms的基本架构。它是一种基于服务器控件的模型,控件在服务器端创建、处理事件并...
在提供的压缩包文件中,"生成pdf格式表格并使用base64进行编码传输"可能包含了实现这个功能的示例代码或教程。通过研究这些资源,你可以更好地理解和应用上述概念,从而在你的项目中创建和传输PDF表格。
此外,转换过程中可能会丢失一些Word特有的格式或功能,因为PDF和Word的格式标准并不完全相同。 总结来说,通过iText和Apache POI的结合,我们可以实现对Word文档的深度操作,从而生成带有目录、页码、表格和图片的...
如果在不正确的生命周期阶段创建控件,可能导致回发时控件丢失。 7. **ViewState**:ASP.NET使用ViewState来保持页面控件的状态,这对于动态添加的控件尤为重要,因为ViewState可以确保在回发时服务器能够记住已...
这样做的目的是为了确保表格在打印过程中能够清晰地呈现出来,避免因为色彩问题导致的部分内容丢失。 **步骤二:优化OLE对象的打印设置** 1. **进入CAD设置**:在CAD软件主界面中,点击“工具”菜单下的“选项”...
- 在导出前,确保数据已整理并格式化正确,避免丢失或错误的信息。 - 如果数据包含特殊字符或分隔符,选择合适的导出格式以防止数据混乱,例如,CSV可能不适合包含逗号的数据。 - 为了兼容性,可以选择较旧的文件...
这样,我们就能根据`tableLabel`动态生成表格的列。 接下来,让我们看看如何从父组件向子组件传递数据。在Vue中,可以通过`props`属性将数据从父组件传递到子组件。在本例中,子组件定义了两个`props`:`tableData`...
在CAD软件中,如AutoCAD,表格通常以DWT或DWG格式存在,这些格式对于非CAD用户来说可能不太方便处理。将这些表格转换为Excel,可以实现以下优势: 1. **易于编辑**:Excel提供了直观的界面,让用户轻松编辑数据,...
标签"动态添加行"强调了这个技术的核心在于根据用户需求动态生成和更新表格的行,而不是预先定义好固定的行数。 至于"DynamicTable"这个压缩包子文件的文件名称,可能是包含此DEMO代码的文件或类库,可能包含了实现...
总的来说,“table-editor-obsidian”插件是Obsidian用户不可或缺的工具之一,它增强了Markdown笔记中的表格功能,使你能够更专业、更高效地管理信息。无论是学术研究、项目管理还是日常知识梳理,这款插件都将助你...
它提到了几个中国常用的搜索引擎(百度、搜狗)和安全软件(360),这可能意味着该工具可以通过这些平台找到,但具体是否与这些公司或产品有关联并不明确。此外,“加密手机”可能是指该工具可以应用于移动设备的...
但在面对动态内容频繁变化的表格时,可能需要考虑到事件监听器的丢失和性能问题,此时通过动态操作DOM来重新构建表格内容的方法会更加稳定和高效。总之,清空table表格的方法很多,关键是找到最适合当前项目需求的...
在IT领域,动态新增行是一种常见的用户界面交互设计,它主要应用于数据输入或者表格编辑的场景,例如在网页表单、电子表格或者数据库管理应用中。这种功能允许用户根据需要自定义输入数据的数量,而不仅仅局限于预设...
在Excel中复制表格并保持格式,可以采取以下方法: 1. **全选表格**:全选按钮位于工作表左上角A1单元格的左上方,单击该位置可选中整个工作表,全选后的表格会呈现蓝色背景。 2. **复制与粘贴**:按下`Ctrl+C`进行...
3. **版本控制**:自动保存历史版本,用户可以追溯并恢复到之前的任何版本,避免因误操作导致的数据丢失。 4. **协同编辑**:支持多人同时在线编辑同一份文档,实时同步修改,提高团队协作效率。 5. **权限管理**...
在这个场景中,"查询自动生成工资表管理系统Excel表格.zip" 提供了一个可能的解决方案,利用Excel的自动化功能来简化人力资源部门的工资计算与管理任务。以下是对这个系统可能涉及的知识点的详细说明: 1. **Excel...
由于提供的文件内容实际上并未包含在问题中,我无法直接分析文件的标题、描述、标签和部分内容来生成知识点。但是,我可以根据标题和描述中提供的信息,即“医疗器械经营企业管理记录表格-模板参照”这一主题,为您...
1. **数据一致性**:通过精确复制现有的数据行,可以确保升级后的数据库与原数据库保持一致,避免了数据丢失或错误。 2. **可回滚性**:生成的脚本可以保存为文件,如果升级过程中出现问题,可以轻松地撤销操作,只...
表格的结构(字段名、数据类型、约束等)可以根据程序逻辑动态生成。 ```sql CREATE TABLE 表名 ( 字段1 数据类型 约束, 字段2 数据类型 约束, ... ); ``` 4. **编程接口**:为了在程序中动态执行SQL,我们需要...
2.使用poi填充word报表标签及表格数据技术,解决标签替换不生效、不到位、替换错误,中文乱码等常见问题。 3.使用jacob操作com组件技术将word转为PDF文件,解决转换后部分中文丢失、乱码、表格丢失、转换后失真等...