JS数据获取工具类（一）
前期准备页面
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width =device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>JpAutoFramework</title>
<meta content="victor" name="author"/>
<link rel="stylesheet" href="../../Publics/css/styles.css">
<script type="text/javascript" src="../../FunctionJs.js"></script>
<script type="text/javascript">
function load() {
// bandTableEditor("data"); 绑定数据到页面
BandActionEditorToTable("Home?GetEditor", "data");
}
function save() {
// getFormJson("data"); 保存数据到页面，
GetFormJsonAndSave("Home?Save","data");
}
</script>
</head >
<body onload="load()" style="margin: auto">
<form>
<table id="data" class="editorTable" style="margin: auto; width: 80%;">
<tr>
<th> 编号 </th>
<td> <input type="text" readonly="readonly" id="ID" /></td>
</tr>
<tr>
<th> 项目名称 </th>
<td> <input type="text" id="Names" /></td>
</tr>
<tr>
<th> 消费类型 </th>
<td> <select width="350px" id="TYPEID" action="Type?Get|ID&TypeName"></select></td>
</tr>
<tr>
<th> 金额 </th>
<td> <input type="text" id="PRICE" /></td>
</tr>
<tr>
<th> 账目类型 </th>
<td>
<select type="text" id="ISOUT">
<option value="0">支出</option>
<option value="1">收入</option>
<option value="2">信用卡消费</option>
<option value="3">信用卡还款</option>
</select>
</td>
</tr>
<tr>
<th> 日期 </th>
<td> <input type="text" id="Dates" /></td>
</tr>
<tr>
<th> 描述 </th>
<td>
<textarea rows="10" cols="38" id="Remark"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<div style="float: left" align="left">
<input type="button" class="btn0" onclick="save()" value="保存" align="right" />
</div>
<div style="float: left; margin-left: 200px;" align="right">
<input type="button" onclick="CloseForm()" class="btn1" value="关闭" />
</div>
</td>
</tr>
</table>
</form>
</body >
</html >
1.绑定数据 到 编辑页面
/**
* 绑定数据到 编辑 列表
* @param {} json json数据
* @param {} trName 前台模板tr id
* @returns {} object
*/
function bandTableEditor(json, tableName) {
//得到table 内的所有Input 并绑定
var table = document.getElementById(tableName);
var inputs = table.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "text") {
var _id = inputs[i].id;
var _value = eval("(json[0]." + _id + ")");
inputs[i].value = _value;
}
}
//得到table 内的所有select 并绑定
var selects = table.getElementsByTagName("select");
for (var s = 0; s < selects.length; s++) {
var select = selects[s];
var sid = select.id;
try {
var action = select.getAttribute("action").split('|');
var actionInfo = action[0];
var member = action[1].split('&');
var selectJson = Hander(actionInfo);
// selectJson = '[{"ID":1,"TypeName":"餐饮"},{"ID":2,"TypeName":"服装"},{"ID":3,"TypeName":"住房"},{"ID":4,"TypeName":"交通"},{"ID":5,"TypeName":"教育"},{"ID":6,"TypeName":"通讯"},{"ID":7,"TypeName":"健康"},{"ID":8,"TypeName":"娱乐"},{"ID":9,"TypeName":"红包"},{"ID":10,"TypeName":"人情"},{"ID":11,"TypeName":"其他"}]';
// alert(selectJson);
var jso = eval("(" + selectJson + ")");
var opt = "";
for (var js = 0; js < jso.length; js++) {
var j = jso[js];
var valueMember = eval("(j." + member[0] + ")");
var dispalyMember = eval("(j." + member[1] + ")");
opt += "<option value=\"" + valueMember + "\">"+dispalyMember+"</option>";
}
select.innerHTML = opt;
} catch (e) {
}
//得到 table 所有文本域
var textareas = table.getElementsByTagName("textarea");
for (var t = 0; t < textareas.length; t++) {
var tid = textareas[t].id;
var tvalue = eval("(json[0]." + tid + ")");
textareas[t].value = tvalue;
}
}
}
2.得到编辑好的数据
获取下图数据
/**
* 得到编辑好的数据
* @param {} tableName table的Id
* @returns {} object
*/
function getFormJson(tableName) {
var table = document.getElementById(tableName);
var inputs = table.getElementsByTagName("input");
//得到所有 input
var json = "";// 格式 '{"ID":1,"TypeName":"餐饮"}'
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type != "button" && inputs[i].type != "submit") {
var _id = inputs[i].id;
var _value = inputs[i].value;
json += '"' + _id + '":"' + _value + '",';
}
}
//得到所有select
var selects = table.getElementsByTagName("select");
for (var s = 0; s < selects.length; s++) {
var select = selects[s];
var id = select.id;
var index = select.selectedIndex; // 选中索引
var value = select.options[index].value; // 选中值
alert(value);
json += '"' + id + '":"' + value + '",';
}
//得到 table 所有文本域
var textareas = table.getElementsByTagName("textarea");
for (var t = 0; t < textareas.length; t++) {
var tid = textareas[t].id;
var tvalue=textareas[t].value;
json += '"' + tid + '":"' + tvalue + '",';
}
return "{"+json+"}";
}以上方法中使用到了 Hander()方法 ，具体
点击打开链接 https://blog.csdn.net/qq_28254093/article/details/80045163