listData.updateRec = function(obj) {
for (var i = 0; i < listData.length; i++) {
if (listData[i].id = obj.id) {
listData[i] = obj;
break;
}
}
};
//定义一个全局的变量 ,检测是否取消个性
var isCancelUpdate = false;
//定义三个文本input控件
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("select");
listData.delRecById = function (id) {
for (var i = 0; i < listData.length; i++) {
if (listData[i].id == id) {
//删除
/*
1.将从这个ID所在的位置开始,将后面的每一个元素都往前面移动一位
2.最后一个元素重复了,要将其清除
*/
for (var j = i; j < listData.length - 1; j++) {
listData[j] = listData[j + 1];
}
}
}
listData.length = listData.length - 1;
};
//把文本换成input文本框
function txtToInput(tdName, inputName) {
tdName.setAttribute("oldValue", tdName.innerHTML);//先保存原来的内容,如果取消,就恢复
inputName.value = tdName.innerHTML;
tdName.appendChild(inputName);
tdName.removeChild(tdName.firstChild);
}
function txtToSelect(tdName, selObj) {
tdName.appendChild(selObj);
tdName.removeChild(tdName.firstChild);
selObj.value = tdName.getAttribute("orgId");
}
function selectorText(tdName) {
var orid = SeleteOrg.value;
var orgName = listOrgs.getOrgsById(orid).comName;
// tdName.setAttribute("orgId", SeleteOrg.value);
tdName.innerHTML = orgName;
}
//把input变回文本
function InputToTxt(tdName, inputName) {
//如果点击的是取消
if (isCancelUpdate) {
tdName.innerHTML = tdName.getAttribute("oldValue");
return;
}
//点击确定修改
tdName.innerHTML = inputName.value;
}
//把select控件变回文本
function seleToTxt(tdName, selName) {
// tdName.appendChild(selName);
var orgId = SeleteOrg.value;
//删除之前的
tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName;
}
//取消修改
function CancelUp(obj) {
isCancelUpdate = true;//点击的是取消
doCancel(obj);
isCancelUpdate = false;
}
function doCancel(obj) {
var trCur = obj.parentElement.parentElement;
var tds = trCur.childNodes;
//全部使用原始的td下面的值(保存在Attribute中)
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='#' >删除</a> <a href='#'>修改</a>";
// isCancelUpdate = false;
//确定取消成功后就要置trCur为null
trCur = null;
}
var trCur = null;
function UpObj(obj) {
if (trCur != null) {
//说明有行处于编辑状态,要取消其修改
isCancelUpdate = true;
//取消那一行的编辑
doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild,就是上一行的<a 修改>
}
//得到当前所在的行
trCur = obj.parentElement.parentElement;
var tds = trCur.childNodes;
//捐赠人input修改
txtToInput(tds[1], InputPerName);
//金额
txtToInput(tds[3], InputMoney);
//受捐日期
txtToInput(tds[4], InputDate);
//下拉选择单位
txtToSelect(tds[2], SeleteOrg);
//修改链接变成取消
tds[5].innerHTML = "<a href='#' >确定</a> <a href='#'>取消</a>";
}
//确定修改
function doUpObj(obj) {
isCancelUpdate = false;
trCur = obj.parentElement.parentElement;
//1.修改数组中对应的记录
var rec = { "id": trCur.childNodes[0].innerHTML, "perName": trCur.childNodes[1].childNodes[0].value, "orgId": trCur.childNodes[2].childNodes[0].value, "money": trCur.childNodes[3].childNodes[0].value, "date": trCur.childNodes[4].childNodes[0].value };
//调用方法来修改ListData中相应的记录
listData.updateRec(rec);
//2.修改表格中的记录
InputToTxt(trCur.childNodes[1], InputPerName);
seleToTxt(trCur.childNodes[2], SeleteOrg);
InputToTxt(trCur.childNodes[3], InputMoney);
InputToTxt(trCur.childNodes[4], InputDate);
trCur.childNodes[5].innerHTML = "<a href='#' >删除</a> <a href='#'>修改</a>";
js实现的捐赠管理完整实例(2)
内容版权声明:除非注明,否则皆为本站原创文章。