`
dushanggaolou
  • 浏览: 171203 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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>
<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>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics