如何用jquery来实现添加删除功能？

大家端午快乐....
<table width="339" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="68%"><input type="text" name="textfield1" id="textfield1" /></td>
    <td width="32%"><input type="button" name="button01" id="button01" value="添加" />  <input type="button" name="button1" id="button1" value="删除" /></td>
  </tr>
  <tr>
    <td width="68%"><input type="text" name="textfield2" id="textfield2" /></td>
    <td width="32%"><input type="button" name="button02" id="button02" value="添加" />  <input type="button" name="button2" id="button2" value="删除" /></td>
  </tr>
   <tr>
    <td width="68%"><input type="text" name="textfield3" id="textfield3" /></td>
    <td width="32%"><input type="button" name="button03" id="button03" value="添加" />  <input type="button" name="button3" id="button3" value="删除" /></td>
  </tr>
   <tr>
    <td width="68%"><input type="text" name="textfield4" id="textfield4" /></td>
    <td width="32%"><input type="button" name="button04" id="button04" value="添加" />  <input type="button" name="button4" id="button4" value="删除" /></td>
  </tr>
</table>请问如何用jquery来实现以上添加及删除功能？其中：
点击添加时中间表单name及id后面数值可递增变化！
点击删除时删除按钮所在行！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
<title>zell419</title>
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script>
     <script>
        jQuery(function($){
             $(":button[value='添加']").live("click", function(){
                var newtId = parseInt($("table:first  tr:last-child :text:first").attr("id").replace(/\D+/g, " "))+1;//找到最后一行提取数字id
                var newTr = "<tr><td width=\"68%\"><input type=\"text\" name=\"textfield"+newtId+"\" id=\"textfield"+newtId+"\" /></td><td width=\"32%\"><input type=\"button\" name=\"button0"+newtId+"\" id=\"button0"+newtId+"\" value=\"添加\" />  <input type=\"button\" name=\"button4\" id=\"button"+newtId+"\" value=\"删除\" /></td></tr>";  //组织
                $("table:first").append(newTr); //追加
             });
             $(":button[value='删除']").live("click", function(){
                $(this).parents("tr").remove(); //删除行

             });
        });
     </script>
</head>
<body >
<table width="339" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="68%"><input type="text" name="textfield1" id="textfield1" /></td>
    <td width="32%"><input type="button" name="button01" id="button01" value="添加" />  <input type="button" name="button1" id="button1" value="删除" /></td>
  </tr>
  <tr>
    <td width="68%"><input type="text" name="textfield2" id="textfield2" /></td>
    <td width="32%"><input type="button" name="button02" id="button02" value="添加" />  <input type="button" name="button2" id="button2" value="删除" /></td>
  </tr>
   <tr>
    <td width="68%"><input type="text" name="textfield3" id="textfield3" /></td>
    <td width="32%"><input type="button" name="button03" id="button03" value="添加" />  <input type="button" name="button3" id="button3" value="删除" /></td>
  </tr>
   <tr>
    <td width="68%"><input type="text" name="textfield4" id="textfield4" /></td>
    <td width="32%"><input type="button" name="button04" id="button04" value="添加" />  <input type="button" name="button4" id="button4" value="删除" /></td>
  </tr>
</table>
</body>
</html>端午快乐，明天又要上班了。
<table>
                  <tbody id="file">
                    <tr>
                      <td><input name="attach_0" id="attach_0" type="file" size="20" /> <a href="javascript:void(0);" class="add">+</a>    <a href="javascript:void(0);" class="del" style="display:none;">-</a>
                      </td>
                    </tr>
                  </tbody>
                  <tbody>
                    <tr>
                      <td height="50" align="center" valign="middle">
                        <input type="submit" id="submit" name="submit" value="提交"/></td>
                    </tr>
                  </tbody>
<table>如此变通后又该如何操作？？？
<!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>
<title>zell419</title>
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script>
     <script>
        jQuery(function($){
             $(".add").live("click", function(){
                var newtId = parseInt($("#file  tr:last-child :file:first").attr("id").replace(/\D+/g, " "))+1;//找到最后一行提取数字id
                var newTr = "<tr><td><input name=\"attach_"+newtId+"\" id=\"attach_"+newtId+"\" type=\"file\" size=\"20\" /> <a href=\"javascript:void(0);\" class=\"add\">+</a>    <a href=\"javascript:void(0);\" class=\"del\" style=\"display:none;\">-</a></td></tr>";  //组织
                alert(newtId);
                $("table:first").append(newTr); //追加
             });
             $(".del").live("click", function(){
                $(this).parents("tr").remove(); //删除行

             });
        });
     </script>
</head>
<body >
<table>
    <tbody id="file">
        <tr>
            <td>
                <input name="attach_0" id="attach_0" type="file" size="20" /> <a href="javascript:void(0);" class="add">+</a>    <a href="javascript:void(0);" class="del" style="display:none;">-</a>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td height="50" align="center" valign="middle">
                <input type="submit" id="submit" name="submit" value="提交"/></td>
        </tr>
    </tbody>
</table>
</body>
</html>其实差不多。