js实现的捐赠管理完整实例

时间：2021-05-26

本文实例讲述了js捐赠管理完整实现方法。分享给大家供大家参考。具体实现方法如下：

index.html页面如下：

复制代码 代码如下:<!DOCTYPE html>
<html xmlns="http://Name;
trnew.insertCell(-1).innerHTML = res.money;
trnew.insertCell(-1).innerHTML = res.date;
trnew.insertCell(-1).innerHTML = "<a href='#' onclick='DelObj(this)' >删除</a> <a href='#' onclick='UpObj(this)'>修改</a>";
};

//给查询按钮绑定事件
gel("btnSearch").onclick = function () {
if (gel("selSearchOrg").value == -1) {
return;
}

//1.获取要查询的受捐赠单位的orgid
var orgId = gel("selSearchOrg").value;
//2.在ListData数组中定义一个根据orgid查询的方法,并在这里调用
var arrRes = listData.queryByOrId(orgId);
//3.将旧的表格数据移除显示,一定要从下到上清空显示
var trs = gel("tbList").rows;

for (var j = trs.length-1; j>0; j--) {
gel("tbList").deleteRow(j);
}
//4.显示新的数据arrRes
for (var i = 0; i < arrRes.length; i++) {
addRow(arrRes[i]);
}
};

//给上一页绑定事件
gel("btnprePage").onclick = function() {
if (pageNow > 1) {
pageNow--;
showPage();
} else {
alert("已经是第一页!")
}
};
//给下一页绑定事件
gel("btnnextPage").onclick = function () {
if(pageNow<listData.length/pageSize)
{
pageNow++;
showPage();
}else
{
alert("已经是最后一页!");
}
};
};
var pageNow = 1;
var pageSize = 5;
function showPage() {
var trs = gel("tbList").rows;

for (var j = trs.length - 1; j > 0; j--) {
gel("tbList").deleteRow(j);
}

//1.根据pageNow和pageSize返回一个数组
var res = listData.fenyeQuery(pageNow, pageSize);
for (var i = 0; i < res.length; i++) {
addRow(res[i]);
}
}
</script>
</head>
<body>
<div id="container">
<h1>捐赠管理</h1>
<div class="search">
受捐单位
<select id="selSearchOrg">
<option value="-1">--请选择--</option>
</select>
<input type="button" id="btnSearch" value="查询" class="btn" /> <input type="button" value="上一页" class="btn" id="btnprePage" /> <input type="button" value="下一页" class="btn" id="btnnextPage" /><span id="pageBar"></span>
</div>
<div class="search">
捐赠人：<input type="text" id="txtName" class="inputShort" size="8" />
受捐单位：
<select id="selAddOrg">
</select>
金额：<input type="text" id="txtMoney" class="inputShort" size="8" />
受捐日期：<input type="text" id="txtDate" class="inputShort" size="10" />
<input type="button" id="btnAdd" value="新增" class="btn" />
</div>
<table id="tbList" class="tbList" cellspacing="0" cellpadding="0">
<tr class="th">
<td>序号</td>
<td>捐赠人</td>
<td>受捐单位</td>
<td>金额</td>
<td>受捐日期</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
</html>

css.css如下：
复制代码 代码如下:* {
margin: 0px;
padding: 0px;
}

body {
width: 900px;
margin: 0px auto;
padding-top: 20px;
}

h1 {
padding: 15px;
text-align: center;
}

#container {
width: 900px;
height: auto;
}

.header, .search {
width: 900px;
height: 30px;
line-height: 30px;
border: 1px solid #0094ff;
margin-top: 3px;
padding: 0px 5px;
}

.tbList {
width: 912px;
height: auto;
}

.tbList th {
border: 1px solid #000;
background: #0094ff;
height: 30px;
font-weight: bold;
line-height: 30px;
color: #fff;
}

.inputShort {
width: 100px;
}

.btn {
width: 70px;
height: 25px;
line-height: 25px;
font-weight: bold;
text-align: center;
}

td {
border: 1px solid;
height: 25px;
text-indent: 1em;
border-collapse: collapse;
}

希望本文所述对大家的javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章