cari

Rumah >hujung hadapan web >tutorial js >jquery对table中数据的操作方法详解

jquery对table中数据的操作方法详解

php中世界最好的语言
php中世界最好的语言asal
2018-04-24 13:48:271855semak imbas

这次给大家带来jquery对table中数据的操作方法详解，jquery对table中数据操作的注意事项有哪些，下面就是实战案例，一起来看一下。jquery对table中数据的操作方法详解 

像这种页面，我们往往不是通过提交表单来处理这些数据，因为如果在后台去遍历处理这些大量的数据是非常繁琐的；比较好的做法是在前台页面中将数据以对象形式保存在json中，然后在后台直接将json转换成我们需要的对象，这样我们的直接可以处理对象了！
添加按钮

<input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTemplate(&#39;pswd_basic_fill_template&#39;)">

table id是pswd_basic_fill_template
添加方法 

function addRowForPswdBasicFillTemplate(tid){ 
var applyAreaOptionStr = $(&#39;#applyAreaOptionStr&#39;).val(); //这里是对select框的一些初始化 
did = tid; 
var tr = $("<tr></tr>").attr("bgcolor","#FFFFFF"); 
tr.append($("<td></td>").html("<input type=&#39;radio&#39; name=&#39;radio&#39; value=&#39;checkbox&#39;></td>")); 
tr.append($("<td></td>").html("")); 
tr.append($("<td></td>").html("<input type=&#39;text&#39; name=&#39;index_name&#39; id=&#39;index_name&#39; />")); 
tr.append($("<td></td>").html("")); 
tr.append($("<td></td>").html("<select name=&#39;apply_Area&#39; id=&#39;apply_Area&#39;>"+applyAreaOptionStr+"</select>")); 
tr.append($("<td></td>").html("<select name=&#39;index_species&#39; id=&#39;index_species&#39;>"+$("#indexSpeciesHtml").val()+"</select>")); 
tr.append($("<td></td>").html("<textarea maxlength=&#39;500&#39; rows=&#39;3&#39; cols=&#39;20&#39; name=&#39;formula&#39; id=&#39;formula&#39;/>")); 
tr.append($("<td></td>").html("<input type=&#39;text&#39; name=&#39;cap&#39; id=&#39;cap&#39; size=&#39;5&#39;/>")); 
tr.append($("<td></td>").html("<input type=&#39;text&#39; name=&#39;base_value&#39; id=&#39;base_value&#39; size=&#39;5&#39;/>")); 
tr.append($("<td></td>").html("<input type=&#39;hidden&#39; id=&#39;orgid&#39; name=&#39;orgid&#39; /> 
<select name=&#39;assessOrg&#39; id=&#39;assessOrg&#39;>"+$("#assessOrgHtml").val()+"</select>")); 
tr.appendTo($("#"+tid)); 
setRowNumber_1(tid); //保存编号，上移下移操作会用到 ，先不关注 
}

保存按钮

<input name="button" type="button" value="保存" onClick="savePswdBasicFillTemplate(&#39;pswd_basic_fill_template&#39;)">
function savePswdBasicFillTemplate(tid){ 
did = tid; 
var result = getPswdBasicFillTemplate(); //封装数据操作，请仔细看 
if(result){ 
/* 
if(pswd_basic_fill_template.length<1){ 
showInfo("请添加基础数据标准"); 
return; 
} 
*/ 
for(var i=0;i<pswd_basic_fill_template.length;i++){ 
pswd_basic_fill_template[i]=JSON.stringify(pswd_basic_fill_template[i]); 
} 
$.post("<c:url value=&#39;/secbasicFillTemplate/save&#39;/>",{"tempLateList":"["+pswd_basic_fill_template+"]"}, 
function(data) { 
if("false"==data){ 
showInfo("请先保存基础信息！"); 
}else{ 
//delAllTr("pswd_basic_fill_template"); //删除行 
showInfo("保存成功！") 
if(did!="fjsjbz"){ 
changeTaskType(tid); 
} 
} 
}); 
} 
} 
//基础填报模版 
var pswd_basic_fill_template = {}; 
//要删除的tableId 
var did = "pswd_basic_fill_template"; 
//获取模板值 
function getPswdBasicFillTemplate(){ 
pswd_basic_fill_template=[]; 
var trs=eval("$(\"#"+did + " tbody tr\")"); 
var result=true; 
$.each(trs,function(i,tr){ 
var order = $(tr).find("td:nth-child(2)").text(); 
var indexCode = $(tr).find("input[name=&#39;index_code&#39;]").val(); 
var indexName = $(tr).find("input[name=&#39;index_name&#39;]").val(); 
var indexType = $(tr).find("select[name=&#39;index_type&#39;]").find("option:selected").text(); 
var indexSpecies = $(tr).find("select[name=&#39;index_species&#39;]").find("option:selected").text(); 
var formula = $(tr).find("textarea[name=&#39;formula&#39;]").val(); 
var cap = $(tr).find("input[name=&#39;cap&#39;]").val(); 
var baseValue = $(tr).find("input[name=&#39;base_value&#39;]").val(); 
var assessOrg = $(tr).find("select[name=&#39;assessOrg&#39;]").val(); 
var assessOrgName = $(tr).find("select[name=&#39;assessOrg&#39;]").find("option:selected").text(); 
var idObj = $(tr).find("input[name=&#39;idObj&#39;]").val(); 
var indexValue = $(tr).find("input[name=&#39;index_value&#39;]").val(); 
var templateType = "2"; 
if(did=="zdppbzlb"){ 
templateType = "3"; 
}else if(did=="fjsjbz"){ 
templateType = "4"; 
assessOrg = $(tr).find("select[name=&#39;countyOrg&#39;]").val(); 
} 
var taskType = $("#task_type").val(); 
if(indexCode.length<1){ 
showInfo("指标名称不能为空"); 
result = false; 
return false; 
} 
if(indexName.length<1){ 
showInfo("指标代号不能为空"); 
result = false; 
return false; 
} 
var postIndexId = $(&#39;#postIndex&#39;).val(); 
var postIndexName = $(&#39;#postIndex&#39;).find("option:selected").text(); 
var applyAreaId = $(tr).find("select[name=&#39;apply_Area&#39;]").val(); 
var applyAreaName = $(tr).find("select[name=&#39;apply_Area&#39;]").find("option:selected").text(); 
var pswd_basic_fill_templateBean={ 
"postIndexId":postIndexId,"postIndexName":postIndexName,"applyAreaId":applyAreaId,"applyAreaName":applyAreaName, 
"indexCode":indexCode,"templateType":templateType,"indexValue":indexValue, 
"indexName":indexName,"taskType":taskType,"order":order,"id":idObj,"baseValue":baseValue, 
"indexSpecies":indexSpecies,"formula":formula,"cap":cap,"orgName":assessOrgName,"orgid":assessOrg 
} 
pswd_basic_fill_template.push(pswd_basic_fill_templateBean); 
}) 
return result; 
}

前台的操作就完成了，下面看一看后台的操作
struts配置文件 

<method name="save" uri="/secbasicFillTemplate/save"> 
<result name="success" type="redirect">@list</result> 
<result name="failed">secassessment/basicFillTemplate/basicFillTemplateNew</result> 
</method>

后台操作 

public void save() { 
String obj = request().getParameter("tempLateList"); 
List<SecBasicFillTemplate> result = JSonUtil.paserJsonArray(SecBasicFillTemplate.class,obj); 
//将json转化为对象 
}

下面看看删除操作
删除按钮

<input name="button" type="button" value="删除" onClick="delRowForSpacialById(&#39;pswd_basic_fill_template&#39;)" > 
//删除一行的数据 
function delRowForSpacialById(tid){ 
var selObj=getSelRowJnSpacial(tid); 
if(selObj){ 
var result = confirm("确定将记录删除？"); 
if(result){ 
var id = selObj.parent().parent(); 
var idValue = id.find("input[name=&#39;idObj&#39;]").val(); 
if(idValue!=null && idValue.length>0){ 
$.post("<c:url value=&#39;/secbasicFillTemplate/delete&#39;/>",{"ids":idValue},function(){ 
selObj.parent().parent().remove(); 
}) 
}else{ 
selObj.parent().parent().remove(); 
} 
} 
} 
} 
// 获取选中的行 
function getSelRowJnSpacial(tid){ 
var selObj=eval("$(\"#"+tid+" input[@type=radio][checked]\")"); 
if(selObj.html()!=null){ 
return selObj; 
}else{ 
showInfo("请选择要操作的行"); 
return null; 
} 
}

struts 配置文件 

<method name="delete" uri="/secbasicFillTemplate/delete" > 
<result name="success" type="redirect">@list</result> 
</method>

后台方法 

public void delete(String ids) { 
//方法 
} 
上移下移功能 
按钮 
<input name="button" type="button" value="上移" onClick="moveBefore(&#39;pswd_basic_fill_template&#39;)"> 
<input name="button" type="button" value="下移" onClick="moveAfter(&#39;pswd_basic_fill_template&#39;)"> 
//上移行 
function moveBefore(tid){ 
did =tid; 
var selObj= $("input:radio[checked]"); 
if(selObj==null){ 
showInof("请选择要移动的行"); 
}else{ 
var rowIndex = selObj.parent().parent()[0].rowIndex; 
if(parseInt(rowIndex)<=2){ 
showInfo("已经到顶,不能再上移了"); 
return; 
} 
var preObj=selObj.parent().parent().prev(); 
var selRow=selObj.parent().parent().clone(); 
preObj.before(selRow); 
selObj.parent().parent().remove(); 
setRowNumber_1_1(did); 
} 
} 
function setRowNumber_1_1(tid){ 
var fNew = 1; 
var expression="$(\"#"+tid+" tbody tr\")"; 
var tbody=eval(expression); 
$.each(tbody,function(i,tr){ 
if(i>=0){ 
var number=i+1; 
$(tr).find("td:nth-child(2)").text(number); 
} 
}) 
} 
//下移行 
function moveAfter(tid){ 
did =tid; 
var selObj= $("input:radio[checked]"); 
if(selObj==null){ 
showInof("请选择要移动的行"); 
}else{ 
var r1 = selObj.parent().parent()[0].rowIndex; 
var a1 = eval("$(\"#"+did+" tbody tr\")").size(); 
if(parseInt(selObj.parent().parent()[0].rowIndex)-1 >= a1){ 
showInfo("已经到最后一行,不能再下移了"); 
return; 
} 
var nextObj=selObj.parent().parent().next(); 
var selRow=selObj.parent().parent().clone(); 
nextObj.after(selRow); 
selObj.parent().parent().remove(); 
setRowNumber_1_1(tid); 
} 
} 
//设置rowNumber的序号 
function setRowNumber_1(tid){ 
var fNew = 1; 
var expression="$(\"#"+tid+" tbody tr\")"; 
var tbody=eval(expression); 
$.each(tbody,function(i,tr){ 
if(i>=0){ 
var idObj = $(tr).find("input[name=&#39;idObj&#39;]").val(); 
var f = $(tr).find("td:nth-child(4)").find("input[name=&#39;index_code&#39;]").val(); 
if(f!=null){ 
var f1 = f.substring(1); 
if(f1>=0){ 
fNew = parseInt(f1)+1; 
} 
} 
var number=i+1; 
$(tr).find("td:nth-child(2)").text(number); 
if(idObj==null && f==null){ 
var fValue = "<input id=&#39;index_code&#39; name=&#39;index_code&#39; value=&#39;F"+fNew+"&#39; readonly=&#39;true&#39; size=&#39;5&#39;>"; 
if(tid=="zdppbzlb"){ 
fValue = "<input id=&#39;index_code&#39; name=&#39;index_code&#39; value=&#39;K"+fNew+"&#39; readonly=&#39;true&#39; size=&#39;5&#39;>"; 
} 
$(tr).find("td:nth-child(4)").html(fValue); 
$(tr).find("td:nth-child(5)").html($("#selectHtml").val()); 
//var assessOrgHtml = "<input type=&#39;hidden&#39; name=&#39;orgid&#39; id=&#39;orgid&#39;></input>"+$("#assessOrgHtml").val(); 
//$(tr).find("td:last-child").html(assessOrgHtml); 
} 
} 
}) 
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JQuery+Ajax动态生成Table步骤详解

jQuery实现分章节锚点回到顶部效果

Atas ialah kandungan terperinci jquery对table中数据的操作方法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery实现分章节锚点回到顶部效果Artikel seterusnya：JQuery表格进行操作有有哪些技巧

Artikel berkaitan

Lihat lagi