使用Jquery动态新增表格与删除表格

最新推荐文章于 2023-08-13 16:42:36 发布
weixin_30273763
最新推荐文章于 2023-08-13 16:42:36 发布
阅读量99
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/myoneray/p/3324327.html
版权
以下是HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
.toplink{background:#D7D7D7; width:100%px; height:30px; line-height:30px; text-align:center;}
a{ text-decoration:none; color:#5D5D5D; font-size:12px;}
.inputDiv{
    width: 600px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #5D5D5D;
}
.xing{color:#FF0000; font-family:'幼圆'; font-size:18px;}
body{ font-family:"微软雅黑";width:100%; height:100%;}
.saveButton{width:100px; height:30px; background:#666666; cursor:pointer; text-align:center; line-height:30px; font-size:12px; color:#FFFFFF;}
table.tr.td{ text-align:center; background: }
tr{ height:35px;}
.searchInput{width:140px; height:25px; border:#E7E7E7 1px solid;}

</style>

<script language="javascript">

 var i=1;
function addNew()
{   i++;  
var row = $("#AddQuanXian");
row.append($(     "<tr id='QuanXian"+i+"'>"+
                                 "<td   align='center'><input  type='text'  value='"+i+"'  size='1'/></td>"+
                                  "<td><input  type='text'    size='8'/></td>"+
                                  "<td><input  type='text'    size='2'/></td>"+
                                  "<td><a href=''  >权限设置</a></td>"+
                                  "<td><a href='javascript:void(0)'   οnclick='DeleteQuanXian(this)' > 删除</a></td>"+
                                  "</tr>")
                                  );
 }

function  DeleteQuanXian(id){
   $(id).parent().parent().remove();   
}




    function saveBg(num){
        if(num=='1'){
            document.getElementById('saveButton').style.background = '#7ECAF1';
        }else{
            document.getElementById('saveButton').style.background = '#666666';
        }
    }
    
    
    function addButton(num){
        if(num=='1'){
            document.getElementById('addButton').style.background = '#099';
        }else{
            document.getElementById('addButton').style.background = '#666666';
        }
    }
</script>
</head>
</head>

<body>
<form action="" method="post">
<div style="width:100%;">
    <div class="toplink">角色管理</div>
    <div style=" width:250px; float:left; background:#FFFFFF;">
        <div style="width:100%; height:40px; line-height:40px; font-size:14px; background:#BCBCBC;"><b>个人信息管理</b></div>
        
        <div style="width:248px;">
            <div style="width:100%; border:0px; border-left:1px solid #BCBCBC;border-right:1px solid #BCBCBC;">
            <br />
                <table width="250" style="width:90%;margin:auto;">
                    <tr height="30">
                      <td><a href="peopleInformation.html">模板管理</a></td></tr>
                    <tr height="30">
                      <td><a href="updatePassword.html">银行管理</a></td></tr>
                </table>
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            </div>
            
        </div>
    </div>
    <div style="width:75%; float:left; text-align:center;">
    <br />
        <div style="width:90%; margin-left:20px;">
            
        <table style="width: 90%; margin: auto;">
            <tr><td width="80%" align="center">
            <fieldset style="text-align:left;width:90%; border: 5px solid #BCBCBC;"> 
            <legend style="margin-left:5px; color:#5D5D5D; font-size:14px;"><b>角色管理</b></legend>
            <div style="  width:540px; ">
                    &nbsp;
                    <div style=" width:540px; height:40px; ">
                        <table width="540"  border="0">
                              <tr>
                         
                                  <td align="right">
                                          <div class="saveButton" onmouseover="saveBg('1')" onmouseout="saveBg('0')" id="saveButton">
                                        <b>保存</b>
                                    </div>
                                  </td>
                              </tr>
                        </table>
                    </div>&nbsp;
                    <div style="width:540px; text-align:center;">
                        <table width="540"   id="AddQuanXian" >
                            <tr style=" background:#999;">
                              <td align="canter" width="80">排序</td>
                              <td>角色名</td>
                              <td>人数</td>
                              <td>权限</td>
                              <td>删除</td>
                              </tr>
                               <tr>
                                  <td   align="center"><input  type="text"   size="1"/></td>
                                  <td>超级管理员</td>
                                  <td>1</td>
                                  <td></td>
                                  <td></td>
                                  </tr>
                                  
                                <tr>
                                <td   align="center"><input  type="text"   size="1"/></td>
                                  <td>板块管理员</td>
                                  <td>5</td>
                                  <td><a href=""  >权限设置</a></td>
                                  <td></td>
                                  </tr>
                                <tr>
                                <td   align="center"><input  type="text"   size="1"/></td>
                                  <td>板块审核员</td>
                                  <td>5</td>
                                  <td><a href=""  > 权限设置</a></td>
                                  <td></td>
                                  </tr>
                                  
                                  <tr>
                                <td      align="center"><input  type="text"   size="1"/></td>
                                  <td>副管理员</td>
                                  <td>5</td>
                                  <td><a href=""  >权限设置</a></td>
                                  <td><a href="javascript:void(0)"   onclick="DeleteQuanXian(this)" > 删除</a></td>
                                  </tr>
                                  
                                <tr>
                                <td   align="center"><input  type="text"   size="1"/></td>
                                  <td>财务顾问</td>
                                  <td>200</td>
                                  <td><a href=""  >权限设置</a></td>
                                  <td><a href="javascript:void(0)"   onclick="DeleteQuanXian(this)" > 删除</a></td>
                                  </tr>
                     
                               <tr >
                                  <td   align="center"><input  type="text"   size="1"/></td>
                                  <td>经理</td>
                                  <td>200</td>
                                  <td><a href=""  >权限设置</a></td>
                               
                                  <td><a href="javascript:void(0)"   onclick="DeleteQuanXian(this)" > 删除</a></td>
                                  </tr>
                               </tr >
                         </table>
                       <div class="saveButton" onclick="addNew();" onmouseover="addButton('1')" onmouseout="addButton('0')" id="addButton">
                        <b>增加角色</b>
                        </div>
                    </div>
                
              
                         
            </div>
            </td>
            </tr>
            </table>
            </fieldset>
            <br />
                
          </td></tr>
            
          </table>
      </div>
        
    </div>
    
</div>
</form>
</body>
</html>