表格添加删除行，依赖于jquery
?????? 好久没有发表博客了，也不知道该说什么了，这个小功能比较简单，相信各位高手都能看明白，或者不屑一顾，那么小弟话不多说直接贴代码，附件中会上传示例，可以下载查看。还望哥哥姐姐不吝赐教，有问题请留言，谢谢。
?
??????? 在多说几句：
??????? 1、只在这个小东东上做了文本框、下拉框、超链接表单元素的获取，其他的表单元素如单选框、复选框等都可以进行添加，请哥哥姐姐自己开发吧；每个元素生成的方法参数data是包含属性定义的json格式数据，如
?
{element:'text',name:'nd',style:'width: 100px;',value:defNd,cla:'Wdate',event:{e:'onClick',d:'WdatePicker({dateFmt:"yyyy"})'}}
????? 说明：
??????? element：指定了这个元素的类型
??????? name：指定了这个元素的name属性值
??????? style：指定了这个元素的style属性值
??????? value：指定了这个元素的value属性值
??????? cla：指定了这个元素的class属性值
??????? event：指定了这个元素的鼠标事件，e-指定了是什么样的事件，d-指定了执行的函数
??????? ……
? 每一个元素都有标准的定义格式，参见各个元素生成函数中参数校正模块中的定义。
?
???????2、 这个小东东只是在一个单元格里添加了一个表单元素，如果哪位想添加多个可以修改generateTr(data)这个方法的参数data（json格式）定义和其中的相应代码来实现在一个TD中循环多个表单元素；并且这个data中定义了每个元素常有的一些属性，也支持鼠标事件的哦
???????3、 小东东里面有参数（参数均为json格式）校正功能，如
data = validateJsonData({align:'center',style:'',colspan:'',rowspan:''},data);?
这个方法有两个参数，第一个参数为标准格式，第二个参数为需要校正的json数据，返回值是校正后符合要求的json数据；
?????????? 如果想自己添加数据项，那么必须一同把相应方法中的标准格式进行修改，否则你添加的东东是不会起作用的！
?????? 4、这个小东东在select下拉框中的数据处理上使用了数据仓库的概念，只需要为每一个select下拉框定义好自己的数据仓库，然后在参数中传入即可，数据仓库中的数据格式同样是json格式
??? 数据仓库定义如下：
//井别数据jbStore = selectStore({fields:['JB','JB'],value:dataJson.jbList});? 参数是json格式数据：第一个fields为select中的key-value值，其中JB代表了dataJson.jbList
中JB这个key值，即option的value值和显示值；第二个value为包含key-value的json格式的数据，返回值为如下格式的json数据[{key:'1',value:'a'},{key:'2',value:'b'},....]；
?????? 使用方式如下：
var trNr=generateTr([{element:'hidden',name:'xzbz',value:'1',text:xh},{element:'text',name:'nd',style:'width: 100px;',value:defNd,cla:'Wdate',event:{e:'onClick',d:'WdatePicker({dateFmt:"yyyy"})'}},{element:'select',name:'gq',value:gqStore,defVal:'请选择'},{element:'select',name:'jb',value:jbStore,defVal:'请选择'},{element:'text',name:'js',style:'width: 100px;',value:'',cla:''},{element:'a',href:'javascript:',event:{e:'onClick',d:'delRow(this)'},text:'删除'}]);?这是各个元素通过json数据格式进行属性定义，作为参数传递给TR生成函数的代码。select数据仓库的使用是在element:'select'上的value值中如：{element:'select',name:'jb',value:jbStore,defVal:'请选择'}。
????????? 另外，如果需要其他的数据仓库，还需要麻烦各位自己开发，或者给我留言。
?
上面讲解的不知大家能不能看明白，看一下完整的代码吧：
function delRow(obj){var $obj = $(obj);var par = $obj.parent();var trpar = par.parent();trpar.remove();}/*** generateTr * param data is a json array ,just like - [{},{}]*/function generateTr(data){// get TR element array which contais start tag <tr> and end tag </tr>var tr = getTr({});var trNr=tr[0];// get TD element array which contais start tag <td> and end tag </td>for(var i = 0; i < data.length; i++){var td = getTd({align:'center'});var element = getElement(data[i]);trNr = trNr+td[0]+element+td[1];}trNr = trNr + tr[1];return trNr}/*** get TR element array which contais start tag <tr> and end tag </tr>*/function getTr(data){// validate key of the jsondata = validateJsonData({align:'center'},data);var tr = new Array();tr[0] = "<tr ";for(var k in data){tr[0] = tr[0] + " "+k+"='"+data[k]+"'";}tr[0] = tr[0] + ">";tr[1] = '</tr>';return tr;}/*** get TD element array which contais start tag <td> and end tag </td>*/function getTd(data){// validate key of the jsondata = validateJsonData({align:'center',style:'',colspan:'',rowspan:''},data);var td = new Array();td[0] = "<td ";for(var k in data){td[0] = td[0] + " "+k+"='"+data[k]+"'";}td[0] = td[0] + ">";td[1] = "</td>";return td;} /*** validate the key of json data and the param data is the standard key-vale,data2 is the key-value for validate*/function validateJsonData(data,data2){for(var k in data){if(typeof(data[k]) == 'object'){var bd = data[k];if(data2[k] == '' || data2[k] == null){data2[k] = data[k];}if(typeof(data2[k]) == 'object'){var dd = data2[k];data2[k] = validateJsonData(bd,dd);}}if(typeof(data2[k]) == 'undefined'){data2[k] = data[k];}}return data2;}/*** get element*/function getElement(data){var e = data.element;if(e == 'text' || e == 'hidden'){return getInput(data);} else if (e == 'a'){return getA(data);}else if (e == 'select'){return getSelect(data);}}/*** get a element*/function getA(data){//validate key of the jsondata = validateJsonData({element:'',href:'',event:{e:'',d:''},target:'',text:''},data);var e = data.event.e;if(e==null || e==''){e='onClick';}a = "<a href='"+data.href+"' "+e+"='"+data.event.d+"' target='"+data.target+"'>"+data.text+ "</a>";return a;}/*** get input element*/function getInput(data){//validate key of the jsondata = validateJsonData({element:'',name:'',style:'',value:'',cla:'',event:{e:'',d:''},text:''},data);var e = data.event.e;var txt = data.text;if(e==null || e==''){e='onClick';}if(txt==null ||txt==''){txt='';}var input = "<input name='"+data.name+"' style='"+data.style+"'"+" value='"+data.value+"' class='"+data.cla+"'"+" type='"+data.element+"' "+e+"='"+ data.event.d+"'>"+txt+"</input>";return input;}/*** get input element*/function getSelect(data){//validate key of the jsondata = validateJsonData({element:'',name:'',style:'',value:'',defVal:'false',cla:'',event:{e:'',d:''}},data);var e = data.event.e;if(e==null || e==''){e='onClick';}var valueStore = eval("("+data.value+")");var select = "<select name='"+data.name+"' style='"+data.style+"' class='"+data.cla+"' "+e+"='"+data.event.d+"'>";if(data.defVal != 'false'){select = select + "<option value=''>"+data.defVal+"</option>";}for(var i=0;i<valueStore.length;i++){var optionV = valueStore[i];select = select + "<option value='"+optionV.key+"'>"+optionV.value+"</option>";}select = select+"</select>";return select;}/*** select data-sotre*/function selectStore(data){var keys = data.fields;var roots = data.value;var jsonStore = "[";for(var i=0;i<roots.length;i++){for(var j=0;j<keys.length;j++){var rootsObj = roots[i];//k is the KEY of ajson data,rootsObj[k] is the VALUE that the k reflect tofor(var k in rootsObj){if(keys[j]==k){if(j!=keys.length-1){jsonStore = jsonStore + "{key:'"+rootsObj[k]+"',";}else{jsonStore = jsonStore + "value:'"+rootsObj[k]+"'}";}}}}if(i!=roots.length-1){jsonStore = jsonStore + ",";}else{jsonStore = jsonStore + "]";}}return jsonStore;}?
我们在看一下页面中是如何调用的：
?
var defNd;var gqStore;var jbStore;//初始化数据$(function(){var url = '${pageContext.request.contextPath }/ndjhjsQueryJ.action';var data1 = {};$.post(url,data1,function(data2){//年度默认值defNd = new Date().getYear();var dataJson = eval("("+data2+")");//工区数据gqStore = selectStore({fields:['GQDM','GQMC'],value:dataJson.gqList});//井别数据jbStore = selectStore({fields:['JB','JB'],value:dataJson.jbList});});});//增加一行function addOneRow(){var tableId = $("#mainTb");//序号var xh = $("#mainTb tr").size();var trNr=generateTr([{element:'hidden',name:'xzbz',value:'1',text:xh},{element:'text',name:'nd',style:'width: 100px;',value:defNd,cla:'Wdate',event:{e:'onClick',d:'WdatePicker({dateFmt:"yyyy"})'}},{element:'select',name:'gq',value:gqStore,defVal:'请选择'},{element:'select',name:'jb',value:jbStore,defVal:'请选择'},{element:'text',name:'js',style:'width: 100px;',value:'',cla:''},{element:'a',href:'javascript:',event:{e:'onClick',d:'delRow(this)'},text:'删除'}]);tableId.append(trNr);}?
在搞张效果图瞅瞅，啦啦
好了，就写到这里吧，看看附件，吼吼。有问题留言啦啦。