Este artigo descreve o método completo de implementação do gerenciamento de doações JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A página index.html é a seguinte:
Copie o código da seguinte forma: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS Gerenciamento de doações </ititure>
<link href = "css/css.css" rel = "Stylesheet" type = "text/css"/>
<script type = "text/javascript">
// Matriz de unidades doadas
var listorgs = [
{"id": "1", "comname": "One Foundation"},
{"id": "2", "comname": "Song Ching Ling Fund"},
{"id": "3", "comname": "tzu chi fundação"},
{"id": "4", "comname": "Cruz Vermelha"},
{"id": "5", "comname": "Wolf Totem"}
];
// Adicione dinamicamente um método anônimo ao objeto Listorgs Array
listorgs.getorgsbyid = function (id) {
for (var i = 0; i <listorgs.length; i ++) {
if (listorgs [i] .id == id) {
retornar listorgs [i]; // retorna um objeto
}
}
};
// matriz de dados de doação
var listData = [
{"ID": "1", "Pername": "Jackie Chan", "Orgid": "1", "Money": "10000", "Date": "2012-3-3"},
{"ID": "2", "Pername": "Jet Li", "Orgid": "2", "Money": "10000", "Date": "2012-3-3"},
{"id": "3", "Pername": "Chen Guangbiao", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"ID": "4", "Pername": "Hu Jintao", "Orgid": "1", "Money": "10000", "Date": "2012-3-3"},
{"id": "5", "Pername": "Zhou Xingchi", "Orgid": "2", "Money": "10000", "Date": "2012-3-3"},
{"id": "6", "Pername": "Dawn", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"ID": "7", "Pername": "Lobisomem", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "8", "Pername": "Madman", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "9", "Pername": "três loucos", "orgid": "3", "Money": "10000", "Date": "2012-3-3"}
];
// Matriz de consulta de paginação
listdata.fenyeEquery = function (Pagenow, PageSize) {
var res = new Array ();
// 1. Pressione PageSize para 5, a primeira página é ListData [0] -ListData [4], e a segunda página é ListData [5] -ListData [9]
// A terceira página é ListData [10] -ListData [14]
var start = (Pagenow - 1) * Pagesize;
var end = listData.length> (Pagenow * PageSize)? (Pagenow * PageSize): listData.length;
for (var i = start; i <end; i ++) {
res [res.Length] = listData [i];
}
retornar res;
};
listdata.querybyorid = function (orid) {
var arr = new Array ();
for (var i = 0; i <listData.length; i ++) {
if (listData [i] .orgid == orid) {
arr [arr.length] = listData [i];
}
}
retornar arr;
};
listData.idnum = listData.length;
listData.addrec = função (rec) {
listData.idnum ++;
var newrec = {"id": listdata.idnum, "pername": rec.pername, "orgid": rec.orgid, "dinheiro": rec.money, "date": rec.date};
listData [listData.length] = newrec;
retornar newrec;
};
listdata.updaterec = function (obj) {
for (var i = 0; i <listData.length; i ++) {
if (listData [i] .id = obj.id) {
listData [i] = obj;
quebrar;
}
}
};
// Defina uma variável global para detectar se deve cancelar a personalidade
var iscancelupdate = false;
// Defina três controles de entrada de texto
var inputPerName = document.createElement ("input");
InputPername.type = "text";
var inputMoney = document.createElement ("input");
InputPername.type = "text";
var inputDate = document.createElement ("input");
InputPername.type = "text";
var seleteorg = document.createElement ("selecione");
listdata.delrecbyId = function (id) {
for (var i = 0; i <listData.length; i ++) {
if (listData [i] .id == id) {
//excluir
/*
1. Comece a partir do local onde este ID está localizado e mova cada elemento para trás um por um
2. O último elemento é repetido e precisa ser limpo
*/
for (var j = i; j <listData.length - 1; j ++) {
listData [j] = listData [j + 1];
}
}
}
listData.Length = listData.Length - 1;
};
// Troque o texto na caixa de texto de entrada
função txtToinput (tdname, inputName) {
tdname.setAttribute ("OldValue", tdname.innerhtml); // salve o conteúdo original primeiro, se cancelado, restaure -o
inputName.value = tdname.innerhtml;
tdname.appendChild (inputName);
tdname.removeChild (tdname.firstchild);
}
função txttoselect (tdname, Selobj) {
tdname.appendChild (Selobj);
tdname.removeChild (tdname.firstchild);
Selobj.value = tdname.getAttribute ("orgid");
}
função selectorText (tdname) {
var orid = seleteorg.value;
var orgname = listorgs.getorgsbyId (orid) .comname;
// tdname.setAttribute ("orgid", seleteorg.value);
tdname.innerhtml = orgname;
}
// Vire a entrada de volta ao texto
função inputTotTxt (tdname, inputName) {
// se clicar cancelar
if (iscancelupdate) {
tdname.innerhtml = tdname.getAttribute ("OldValue");
retornar;
}
// Clique para confirmar para modificar
tdname.innerhtml = inputName.value;
}
// Alterar o controle de seleção de volta ao texto
função seletotxt (tdname, selname) {
// tdname.appendChild (Selname);
var orgid = seleteorg.value;
// exclua o anterior
tdname.innerhtml = (listorgs.getorgsbyid (orgid)). comname;
}
// Cancelar modificação
função cancellup (obj) {
iscancelupdate = true; // clique em Cancelar
Docancel (OBJ);
iscancelupdate = false;
}
função docancel (obj) {
var trcur = obj.parentElement.parentElement;
var tds = trcur.childnodes;
// Todos usam os valores abaixo do TD original (salvar no atributo)
tds [1] .innerHtml = tds [1] .getAttribute ("OldValue");
tds [2] .innerhtml = listorgs.getorgsbyId (tds [2] .getAttribute ("orgid")). comname;
tds [3] .innerHtml = tds [3] .getAttribute ("OldValue");
tds [4] .innerHtml = tds [4] .getAttribute ("OldValue");
tds [5] .innerhtml = "<a href = '#' onclick = 'DELOBJ (this)'> delete </a> <a href = '#' onclick = 'upobj (this)'> modify </a>";
// iscancelupdate = false;
// Depois de confirmar que o cancelamento é bem -sucedido, defina trcur como nulo
trcur = nulo;
}
var trcur = nulo;
função upobj (obj) {
if (trcur! = null) {
// indica que há uma linha no estado de edição e sua modificação deve ser cancelada
iscancelupdate = true;
// Cancelar a edição dessa linha
Docancel (trcur.childnodes [5] .FirstChild); // trcur.childnodes [5] .Firstchild, é a <a modificação> da linha anterior
}
// Obtenha a linha atual
trcur = obj.parentElement.parentElement;
var tds = trcur.childnodes;
// Modificação de entrada de doadores
txtToinput (TDS [1], inputPerName);
//Quantia
txtToinput (TDS [3], InputMoney);
// Data de doação
txtToinput (TDS [4], inputDate);
// puxe para baixo para selecionar a unidade
txttoselect (tds [2], seleteorg);
// Modifique o link para cancelar
tds [5] .innerhtml = "<a href = '#' onclick = 'doupoBJ (this)'> ok </a> <a href = '#' onclick = 'cancellup (this)'> cancel </a>";
}
// confirmar para modificar
função doupobj (obj) {
iscancelupdate = false;
trcur = obj.parentElement.parentElement;
// 1. Modificar os registros correspondentes na matriz
var rec = {"id": trcur.childnodes [0] .innerhtml, "pername": trcur.childnodes [1] .childnodes [0] .Value, "orgid": trcur.childnodes [2] .childNodes [0]. trcur.Childnodes [3] .ChildNodes [0] .Value, "Date": trcur.Childnodes [4] .ChildNodes [0] .Value};
// chamando o método para modificar os registros correspondentes em listdata
listdata.updaterec (rec);
// 2. Modificar registros na tabela
InputTotTxt (trcur.childnodes [1], inputPerName);
setotxt (trcur.childnodes [2], seleteorg);
InputTotTxt (trcur.childnodes [3], inputmoney);
InputTotTxt (trcur.childnodes [4], inputDate);
trcur.childnodes [5] .innerhtml = "<a href = '#' onclick = 'DELOBJ (this)'> delete </a>
//trcur.childnodes[2lory.setAttribute("orgid ", seleteorg.value);
// Depois de confirmar que a modificação é bem -sucedida, defina trcur como nulo
trcur = nulo;
}
// Exclua uma linha de dados
função delobj (obj) {
// Exclua a matriz correspondente na matriz
//1. para obter a linha selecionada
var curt = obj.parentelement.parenteLement;
// 2. Obtenha o valor do ID da primeira coluna
var delid = curtr.Cells [0] .innerhtml;
// window.alert (delid);
// 3. Exclua um registro baseado em ID (ListData na matriz)
listdata.delrecbyId (Delid);
// 4. Exclua as linhas exibidas na visualização da tabela
curtr.parenteLement.RemoveChild (curtr);
}
função gel (id) {
retornar document.getElementById (id);
}
// 1. Consulta a ligação do nome da unidade, Selele é: Nó do elemento de sele
função loadorlist (selele) {
for (var i = 0; i <listorgs.length; i ++) {
var opt = nova opção (listorgs [i] .comName, listorgs [i] .id);
selele.options.add (opt);
}
}
// 2. Métodos para ligar tabelas e vincular tabelas e listdata
função loadDatalist () {
// para (var i = 0; i <listData.length; i ++) {
// addRow (listData [i]);
//}
// Exibição de paginação
showPage ();
}
função addrow (obj) {
var tRNew = gel ("tblist"). insertrow (-1);
var tdNew = trnew.insertCell (-1);
tdnew.innerhtml = obj.id;
trnew.insertCell (-1) .innerhtml = obj.pername;
var trorgname = trnew.insertCell (-1);
trorgname.setAttribute ("orgid", obj.orgid);
trorgname.innerhtml = (listorgs.getorgsbyid (obj.orgid)). comname;
trnew.insertCell (-1) .innerhtml = obj.money;
trnew.insertCell (-1) .innerhtml = obj.date;
trnew.insertCell (-1) .innerhtml = "<a href = '#' onclick = 'DELOBJ (this)'> delete </a>
}
window.onload = function () {
// Consulta de ligação
LoadorGlist (Gel ("Selsearchorg"));
// liga a unidade doada
LoadorGlist (gel ("Seladdorg"));
LoadorGlist (seleteorg);
// Tabela de ligação e ListData
LoadDatalist ();
// Adicione um novo botão para vincular um evento
gel ("btnadd"). OnClick = function () {
if ((! (gel ("txtName"). value)) || (! (Gel ("txtMoney"). value) || (! (Gel ("txtdate"). value)))) {
alerta ("entrada não pode estar vazia");
retornar;
}
// 1. Obtenha o conteúdo de entrada e empacote -o em um objeto (de acordo com o formato do ListData)
var arr = {"pername": gel ("txtName"). value, "orgid": gel ("seladdorg"). valor, "dinheiro": gel ("txtMoney").
// 2. Adicionar ao ListData Array
var res = listData.addrec (arr);
// 3. Exibido na tabela
var tRNew = gel ("tblist"). insertrow (-1);
trnew.insertCell (-1) .innerhtml = res.id;
trnew.insertCell (-1) .innerhtml = res.pername;
var tDorg = trnew.insertCell (-1);
tdorg.setAttribute ("orgid", res.orgid);
tdorg.innerhtml = listorgs.getorgsbyid (res.orgid) .comname;
trnew.insertCell (-1) .innerhtml = res.Money;
trnew.insertCell (-1) .innerhtml = res.date;
trnew.insertCell (-1) .innerhtml = "<a href = '#' onclick = 'DELOBJ (this)'> delete </a>
};
// Evento de ligação ao botão de consulta
gel ("btnsearch"). OnClick = function () {
if (gel ("selsearchorg"). value == -1) {
retornar;
}
// 1. Obtenha o orgido da unidade doadora a ser consultada
var orgid = gel ("selsearchorg").
// 2. Defina um método baseado na consulta Orgid na matriz ListData e ligue aqui
var Arrres = listData.QueryByorID (orgid);
// 3. Remova os dados antigos da tabela da exibição, certifique -se de limpar a tela de baixo para o topo
var trs = gel ("tblist"). linhas;
for (var j = tr.Length-1; j> 0; j--) {
gel ("tblist"). Deleterow (j);
}
// 4. Mostre novos dados Arrres
for (var i = 0; i <arrres.length; i ++) {
addRow (arres [i]);
}
};
// vincula eventos à página anterior
gel ("btnPrepage"). OnClick = function () {
if (pagenow> 1) {
Pagenow--;
showPage ();
} outro {
Alerta ("Já é a primeira página!")
}
};
// vincula eventos à próxima página
gel ("btnnextpage"). OnClick = function () {
if (Pagenow <listData.length/Pagesize)
{
Pagenow ++;
showPage ();
}outro
{
alerta ("já é a última página!");
}
};
};
var pagenow = 1;
var pagageSize = 5;
função showpage () {
var trs = gel ("tblist"). linhas;
for (var j = trs.Length-1; j> 0; j--) {
gel ("tblist"). Deleterow (j);
}
// 1. Retorne uma matriz de acordo com Pagenow e PageSize
var res = listData.fenyEquery (Pagenow, PageSize);
for (var i = 0; i <res.Length; i ++) {
addRow (res [i]);
}
}
</script>
</head>
<Body>
<div id = "contêiner">
<H1> Gerenciamento de doações </h1>
<div>
Unidade recebida por doadores
<select id = "selsearchorg">
<opção value = "-1">-Selecione-</pption>
</leclect>
<input type = "button" id = "btnsearch" value = "query" /> <input type = "button" value = "página anterior" id = "btnPrepage" /> <input type = "button" value = "próxima página" id = "btnnextpage" /> <span id = "pagebar"> < /span>
</div>
<div>
Doador: <input type = "text" id = "txtName" size = "8" />
Unidade recebida por doadores:
<select id = "Seladdorg">
</leclect>
Valor: <input type = "text" id = "txtMoney" size = "8" />
Data de doação: <input type = "text" id = "txtDate" size = "10" />
<input type = "button" id = "btnadd" value = "new" />
</div>
<tabela id = "tblist" CellPacing = "0" CellPadding = "0">
<tr>
<td> Número de série </td>
<td> doador </td>
<td> unidade doada </td>
<td> quantidade </td>
<td> Data da doação </td>
<td> operação </td>
</tr>
</tabela>
</div>
</body>
</html>
css.css é o seguinte:
Copie o código da seguinte forma:* {
margem: 0px;
preenchimento: 0px;
}
corpo {
Largura: 900px;
margem: 0px automático;
Top-top: 20px;
}
H1 {
preenchimento: 15px;
Alinhamento de texto: centro;
}
#container {
Largura: 900px;
Altura: Auto;
}
.Header, .search {
Largura: 900px;
Altura: 30px;
altura de linha: 30px;
Fronteira: 1px Solid #0094FF;
Margin-top: 3px;
preenchimento: 0px 5px;
}
.tblist {
Largura: 912px;
Altura: Auto;
}
.tblist th {
borda: 1px sólido #000;
Antecedentes: #0094FF;
Altura: 30px;
Peso da fonte: negrito;
altura de linha: 30px;
Cor: #ffff;
}
.InputShort {
Largura: 100px;
}
.btn {
Largura: 70px;
Altura: 25px;
altura de linha: 25px;
Peso da fonte: negrito;
Alinhamento de texto: centro;
}
TD {
borda: 1px sólido;
Altura: 25px;
Indente de texto: 1em;
colapso da fronteira: colapso;
}
Espero que este artigo seja útil para a programação JavaScript de todos.