jquery操作table添加行

永无止境2313

浏览: 50850 次
性别:
来自: 南京

最近访客更多访客>>

mouyu

wxylong

chiqiansunny

cinsyo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
codes

jquery html chrome

chrome可以直接测试运行

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

查看图片附件

分享到：

eclipse preferences maven user settings | 常用命令备注

2017-02-13 18:47
浏览 824
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论