~~~
可以和后臺進行互動，通過第一列的值進行ajax請求。然后給后面的單元格進行賦值操作。支持鍵盤添加一行、刪除一行表格、支持上下左右，快捷移到獲得焦點操作。以及鍵盤事件對數字進行驗證等。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>table editor</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.tableRow1 {
background-color: #E6F3FC;
}
.tableRow2 {
background-color: #ffffff;
}
.tableRow3 {
background-color: #FFFFC9;
color: #D40F16;
}
.tableHead {
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
white-space: nowrap;
word-break : keep-all ;
background-color: #2897E6;
}
</style>
<script type="text/javascript">
var htmlTemplate = '<tr align="center"><td><input type="text" name="report_num" size="20"/>';
htmlTemplate += '<input type="hidden" name="consign_id"/><br/>';
htmlTemplate += '<span name="msg" style="color: red;"></span></td>';
htmlTemplate += '<td><input type="text" name="contract_num" size="15"/></td>';
htmlTemplate += '<td><input type="text" name="wt_num" size="15"/></td>';
htmlTemplate += '<td><input type="text" name="wt_company" size="20"/></td>'
htmlTemplate += '<td><input type="text" name="project_name" size="20"/></td>'
htmlTemplate += '<td><input type="text" name="project_address" size="20"/></td>';
htmlTemplate += '<td><input type="hidden" name="item_id"/><input type="text" name="item_name" size="15"/></td>';
htmlTemplate += '<td><input type="text" name="report_count" size="3"/></td>';
htmlTemplate += '<td><input type="text" name="price" size="5"/></td>';
htmlTemplate += '<td><input type="text" name="amount" size="5"/></td>';
htmlTemplate += '<td><input type="text" name="ought_fare" size="5"/></td></tr>';
//添加一行表格記錄
function addRowEl(textInput, currentEL) {
//textInput = $(this),jQuery會自動傳入觸發當前事件的一個對象，即textInput，也就是這里的$(this)
var el = currentEL == undefined ? $(this) : currentEL;
if (el.attr("name") == "report_num") {
getReportInfo(el);
} else {
var trEl = el.parent().parent();
if (isAdd(trEl)) {
//var tabEl = $(this).parentsUntil("table");
//trEl.clone(true).appendTo(trEl.parent());
var template = $(htmlTemplate);
template.appendTo(trEl.parent());
template.find(":text").focusin(onReportNum).focusout(onLoadReportInfo).keyup(onInputKeyUp);
template.find(":text[name='report_num']").focus().focusin();
addClass();
}
}
}
//失去焦點時，添加一條tr行記錄
function onReportNum() {
var el = $(this);
var trEl = el.parent().parent();
if (el.attr("name") == "report_num") {
if (el.val() == "") {
var userName = "H";
if (userName.length > 0) {
el.val(userName.substring(0, 1) + new Date().getYear());
}
}
if (isAdd(trEl)) {
var template = $(htmlTemplate);
template.appendTo(trEl.parent());
template.find(":text").focusin(onReportNum).focusout(onLoadReportInfo).keyup(onInputKeyUp);
template.find(":text[name='report_num']").focusin(onReportNum).focus().focusin();
addClass();
}
} else if (el.attr("name") == "ought_fare") {
var price = trEl.find(":text[name='price']").val();
var count = trEl.find(":text[name='amount']").val();
if (price != "" && count != "") {
el.val(parseFloat(price)*parseInt(count));
}
}
}
//驗證字段值是否為空，不為空則可以添加一行
function isAdd(trEl) {
var allInput = trEl.parent().find(":text");
for (var i = 0; i < allInput.length; i++) {
var temp = $(allInput[i]);
var index = $.inArray(temp.attr("name"), ["report_num", "contract_num", "wt_num", "wt_company", "project_name", "item_name"]);
if (index != -1) {
if (temp.attr("name") == "report_num") {
if (temp.val() == "E2010" || temp.val() == "") {
return false;
}
} else {
if(temp.val() == "") {
return false;
}
}
}
}
return true;
}
function flaotInputOnly() {
if (event.keyCode > 57 || event.keyCode < 46 || event.keyCode == 47)
event.keyCode = 0;
}
String.prototype.replaceAll = function(s1, s2) {
return this.replace(new RegExp(s1, "gm"), s2); //g全局
}
//獲得當前光標的索引
function getFocusIndex(aryTr, currentEL) {
var i = 0;
var j = -1;
$(aryTr).each(function () {//得到當前元素索引
if (currentEL.attr("name") == $(this).attr("name")) {
j = i;
}
i++;
});
return j;
}
function onInputKeyUp(e) {
var event = e || window.event;
var currKeyCode = event.keyCode || event.which || event.charCode;
var currentEL = $(this);
if (currentEL.attr("name") == "report_count" || currentEL.attr("name") == "amount") {
currentEL.val(currentEL.val().replace(//D/g,''));//驗證整數
} else if (currentEL.attr("name") == "price" || currentEL.attr("name") == "ought_fare") {
var val = currentEL.val();//驗證小數
if (parseFloat(val) != val) {
var ar = val.split('');
for(var i = 0; i < ar.length; i++) {
var charCode = ar[i].charCodeAt(0);
if (charCode > 57 || charCode < 46 || charCode == 47) {
currentEL.val(val.replaceAll(ar[i], ''));
}
}
}
}
var currentTd = currentEL.parent();
var currentTr = currentTd.parent();
var aryTr = currentTr.find(":text").toArray();
var nextTd = currentTd.next("td");
var prevTd = currentTd.prev("td");
//alert(e.keyCode + ":" + currKeyCode);
if (currKeyCode == 13) {//回車，enter鍵
nextTd.find(":text").focus().focusin();//獲得下一文本域讓其獲得焦點
addRowEl(undefined, currentEL);//添加一行
} else if (currKeyCode == 45) { //insert鍵，添加一行
addRowEl(undefined, currentEL);
} else if (currKeyCode == 46) { //delete鍵，刪除一行
var tab = currentTr.parent();
var j = getFocusIndex(aryTr, currentEL);
var prevTr = currentTr.prev("tr");
var prevInput = prevTr.find(":text:eq(" + j + ")");
if (prevInput.attr("name") != undefined) {
prevInput.focus().focusin();
}
if (tab.get(0).rows.length != 2) {
currentTr.remove();
}
} else if (currKeyCode == 39) { //right鍵，后一個、右
//如果是報告編號文本域就調用ajax方法并設置委托的信息
onLoadReportInfo(undefined, currentEL);
nextTd.find(":text").focus().focusin();
} else if (currKeyCode == 38) {//up鍵，上
onLoadReportInfo(undefined, currentEL);
//得到當前元素索引
var j = getFocusIndex(aryTr, currentEL);
var prevTr = currentTr.prev("tr");
var prevInput = prevTr.find(":text:eq(" + j + ")");
if (prevInput.attr("name") != undefined) {
prevInput.focus().focusin();
}
} else if (currKeyCode == 40) {//down鍵，下一個
onLoadReportInfo(undefined, currentEL);
var j = getFocusIndex(aryTr, currentEL);
var nextTr = currentTr.next("tr");
var nextInput = nextTr.find(":text:eq(" + j + ")");
if (nextInput.attr("name") != undefined) {
nextInput.focus().focusin();
}
} else if (currKeyCode == 37) {//left鍵，左、前
onLoadReportInfo(undefined, currentEL);
prevTd.find(":text").focus().focusin();
}
}
//根據報告編號加載委托信息
function onLoadReportInfo(textInput, currentEL) {
var el = currentEL == undefined ? $(this) : currentEL;
if (el.attr("name") == "report_num") {
getReportInfo(el);
}
}
//ajax請求，通過報告編號獲得委托信息
function getReportInfo(el) {
var reportNum = $(el);
var trEl = reportNum.parent().parent();
var idEL = reportNum.next(":hidden[name='id']");
var reportVal = reportNum.val();
var aryNum = $("#sealTab :text[name='report_num']").toArray();
var aryResult = $.grep(aryNum, function (o) {
return $(o).val() == reportVal;
});
if (aryResult.length > 1) {
reportNum.parent().find("span[name='msg']").text("該編號已申請,確定重復申請!");
reportNum.attr("flag", "exist");
//return;
}
if (reportVal != "") {
$.post("transaction/reportSeal.do?method=getInfo", {id: idEL.val(), REPORT_NUM: reportVal}, function (data) {
var rs = eval(data);
if (rs.length > 0) {
if (!rs[0].valid){
reportNum.parent().find("span[name='msg']").text("沒有查詢到該編號的信息!");
reportNum.attr("flag", "invalid");
return;
} else {
if (rs.length > 2) {
$.each(rs[2], function (field, value) {
if (value != "") {
trEl.find("input[name='" + field + "']").val(value);
}
});
}
}
if (!rs[1].exists) {
reportNum.parent().find("span[name='msg']").empty();
reportNum.attr("flag", "valid");
} else {
reportNum.parent().find("span[name='msg']").text("該編號已申請,確定重復申請!");
reportNum.attr("flag", "exist");
}
}
});
}
}
$(function () {
addClass();
//為sealTab中所有的文本域添加獲得焦點、事情焦點事件
$("#sealTab :text").focusin(onReportNum).keyup(onInputKeyUp).focusout(onLoadReportInfo);
});
function addClass() {
$("#sealTr").nextAll().each(function (i) {
return i % 2 == 0 ? $(this).addClass("tableRow1").removeClass("tableRow2") : $(this).addClass("tableRow2").removeClass("tableRow1");
});
}
</script>
</head>
<body bgcolor="#ffffff">
<font color="red" style="font-size: 12px;">注意：*標記的列表格為必填的；insert插入一行（*號標記數據填寫完整時）、delete鍵刪除當前行（一行記錄時不能刪除）</font>
<table id="sealTab" width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#C7CED4">
<tr id="sealTr" class="tableHead" valign="middle">
<td align="center">
<span style="color:#ffffff">報告編號</span>
<font color="red">*</font>
</td>
<td align="center">
<span style="color:#ffffff">合同編號</span>
</td>
<td align="center">
<span style="color:#ffffff">委托編號</span>
</td>
<td align="center">
<span style="color:#ffffff">委托單位</span>
</td>
<td align="center">
<span style="color:#ffffff">工程名稱</span>
</td>
<td align="center">
<span style="color:#ffffff">工程地點</span>
</td>
<td align="center">
<span style="color:#ffffff">檢測項目</span>
</td>
<td align="center">
<span style="color:#ffffff">份數</span>
</td>
<td align="center">
<span style="color:#ffffff">單價</span>
</td>
<td align="center">
<span style="color:#ffffff">數量</span>
</td>
<td align="center">
<span style="color:#ffffff">總價</span>
</td>
</tr>
<tr align="center">
<td>
<input type="text" name="report_num" size="20"/>
<input type="hidden" name="id"/>
<input type="hidden" name="consign_id"/>
<span name="msg" style="color: red;"></span>
</td>
<td>
<input type="text" name="contract_num" size="15"/>
</td>
<td>
<input type="text" name="wt_num" size="15"/>
</td>
<td>
<input type="text" name="wt_company" size="20"/>
</td>
<td>
<input type="text" name="project_name" size="20"/>
</td>
<td>
<input type="text" name="project_address" size="20"/>
</td>
<td>
<input type="hidden" name="item_id"/>
<input type="text" name="item_name" size="15"/>
</td>
<td>
<input type="text" name="report_count" size="3"/>
</td>
<td>
<input type="text" name="price" size="5"/>
</td>
<td>
<input type="text" name="amount" size="5"/>
</td>
<td>
<input type="text" name="ought_fare" size="5"/>
</td>
</tr>
</table>
</body>
</html>
~~~
~~~
//ajax請求相關java code：
public String getConsigJSON(String reportNum, String id) throws Exception {
String sql = "select top 1 m.id as consign_id, contract_num,wt_num,wt_company,project_name,project_prov+project_city+project_area project_address,m.report_count,item_id,ought_fare,s.name item_name from MM_Consign m, SS_subject s where item_id = s.id and report_num = '" + reportNum + "'";
StringBuffer json = new StringBuffer("[");
try {
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
ResultSetMetaData rsmd = rs.getMetaData();
RowSetDynaClass rsdc = new RowSetDynaClass(rs);
List list = rsdc.getRows();
/*if ("".equals(id)) {
String validValue = isValid(reportNum);
json.append("{valid:").append(validValue).append("},");
String existsValue = this.isExists(reportNum);
json.append("{exists:").append(existsValue).append("}");
} else {*/
String num = getReportNum(id);
if (num.equals(reportNum)) {
json.append("{valid:true},");
json.append("{exists:false}");
} else {
String validValue = isValid(reportNum);
json.append("{valid:").append(validValue).append("},");
String existsValue = this.isExists(reportNum);
json.append("{exists:").append(existsValue).append("}");
}
//}
for (int j = 0, len = list.size(); j < len; j++) {
json.append(",{");
DynaBean dyna = (DynaBean) list.get(j);
for (int i = 1; i <= rsmd.getColumnCount(); i++) {
if (i == rsmd.getColumnCount()) {
json.append(rsmd.getColumnName(i)).append(":/"")
.append(FunctionStatic.getNullString(BeanUtils.getSimpleProperty(dyna, rsmd.getColumnName(i).toLowerCase())))
.append("/"");
} else {
json.append(rsmd.getColumnName(i)).append(":/"")
.append(FunctionStatic.getNullString(BeanUtils.getSimpleProperty(dyna, rsmd.getColumnName(i).toLowerCase())))
.append("/",");
}
}
json.append("}");
/*if (j < len - 1) {
json.append(",");
}*/
}
json.append("]");
} catch (Exception e) {
e.printStackTrace();
throw e;
}
return json.toString();
}
public String isValid(String reportNum) throws Exception {
String bool = "";
try {
prepar = conn.prepareStatement("select count(*) from MM_Consign where report_num = '" + reportNum + "'");
rs = prepar.executeQuery();
int count = rs.next() ? rs.getInt(1) : 0;
bool = count > 0 ? "true" : "false";
} catch (Exception e) {
e.printStackTrace();
throw e;
}
return bool;
}
public String isExists(String reportNum) throws Exception {
String bool = "";
try {
prepar = conn.prepareStatement("select count(*) from MM_ReportTransfer where report_num = '" + reportNum + "'");
rs = prepar.executeQuery();
int count = rs.next() ? rs.getInt(1) : 0;
bool = count > 0 ? "true" : "false";
} catch (Exception e) {
e.printStackTrace();
throw e;
}
return bool;
}
~~~
- 前言
- jQuery 變動圖片、濾鏡效果
- jQuery javaScript js 判斷瀏覽器的類型、版本的方法
- jQuery 設置表格隔行變色、隔列變色
- jQuery 可編輯表格文本域，支持鍵盤快捷操作
- jQuery 中常用的插件列表
- 共享你的jquery 插件
- extJS checkBoxColunmTree 可以選擇帶checkBox的樹（tree、grid）
- jquery tab 選項卡功能
- jQuery autocomplete 自擴展插件、自動補全示例
- jquery blockUI 擴展插件 Dialog
- jQuery 獲取屏幕高度、寬度
- JavaScript/jQuery、HTML、CSS 構建 Web IM 遠程及時聊天通信程序
- Web 通信 之 長連接、長輪詢（long polling）
- 幾款極好的 JavaScript 文件上傳插件
- 60款很酷的 jQuery 幻燈片演示和下載