这次给大家带来jquery对table中数据的操作方法详解，jquery对table中数据操作的注意事项有哪些，下面就是实战案例，一起来看一下。
像这种页面，我们往往不是通过提交表单来处理这些数据，因为如果在后台去遍历处理这些大量的数据是非常繁琐的；比较好的做法是在前台页面中将数据以对象形式保存在json中，然后在后台直接将json转换成我们需要的对象，这样我们的直接可以处理对象了！
添加按钮
<input name="button" type="button" value="添加" onclick="addrowforpswdbasicfilltemplate('pswd_basic_fill_template')">
table id是pswd_basic_fill_template
添加方法
function addrowforpswdbasicfilltemplate(tid){
var applyareaoptionstr = $('#applyareaoptionstr').val(); //这里是对select框的一些初始化
did = tid;
var tr = $("<tr></tr>").attr("bgcolor","#ffffff");
tr.append($("<td></td>").html("<input type='radio' name='radio' value='checkbox'></td>"));
tr.append($("<td></td>").html(""));
tr.append($("<td></td>").html("<input type='text' name='index_name' id='index_name' />"));
tr.append($("<td></td>").html(""));
tr.append($("<td></td>").html("<select name='apply_area' id='apply_area'>"+applyareaoptionstr+"</select>"));
tr.append($("<td></td>").html("<select name='index_species' id='index_species'>"+$("#indexspecieshtml").val()+"</select>"));
tr.append($("<td></td>").html("<textarea maxlength='500' rows='3' cols='20' name='formula' id='formula'/>"));
tr.append($("<td></td>").html("<input type='text' name='cap' id='cap' size='5'/>"));
tr.append($("<td></td>").html("<input type='text' name='base_value' id='base_value' size='5'/>"));
tr.append($("<td></td>").html("<input type='hidden' id='orgid' name='orgid' />
<select name='assessorg' id='assessorg'>"+$("#assessorghtml").val()+"</select>"));
tr.appendto($("#"+tid));
setrownumber_1(tid); //保存编号，上移下移操作会用到 ，先不关注
}
保存按钮
<input name="button" type="button" value="保存" onclick="savepswdbasicfilltemplate('pswd_basic_fill_template')">
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='/secbasicfilltemplate/save'/>",{"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='index_code']").val();
var indexname = $(tr).find("input[name='index_name']").val();
var indextype = $(tr).find("select[name='index_type']").find("option:selected").text();
var indexspecies = $(tr).find("select[name='index_species']").find("option:selected").text();
var formula = $(tr).find("textarea[name='formula']").val();
var cap = $(tr).find("input[name='cap']").val();
var basevalue = $(tr).find("input[name='base_value']").val();
var assessorg = $(tr).find("select[name='assessorg']").val();
var assessorgname = $(tr).find("select[name='assessorg']").find("option:selected").text();
var idobj = $(tr).find("input[name='idobj']").val();
var indexvalue = $(tr).find("input[name='index_value']").val();
var templatetype = "2";
if(did=="zdppbzlb"){
templatetype = "3";
}else if(did=="fjsjbz"){
templatetype = "4";
assessorg = $(tr).find("select[name='countyorg']").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 = $('#postindex').val();
var postindexname = $('#postindex').find("option:selected").text();
var applyareaid = $(tr).find("select[name='apply_area']").val();
var applyareaname = $(tr).find("select[name='apply_area']").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('pswd_basic_fill_template')" >
//删除一行的数据
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='idobj']").val();
if(idvalue!=null && idvalue.length>0){
$.post("<c:url value='/secbasicfilltemplate/delete'/>",{"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('pswd_basic_fill_template')">
<input name="button" type="button" value="下移" onclick="moveafter('pswd_basic_fill_template')">
//上移行
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='idobj']").val();
var f = $(tr).find("td:nth-child(4)").find("input[name='index_code']").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='index_code' name='index_code' value='f"+fnew+"' readonly='true' size='5'>";
if(tid=="zdppbzlb"){
fvalue = "<input id='index_code' name='index_code' value='k"+fnew+"' readonly='true' size='5'>";
}
$(tr).find("td:nth-child(4)").html(fvalue);
$(tr).find("td:nth-child(5)").html($("#selecthtml").val());
//var assessorghtml = "<input type='hidden' name='orgid' id='orgid'></input>"+$("#assessorghtml").val();
//$(tr).find("td:last-child").html(assessorghtml);
}
}
})
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery+ajax动态生成table步骤详解
jquery实现分章节锚点回到顶部效果
以上就是jquery对table中数据的操作方法详解的详细内容。