jqueryを使ってテーブルデータを追加・保存・削除する方法を詳しく解説

この大量のデータをバックグラウンドで走査して処理するのは非常に面倒なので、多くの場合、フォームを送信してこのデータを処理しません。より良い方法は、データをフロント ページのオブジェクトの形式で JSON に保存することです。次に、バックグラウンドで json を必要なオブジェクトに直接変換するので、オブジェクトを直接処理できるようになります。

追加ボタン

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

テーブル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=&#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转化为对象 
}

削除操作を見てみましょう
削除ボタン

りー

以上がjqueryを使ってテーブルデータを追加・保存・削除する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。