By

文章目录

以前插入类似表格之类的数据,都是借助jq的clone()方法.
在html中 单独 拿出一组重复性的dom结构 并把隐藏掉.

eg:

1
2
3
4
5
6
<div style="display:none" id='cloneDiv'>
	<div class='name'></div>
	<div class='age'></div>
	<div class='sex'></div>
	<div class='hobby'></div>
</div>

下面拿这个dom去渲染数据

1
2
3
4
5
var cloneDiv = $('#cloneDiv').clone();
cloneDiv.find('name').text('hjai');
cloneDiv.find('age').text('26');
cloneDiv.find('sex').text('男');
cloneDiv.find('hobby').text('basketball');

都说很low,现在用的方法是字符串替换.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function paramFormat(str, paramObj)
	{
		var g;
		var list;
		str = str.toString();
		if (typeof paramObj == "object")
		{
			list = paramObj;
		}
		else
		{
			list = arguments;
		}
		for (var i in list)
		{
			if (list.hasOwnProperty(i))
			{
				g = new RegExp("\\{" + i + "\\}", "g");
				str = str.replace(g, list[i]);
			}
		}
		return str;
	}

简单列子:

1
2
3
var str = '我的名字叫{name},我的年龄是{age}';
paramFormat(str,{name:'hjai',age:26});
//结果是:'我的名字叫hjai,我的年龄是26'

注意 注意 注意:得到的结果类型是字符串

以上边clone()中的列子为列子

1
2
3
4
5
6
//需要clone的dom结构,编写为字符串的形式
var str = '<div style="display:none" id='cloneDiv'><div class='name'>{name}</div><div class='age'>{age}</div><div class='sex'>{sex}</div><div class='hobby'>{hobby}</div></div>';
//用变量承接渲染后的'dom'字符串.
var strDiv = paramFormat(str,{name:'hjai',age:26,sex:'男',hobby:'basketball'});
//展示到对应的html显示处(假设要放到父元素id为cloneCon的div下面)
$('#cloneCon').innerHTML = strDiv;
文章目录