jquery操作table添加行

chrome可以直接測試運行

[img]http://dl2.iteye.com/upload/attachment/0123/2328/4af335ad-a47f-3700-b9e9-b323104ea6b5.png[/img]

<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>

jquery操作table添加行

前端樣式選擇1-bootstrap學習筆記

spring源碼學習系列1-spring事務代理深入分析

spring源碼學習系列2.2-從document到beanDefinition

spring源碼學習系列2.1-從xml到document

docker創建java web環境鏡像

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結