像这种页面,我们往往不是通过提交表单来处理这些数据,因为如果在后台去遍历处理这些大量的数据是非常繁琐的;比较好的做法是在前台页面中将数据以对象形式保存在json中,然后在后台直接将json转换成我们需要的对象,这">
> 웹 프론트엔드 > JS 튜토리얼 > table_jquery에서 데이터를 추가, 저장 및 삭제하기 위한 jquery 작업의 예

table_jquery에서 데이터를 추가, 저장 및 삭제하기 위한 jquery 작업의 예

WBOY
풀어 주다: 2016-05-16 16:48:15
원래의
1363명이 탐색했습니다.

table_jquery에서 데이터를 추가, 저장 및 삭제하기 위한 jquery 작업의 예
이와 같은 페이지의 경우 양식을 제출하여 이러한 데이터를 처리하지 않는 경우가 많습니다. 왜냐하면 백그라운드에서 이러한 대량의 데이터를 탐색하고 처리하는 것이 매우 번거롭기 때문입니다. 포그라운드 페이지에서 json에 데이터를 객체 형태로 저장한 후, 백그라운드에서 json을 필요한 객체로 직접 변환하여 객체를 직접 처리할 수 있도록!

추가 버튼

코드 복사 코드는 다음과 같습니다.

< ;입력 이름 ="button" type="button" value="Add" onClick="addRowForPswdBasicFillTemplate('pswd_basic_fill_template')">

테이블 ID는 pswd_basic_fill_template
메소드 추가
코드 복사 코드는 다음과 같습니다.

function addRowForPswdBasicFillTemplate(tid){
var applyAreaOptionStr = $('#applyAreaOptionStr' ).val(); //선택 상자
did = tid
var tr = $("")에 대한 일부 초기화는 다음과 같습니다. attr("bgcolor", "#FFFFFF");
tr.append($("").html(""));
tr.append($("").html(""));
tr. append($("< ;td>").html(""))
tr. Append($("").html(""))
tr.append($("").html("< ;select name='apply_Area ' id='apply_Area'>" applyAreaOptionStr ""));
tr.append($("").html( ""))
tr.append($("< td>"));
tr.append($ ("").html("<입력 유형='text' name='cap' id='cap' size='5'/>" )); tr.append($("").html("") );
tr.append($("").html("
"));
tr.appendTo ($("#" tid));
setRowNumber_1(tid); //업 및 다운 작업에 사용될 번호를 저장합니다.
}

저장 버튼

코드 복사 코드는 다음과 같습니다.
< ;input name="button" type="button" value="Save" 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 ;ipswd_basic_fill_template[i]=JSON.stringify(pswd_basic_fill_template[i])
}
$.post("",{"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 getPswdBasicFill 템플릿(){
pswd_basic_fill_template=[];
var trs=eval("$("#" did " tbody tr")")
var result=true; ){
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 form = $(tr).find("textarea[name='formula']").val()
var cap = $(tr).find("input[name='cap']").val();
var baseValue = $(tr).find("input[name='base_value']").val( );
var AssessmentOrg = $(tr).find("select[name='assessOrg']").val()
var AssessmentOrgName = $(tr).find("select[name=' AssessmentOrg']").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("指标name称불能为공간");
결과 = 거짓;
거짓을 반환합니다.
}
if(indexName.length<1){
showInfo("指标代号不能为空");
결과 = 거짓;
거짓을 반환합니다.
}
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);
})
결과 반환;
}
前台的操작품就完成了,下face看一看后台적操작품
struts配置文件

@list
<결과 이름="실패">secassessment/basicFillTemplate/basicFillTemplateNew

后台操작품
public void save() {
String obj = request().getParameter("tempLateList");
목록 결과 = JSonUtil.paserJsonArray(SecBasicFillTemplate.class,obj);
//将json转化为对象
}
下면看看删除操작
删除按钮
//删除一行数据
function delRowForSpacialById(tid){
var selObj=getSelRowJnSpacial(tid);
if(selObj){
var result = verify("确定将记录删除?");
if(result){
var id = selObj.parent().parent();
var idValue = id.find("input[name='idObj']").val ();
if(idValue!=null && idValue.length>0){
$.post("",{"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; "작동할 라인을 선택하세요");
return null;
}
}
struts 구성 파일
@list

백그라운드 메소드
public void delete(String id) 🎜>//Method
}
위로 이동 및 아래로 이동 기능
버튼


//위로 행 이동
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(); 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 표현식="$("#" tid " tbody tr")"; tbody= eval(표현식);
$.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 표현식="$("#" tid " tbody tr")"
var tbody=eval(표현식);
$.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)
(idObj==null && f ==null){
var fValue = "";
if(tid=="zdppbzlb"){
fValue = "" ;
}
$(tr).find("td:nth-child(4)").html(fValue);
$(tr).find(" td:nth-child(5) )").html($("#selectHtml").val());
//var AssessmentOrgHtml = "< /input>" $("#assessOrgHtml").val();
//$(tr).find("td:last-child").html(assessOrgHtml);
}
}
})
}


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿