上篇文章的缺点在于需要传参数,而且参数的个数被限制,当页面的布局不符合参数是,上篇文章的js封装即为失败品。
下面是稍微升级版的1.1版本。通过自定义的属性来收集 参数,就破除了参数的设定,在页面布局的时候只需要录入一个固定的自定义属性即可。
我自己在项目中固定的属性为:表格外面需要获取的数据自定义属性为--savename,表格属性为--saveitem,表格内需要收集的自定义属性为--saveitemname
如果我有幸帮到您,您可自行更改
代码如下:
<div id&#61;"foot">
<div class&#61;"form-horizontal form-pd"><div class&#61;"form-group"><label for&#61;"" class&#61;"col-xs-2 control-label text-right">参数类型&#xff1a;label><div class&#61;"col-xs-9 "><input type&#61;"text" class&#61;"form-control" name&#61;"ParameterID" savename placeholder&#61;"参数类型">div>div><div class&#61;"form-group"><label for&#61;"" class&#61;"col-xs-2 control-label text-right">参数名称&#xff1a;label><div class&#61;"col-xs-9 "><input type&#61;"text" class&#61;"form-control" name&#61;"ParameterName" savename placeholder&#61;"参数名称">div>div><div class&#61;"form-group"><label for&#61;"" class&#61;"col-xs-2 control-label text-right">排序&#xff1a;label><div class&#61;"col-xs-9 "><input type&#61;"number" class&#61;"form-control" name&#61;"Sort" savename>div>div><div class&#61;"form-group"><label for&#61;"" class&#61;"col-xs-2 control-label text-right">备注&#xff1a;label><div class&#61;"col-xs-9 "><input type&#61;"text" class&#61;"form-control" placeholder&#61;"备注" name&#61;"Remark" savename>div>div>
div>
div><table class&#61;"table table-bordered"id&#61;"tables" saveitem name&#61;"table1"><tr class&#61;"bg-cl"><th style&#61;"display: none">产品IDth><th>产品编号th><th>产品名称th><th>产品参数th><th>操作th>tr><tr><td style&#61;"display:none"><input type&#61;"hidden" style&#61;"width: 100%" name&#61;"data1" saveitemname/>td><td ><input type&#61;"text" style&#61;"width: 100%" name&#61;"data2" saveitemname/>td><td ><input type&#61;"text" style&#61;"width: 100%" name&#61;"data3"saveitemname />td><td ><input type&#61;"text" style&#61;"width: 100%" name&#61;"data4" saveitemname/>td><td style&#61;"text-align: center;" onclick&#61;"trDelete(this)"><button type&#61;"button" class&#61;"btn btn-xs btn-danger">删除button>td>tr>table><div><button type&#61;"button" class&#61;"btn btn-xs btn-primary" onclick&#61;"trAdd($(&#39;#tables&#39;))">添加button>div>
var jsons &#61; function () { };
jsons.prototype &#61; {get: function () {return GetData();},set: function (json) {FillData(json);}
}
function GetData() {//所有的表格外的输入框&#xff0c;下拉框&#xff0c;单选&#xff0c;多选&#xff0c;富文本&#xff0c;必须强调属性savenamevar content &#61; $(&#39;*[savename]&#39;);var root &#61; CollectionInputData(content);//所有的表格内的数据必须给表格声明属性 saveitemvar tablejson &#61; [];var tablecontent &#61; $(&#39;*[saveitem]&#39;);for (var j &#61; 0; j
}
//收集指定容器内输入框的数据
function CollectionInputData(content) {var root &#61; new Object();try {for (var j &#61; 0; j
}
function FillData(json) {var content &#61; $("*[savename]");Fill(content, json);var tablecontent &#61; $("*[saveitem]");for (var i &#61; 0; i
}
// 指定位置容器赋值
function Fill(content, json) {for (var i &#61; 0; i
}}
}
//填充表格数据
function FillTableData(content, json) {var tables &#61; content.find("tr");var tdData;switch (tables.length) {case 0:return;default:tdData &#61; tables.eq(0).find("*[saveitemname]");var i;if (tdData.length > 0) {for (i &#61; 0; i
}//增加表格行
function trAdd(content) {var str &#61; "";if (content.find(&#39;tr&#39;).length > 1) {str &#43;&#61; content.find(&#39;tr&#39;).eq(1)[0].innerHTML;} else {str &#43;&#61; content.find(&#39;tr&#39;).eq(0)[0].innerHTML;}str &#43;&#61; " ";content.append(str);
}
//删除指定行
function trDelete(content) {var td &#61; $(content);td.parents("tr").remove();
}
还请不吝指教。