jquery数据标签html代码,基于jquery的html自定义标签

一、代码结构

自定义标签

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

defaultValue="2" inputName="love"

callback="callback(this)">

function callback(obj){

console.log('id='+$(obj).val());

}

$(function(){

//合并后的对象

var settings={};

//插件默认参数

var defaults={

url:null,

type:1,

defaultValue:null,

data:[],

callback:null

};

var options={};

for(key in defaults){

if($('love').attr(key)){

options[key]=$('love').attr(key);

}

}

settings=$.extend(true,{},defaults,options);

console.log(settings)

init(settings);

function init(settings){

switch(settings.type){

case '2': //表格

loadTable(settings);

break;

default://下拉框

loadSelect(settings);

break;

}

}

//加载表格

function loadTable(settings){

var data = eval('(' + settings.data+ ')');

var _html='';

_html+='

_html+='';

_html+='

';

_html+='

';

_html+='

编号';

_html+='

姓名';

_html+='

年龄';

_html+='

';

_html+='

';

_html+='

';

for(var i=0;i

_html+='

';

if(settings.defaultValue==data[i].id){

_html+='

';

}else{

_html+='

';

}

_html+='

'+data[i].id+'';

_html+='

'+data[i].name+'';

_html+='

'+data[i].age+'';

_html+='

';

}

_html+='

';

_html+='

';

addHtml(_html);

}

//加载下拉框

function loadSelect(settings){

var data = eval('(' + settings.data+ ')');

var _html='';

_html+='';

for(var i=0;i

if(settings.defaultValue==data[i].id){

_html+=''+data[i].name+'';

}else{

_html+=''+data[i].name+'';

}

}

_html+='';

addHtml(_html);

}

//将数据添加到节点中

function addHtml(_html){

$('love').html(_html);

}

});

二、测试效果

1，当love标签默认类型type不传或传1时，love标签表现为下拉框，默认值得设置，表单提交name值和回调函数均可用。

2、单love标签的类型设置为2时表现为表格，默认值设置后勾选默认id条