请高手用jquery写个添加一行删除一行 表格的效果

<!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>
<style type="text/css">
html, body { margin: 0; padding: 0; background-attachment:fixed;}
html{_background-image:url(about:blank);_background-attachment:fixed;}/* 修正IE6振动bug */
h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, section {  border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }
h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, caption, tbody, tfoot, section , p{ margin:0;padding: 0;}
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
body { width: 100%;margin: 0 auto;font: normal 12px/18px 'Microsoft YaHei','微软雅黑', arial, sans-serif; text-shadow: 0 0 1px rgba(0,0,0,0.01); color: #555; background:#ECF0F1}
h4 {font-weight: bold; color: #222;font-size: 15px; }
a {color: #003288;text-decoration: none; font-weight:normal;font-size: 12px; }
a:hover { text-decoration: underline; }
input[type="checked"],input[type="radio"]{ background: transparent; border: 0; }
input::-ms-clear{display:none}    /*解决IE10 默认的input 出现XX的问题*/
 
 
/*CSS*/
.lizhi_adddel{ margin-left:6px; overflow:auto;}
.addlizhi_ry{ background:#E4E9EF;margin-bottom: 10px;}
.addlizhi_ry th{ height:35px; line-height:35px; color:#3d588f;text-align: center;border-right: 1px solid #fff;}
.addlizhi_ry td{ text-align:center; border-bottom:1px solid #F2F6F7;border-right: 1px solid #fff; height:33px; line-height:33px;}
.lizhi_adddel a{display: inline-block;width: 107px;height: 35px; text-indxent:-9999px;background:url("all_btn.png") no-repeat;}
.lizhi_adddel .addline{ background-position:-387px -130px;}
.lizhi_adddel .delline{ background-position:-498px -130px;}   
tr.focus td{background:#eee;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    var focusTR;
    function evtClick() {
        $('#tbList tr').removeClass('focus');
        focusTR = $(this).addClass('focus');
    }
    $(document).ready(function () {
        $('#tbList tr').click(evtClick);
    })
    function appendRow() { $('#trTpl').clone().removeAttr('id').find('td').html('').end().appendTo('#tbList').click(evtClick); return false; }
    function removeRow() { if (focusTR) { focusTR.remove(); focusTR = null; } else alert('请点击选择要删除的行！'); return false; }
</script>
</head>
 
<body>
         
<!--增加  删除-->
<div class="lizhi_adddel">
    <table class="addlizhi_ry" width="876" border="0" cellspacing="0" cellpadding="0">
      <tr bgcolor="#D8DADD">
        <th>序号</th>
        <th>生效日期</th>
        <th>姓名</th>
        <th colspan="5">调整前</th>
        <th colspan="5">调整后</th>
        <th>调整理由</td>
        <th>备注</th>
      </tr>
      <tr id="trTpl">
        <td></td>
        <td></td>
        <td></td>
        <td>公司</td>
        <td>部门中心</td>
        <td>部门/分公司</td>
        <td>岗位</td>
        <td>工资</td>
        <td>公司</td>
        <td>部门中心</td>
        <td>部门/分公司</td>
        <td>岗位</td>
        <td>工资</td>
        <td></td>
        <td></td>
      </tr>
      <tbody id="tbList">
      <tr>
        <td>1</td>
        <td>2013/12/04</td>
        <td>松果</td>
        <td>123456</td>
        <td>恒昌</td>
        <td>互联网</td>
        <td>互联网/技术部</td>
        <td>F2</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
      </tr>
      <tr>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
        <td>sdf</td>
      </tr></tbody>
    </table>
     
    <a class="addline" href="#" onclick="return appendRow()">增加一行</a>
    <a class="delline" href="#" onclick="return removeRow()">删除一行</a>
</div>
</body>
</html>

解决方案 »

  1.   

    写得非常的好，谢谢~  但是还想麻烦你下  如果点击添加一行的时候 而且那一行的tr里面的所有td都是可以编辑的（就是里面都是input框）  该这么弄？ 在帮忙弄一下吧~ 
      

  2.   

    function appendRow() { $('#trTpl').clone().removeAttr('id').find('td').html('<input type="text" style="width:100%;border:solid 1px #999"/>').end().appendTo('#tbList').click(evtClick); return false; }