寻高手简化代码

<!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 language="javascript" type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
append();    
});
function append(){
var fid = 'pList';
$("#add").bind("click",function(){
create(fid);
});
$("#del").bind("click",function(){
$("#"+fid).remove();  
});
}
function create(nowid){
var newid = "pList_" + new Date().getTime();
var copy = $("#"+nowid).clone(false).attr("id",newid);
copy.find("#add").bind("click",function(){
create(newid);
});
copy.find("#del").bind("click",function(){
if($("#conetent > table").length==1){
return false;
}
$("#"+newid).remove();  
});
$("#"+nowid).after(copy);
}
</script>
</head>
<body>
<div id="conetent">
<table id="pList" border="1">
        <tr>
            <td><input type="text" /></td>
            <td><input id="add" type="button" value="增加" /></td>
            <td><input id="del" type="button" value="删除" /></td>
        </tr>
    </table>
</div>
</body>
</html>
我总觉得有更简单的方法可以实现
但我只能想到这了

解决方案 »

  1.   


        <table id="tb2" border="1">
            <tr>
                <td><input type="text" /></td>
                <td><input type="button" value="增加" /></td>
                <td><input type="button" value="删除" /></td>
            </tr>
        </table>
    </div>
    </body>
    <script type="text/javascript" src="jquery-1.3.2-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var bind=function(tr) {
            tr.find("input[type='button']:first").click(function() {
                bind($('<tr><td><input type="text" /></td> <td><input type="button" value="增加" /></td> <td><input type="button" value="删除" /></td></tr>').appendTo("#tb2"));
            });
            tr.find("input[type='button']:eq(1)").click(function() {
                $(this).parent().parent().remove();
            });
        }   
        bind($("#tb2 tr:first"));
    });
    </script>
      

  2.   

    #3 楼
    是不错，但是如果table里的东西过多的话是不是就不合适了
    毕竟html写在js里不是很好，别人用css也不好控制
    所以我用复制实现的
      

  3.   


        <table id="tb2" border="1">
            <tr>
                <td><input type="text" /></td>
                <td><input type="button" value="增加" /></td>
                <td><input type="button" value="删除" /></td>
            </tr>
        </table>
    </div>
    </body>
    <script type="text/javascript" src="jquery-1.3.2-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        var cloneN=function() {
            var tr=$('#tb2 tr:first').clone(true).show().appendTo("#tb2");
            tr.find("input[type='button']:first").click(function() {
                cloneN();
            });
            tr.find("input[type='button']:eq(1)").click(function() {
                $(this).parent().parent().remove();
            });
        }
        cloneN();
        $('#tb2 tr:first').hide();
      

  4.   


    <!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 language="javascript" type="text/javascript" src="jquery.js"></script>
    <script>$(function(){
    var TB_Order = function(){
    var create = function(){
    $('#pList tr:first-child').clone(true).appendTo($('#pList'));
    };
    var remove = function(){
    $(this).parents('tr').remove();
    };
    return {
    init: function(){
    this.bindEvents();
    },
    bindEvents: function(){
    $('#add').bind('click', create);
    $('#del').bind('click', remove);
    }
    }
    }();
    TB_Order.init();});
    </script>
    </head>
    <body>
    <div id="conetent">
        <table id="pList" border="1">
            <tr>
                <td><input type="text" /></td>
                <td><input id="add" type="button" value="增加" /></td>
                <td><input id="del" type="button" value="删除" /></td>
            </tr>
        </table>
    </div>
    </body>
    </html>// 新手试手 仅供参考. 主要代码就两行 其余为了清晰
      

  5.   

    <!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 language="javascript" type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
    <script>
    $(document).ready(function(){
      var table = $('#pList');
      table.find('button:first').click(function()
      {
        $(this).parents('tr').clone(true).appendTo(table).find('td:first').empty();
      });
      table.find('button:last').click(function()
      {
        if(table.find('tr').length > 1) $(this).parents('tr').remove(); 
      });
    });                                    
    </script>
    </head>
    <body>
    <div id="conetent">
        <table id="pList" border="1">
            <tr>
                <td><input type="text" /></td>
                <td><button>增加</button></td>
                <td><button>删除</button></td>
            </tr>
        </table>
    </div>
    </body>
    </html>