jQuery实现对table的行进行动态添加、删除

/*
<input type="button" id="zj" value="增加"/>
<input type="button" id="sc" value="删除"/>
<div>
<table id="table" border="1" >
<tr>
<td><input  type="checkbox" id="ck_0" name="ck_0"/></td>
<td editTemplate="td1">开始符号</td>
<td editTemplate="td2">开始值</td>
<td editTemplate="td3">结束符号</td>
<td editTemplate="td4">结束值</td>
</tr>
</table>
</div>
<input type="button" id="bc" value="保存"/>



<textarea id="td1" style="display:none">
<select name="begin_type">
<option value=">">大于</option>
<option value=">=">大于等于</option>
<option value="=">等于</option>
</select>
</textarea>
<textarea id="td2" style="display:none">
<input type="text" name="begin" />
</textarea>
<textarea id="td3" style="display:none">
<select name="end_type">
<option value="<">小于</option>
<option value="<=">小于等于</option>
<option value="=">等于</option>
</select>
</textarea>
<textarea id="td4" style="display:none">
<input type="text" name="end"/>
</textarea>
*/
//根据table id 添加行
function addRow(table_id){

var rows=$("#"+table_id);
var vNum=$("#"+table_id+" tr").size();

var vTr=$("#"+table_id+" tr:first");
var tClone=vTr.clone(true);
var tr_id = "tr_"+vNum;

tClone[0].id=tr_id
tClone.appendTo(rows);

$("#"+table_id+" #"+tr_id+" input[type='checkbox']")[0].id="ck_"+vNum;
$("#"+table_id+" #"+tr_id+" input[type='checkbox']").unbind("click");
$("#"+table_id+" #"+tr_id+" input[type='checkbox']")[0].value=tr_id;



var tds = $("#"+table_id+" #"+tr_id+" td");

for(var i=1;i<tds.size();i++){
tds[i].innerHTML=$("#"+tds[i].editTemplate).val();
}
}
//根据table id 删除行,将行禁用掉,以备以后修改成禁用修改
function removeRow(table_id){

$('#'+table_id+' input[type="checkbox"]').not("#ck_0").each(function(){

if(this.checked){
$("#"+this.value)[0].style.display="none";
}

});
}
//返回表格中所有的数据的json数据,已备传至后台
function getJsonString(table_id){

var trd = "[";
$("#"+table_id+" tr").not("#"+table_id+" tr:first").each(function(){
if(this.style.display!= "none"){
var tds = $("#"+table_id+" #"+this.id+" td");
var tdd = "{";
for(var i=1;i<tds.size();i++){

if(tdd=="{"){
tdd=tdd+"\""+tds[i].childNodes[0].name+"\":\""+tds[i].childNodes[0].value+"\"";
}else{
tdd=tdd+",\""+tds[i].childNodes[0].name+"\":\""+tds[i].childNodes[0].value+"\"";
}

}
tdd=tdd+"}";


if(trd=="["){
trd=trd+tdd;
}else{
trd=trd+","+tdd;
}

}
});

trd=trd+"]";

return trd;
}

//返回表格中所有的数据的json数据,已备验证
function getJson(table_id){
return $.parseJSON(getJsonString(table_id));
}

你可能感兴趣的:(jquery)