<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="zh_CN" />
<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="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function validateContact() {
var deptArray = new Array();
var result = true;
jQuery("#contactTab tr td").find('select').each(function(){
deptArray.push($(this).val());
});
if(deptArray.in_array(""))
{
alert("部门必填\r\n");
result = false;
}
if(!deptArray.in_array("1"))
{
alert("部门1必填\r\n");
result = false;
}
if(!deptArray.in_array("2"))
{
alert("部门2必填\r\n");
result = false;
}
var flag = false;
$('#contactTab tr').each(function() {
var vv = $(this).find('td:eq(0)').find('input:radio[name="isChecked"]:checked').val();
if(vv && vv == "on")
{
flag = true;
}
if($(this).find('td:eq(1)').text() == "")
{
alert("姓名不能为空");
result = false;
}
if($(this).find('td:eq(3)').text() == "")
{
alert("E-mail不能为空");
result = false;
}
if($(this).find('td:eq(4)').text() == "")
{
alert("手机号码不能为空");
result = false;
}
if($(this).find('td:eq(5)').text() == "")
{
alert("地址不能为空");
result = false;
}
});
if (!flag) {
alert("请选择一条记录");
result = false;
}
return result;
};
function update(page) {
if(!validateContact())
{
return;
}
var table = $('#contactTab').tableRowsToJSONWithFilter();
$("#contactJson").val(JSON.stringify(table));
var configForm = document.forms['form'];
configForm.action = "test.do";
configForm.submit();
}
$(function() {
new tableEdit('contactTab');
});
function copyContact(node)
{
var cloneTr = $(node).parents('tr').clone(true);
cloneTr.find('select').attr("disabled",false);
cloneTr.find("select").find("option:selected").removeAttr("selected");
cloneTr.find("select").find("option[value='3']").remove();
cloneTr.find('a').css("display","");
cloneTr.find('select').val("");
$(cloneTr).last().find('td').each(function(){
$(this).attr("edit","1");
var dataId = $(this).attr("data-id");
if (dataId !== undefined && dataId == 'id') {
$(this).text("");
}
});
var html = "<tr>"+ cloneTr.html() + "</tr>";
$(node).parents('tbody').append(html);
$(node).parents('tbody').find('td').unbind("click");
$(node).parents('tbody').find('td').click(tdClick);
}
function removeContact(a)
{
var cid = $(a).parent().prev("td").text();
if(cid=="")
{
removeTR(a);
return;
}
var urlStr = 'delete.do';
$.ajax({
url: urlStr,
async:false,
type: 'POST',
dataType: 'json',
data:{id:cid},
success: function(jObj){
removeTR(a);
}
});
}
function addTd()
{
var cloneTr = $("#copyBack").clone(true);
$(cloneTr).last().find('td').each(function(){
//$(this).attr("edit","1");
var dataId = $(this).attr("data-id");
if (dataId !== undefined && dataId == 'id') {
$(this).text("");
}
});
var html = "<tr>"+ cloneTr.html() + "</tr>";
$("#contactTab").append(html);
$("#contactTab").find('td').unbind("click");
$("#contactTab").find('td').click(tdClick);
}
<!-- 常用操作 -->
function tableEdit(table) {
table = table || document.getElementsByTagName("table")[0];
var tab = (typeof(table) == "string" || typeof(table) == "String") ? document.getElementById(table) : table;
var td = $(tab).find('td');
td.click(tdClick);
}
function validate(table)
{
table = table || document.getElementsByTagName("table")[0];
var tab = (typeof(table) == "string" || typeof(table) == "String") ? document.getElementById(table) : table;
$(tab).find('td').each(function(){
var len = $(this).attr('maxLength');
var reg = $(this).attr('reg');
var isNill = $(this).attr('isNill');
});
}
function tdClick(){
//将td的文本内容保存
attr = $(this).attr('edit');
if (attr !== undefined && attr == '0') {
return;
}
if($(this).has('select').length>0)
{
return;
}
var len = $(this).attr('maxLength');
var reg = $(this).attr('reg');
var regMsg = $(this).attr('regMsg');
var td = $(this);
var tdText = td.text();
//将td的内容清空
td.empty();
//新建一个输入框
var input = $("<input>");
//将保存的文本内容赋值给输入框
input.attr("value",tdText);
//将输入框添加到td中
td.append(input);
//给输入框注册事件，当失去焦点时就可以将文本保存起来
input.blur(function(){
//将输入框的文本保存
var input = $(this);
var inputText = input.val();
var msg = "";
if(len !== undefined){
len = parseInt(len);
if(inputText.length>len){
alert(inputText+"长度过长，不能超过"+len+"位");
window.setTimeout(function () { input.focus();}, 0);
return false;
}
}
if(reg !== undefined){
var patt1=new RegExp(reg);
if(!patt1.test(inputText)){
if(regMsg !== undefined){
alert(regMsg);
window.setTimeout(function () { input.focus();}, 0);
return false;
}else
{
alert(inputText+"格式不正确");
window.setTimeout(function () { input.focus();}, 0);
return false;
}
}
}
//将td的内容，即输入框去掉,然后给td赋值
var td = input.parent("td");
td.html(input.val());
//让td重新拥有点击事件
td.click(tdClick);
});
input.keyup(function(event){
//1.获取当前用户按下的键值
//解决不同浏览器获得事件对象的差异,
// IE用自动提供window.event，而其他浏览器必须显示的提供，即在方法参数中加上event
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//2.判断是否是ESC键按下
if(keyCode == 27){
//将input输入框的值还原成修改之前的值
input.val(tdText);
}
});
//将输入框中的文本高亮选中
//将jquery对象转化为DOM对象
var inputDom = input.get(0);
inputDom.select();
//将td的点击事件移除
td.unbind("click");
}
function copyTR(node)
{
var cloneTr = $(node).parents('tr').clone(true);
cloneTr.find('select').attr("disabled","");
cloneTr.find("select").find("option:selected").removeAttr("selected");
cloneTr.find('a').css("display","");
cloneTr.find('select').val("");
$(cloneTr).last().find('td').each(function(){
$(this).attr("edit","1");
var dataId = $(this).attr("data-id");
if (dataId !== undefined && dataId == 'id') {
$(this).text("");
}
});
var html = "<tr>"+ cloneTr.html() + "</tr>";
$(node).parents('tbody').append(html);
$(node).parents('tbody').find('td').unbind("click");
$(node).parents('tbody').find('td').click(tdClick);
}
function removeTR(tr)
{
$(tr).parent().parent().remove();
}
function disableDiv(d)
{
for(var i=0;i<d.childNodes.length;i++)
{
if(d.childNodes[i].disabled!=null)
{
d.childNodes[i].disabled = "disabled";
}
else
{
disableDiv(d.childNodes[i]);
}
}
}
function releaseDiv(d)
{
for(var i=0;i<d.childNodes.length;i++)
{
if(d.childNodes[i].disabled!=null)
{
d.childNodes[i].disabled = "";
}
else
{
releaseDiv(d.childNodes[i]);
}
}
}
Array.prototype.in_array = function(e)
{
for(i=0;i<this.length;i++)
{
if(this[i].replace(/(^\s*)|(\s*$)/g,'') == e)
return true;
}
return false;
};
(function($) {
$.extend($.fn, {
tableRowsToJSONWithFilter : function (filter) {
var tableSelector = this, item, attr,len, data, _JSON = [];
if (typeof(tableSelector) !== 'object') {
return new Error('Invalid tableSelect!');
};
$(tableSelector).find('tr').each(function(index, tr) {
item = {};
$('td', $(this)).each(function(index, td) {
attr = $(td).attr('data-id');
if($(td).has('select').length>0)
{
data = $(td).children('select').val();
}
else if ($(td).has('input:radio').length>0) {
data = $(td).children('input:radio:checked').val();
}
else
{
data = $(td).text();
}
if (attr !== undefined && data !== '') {
item[attr] = $.trim(data);
};
});
_JSON.push(item);
});
return _JSON;
}
})
})(jQuery);
</script>
</head>
<body>
<form>
<div class="contentTitle clearfix">
<div class="contentTitleText">提交验证</div>
<div>
<input type="button" value="添加" class="ButtonTwoNext"
onclick="addTd();" />
</div>
<div class="tableList">
<table width="96%" border="1" cellspacing="0" cellpadding="0" class="tabWhole" >
<thead>
<tr class="tabT">
<td align="center" width="60px" class="tabTitle"><span class="required">* </span>选择</td>
<td align="center" width="60px" class="tabTitle"><span class="required">* </span>姓名</td>
<td align="center" width="112px" class="tabTitle"><span class="required">* </span>部门</td>
<td align="center" width="88px" class="tabTitle"><span class="required">* </span>E-mail</td>
<td align="center" width="100px" class="tabTitle"><span class="required">* </span>手机号码</td>
<td align="center" width="90px" class="tabTitle">地址</td>
</tr>
<tr id="copyBack" style="display:none">
<td height="50px" data-id='isChecked' isNull="0" width="60px" style="word-break: break-all;" edit="0"><input type="radio" name="isChecked"/></td>
<td height="50px" data-id='name' isNull="0" width="60px" style="word-break: break-all;" edit="1" maxlength="32"></td>
<td data-id='dept' width="112px"><select style="width: 112px">
<option value=''>==请选择==</option>
<option value='1' style="color:red" >*部门1</option>
<option value='2' style="color:red" >*部门2</option>
<option value='3' >部门3</option>
</select></td>
<td data-id='email' width="88px" isNull="0" style="word-break: break-all;" edit="1" maxlength="100" reg="^(([a-zA-Z0-9_-]|\.|\*)+@([a-zA-Z0-9_-]|\.)+\.([a-zA-Z0-9_-])+)?$"></td>
<td data-id='mobilePhone' isNull="0" width="100px" style="word-break: break-all;" edit="1" maxlength="20"></td>
<td data-id='address' isNull="0" width="100px" style="word-break: break-all;" edit="1" maxlength="20"></td>
<td width="95px" isNull="1" edit="0" data-id='id' style="display: none"></td>
<th align="left" width="90px" edit="0" isNull="1"> <a href="#" onclick="removeContact($(this));">移除</a> </th>
</tr>
</thead>
<tbody id="contactTab">
<tr>
<td height="50px" data-id='name' isNull="0" width="60px" edit="0" maxlength="32"><input type="radio" name="isChecked"/></td>
<td height="50px" data-id='name' isNull="0" width="60px" style="word-break: break-all;" edit="1" maxlength="32"></td>
<td data-id='dept' width="112px"><select style="width: 112px">
<option value=''>==请选择==</option>
<option value='1' style="color:red" >*部门1</option>
<option value='2' style="color:red" >*部门2</option>
<option value='3' >部门3</option>
</select></td>
<td data-id='email' width="88px" isNull="0" style="word-break: break-all;" edit="1" maxlength="100" reg="^(([a-zA-Z0-9_-]|\.|\*)+@([a-zA-Z0-9_-]|\.)+\.([a-zA-Z0-9_-])+)?$"></td>
<td data-id='mobilePhone' isNull="0" width="100px" style="word-break: break-all;" edit="1" maxlength="20"></td>
<td data-id='address' isNull="0" width="100px" style="word-break: break-all;" edit="1" maxlength="20"></td>
<td width="95px" isNull="1" edit="0" data-id='id' style="display: none"></td>
<th align="left" width="90px" edit="0" isNull="1">
<a href="#" onclick="removeContact($(this));">移除</a>
<a href="#self"
onclick="copyContact($(this));">复制</a></th>
</tr>
</tbody>
</table>
</div>
</div>
<div style="float: right">
<input name="submitPost" type="button" value="提交" onclick="update('current')" class="ButtonTwoNext"/>
</div>
</form>
</body>
</html>