table表的行的增加和删除-优快云博客

本文介绍如何使用JavaScript实现HTML表格中行的动态添加与删除功能，包括事件监听、DOM操作等关键技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../../jquery-1.7.js"></script>
</head>

<body>
   <table border="1" id="tableAdd">
       <tr align="center">
           <td width="100px;">展馆</td>
           <td width="100px;">展位类型</td>
           <td width="100px;">数量</td>
           <td width="100px;">
               <input type="button" value="新增" id="addRow"/>
           </td>
       </tr>
   </table>
</body>
</html>
<script type="text/javascript">
   $(document).ready(function(){
       var rowNum=0;
       //新增行
       $("#addRow").bind("click",function(){
           rowNum +=1;
           var rowHtml="";
           rowHtml +="<tr id='"+rowNum+"'>";
               rowHtml +="<td>"+rowNum+"</td>";
               rowHtml +="<td></td>";
               rowHtml +="<td></td>";
               rowHtml +="<td>";
                   rowHtml +="<input type=\"button\" value=\"删除\" name=\"deleteRow\" onclick=\"deleteRow("+rowNum+")\" />";
               rowHtml +="</td>";
           rowHtml +="</tr>";
           //alert(rowHtml)
            $("#tableAdd").append(rowHtml);
       })
   })
       //删除行
   function deleteRow(num){
           $("#addRow").parent().parent().parent().find("#"+num).remove();
       }
</script>