JavaScript动态增加行

最新推荐文章于 2016-06-12 15:24:30 发布

转载最新推荐文章于 2016-06-12 15:24:30 发布 · 4.1k 阅读

文章标签：

#javascript #border #button #class #stylesheet #table

本文介绍了一种使用JavaScript实现的动态表格增删功能。通过增加行和删除行的功能，用户可以灵活地调整表格内容。同时，文章还展示了如何通过按钮的鼠标悬停效果提升用户体验。

<html> <link href="skin.css" mce_href="skin.css" rel=stylesheet type=text/css> <mce:script language="JavaScript"></mce:script> <table id="tblCommandBtn" class="tblCommandBtn" onMouseover="button_over()" onMouseout="button_out()"> <tr> <td> <button name="btnAddRow" onclick="addRow()" class = "btnmouseout">增加行</button> </td> <td> <button name="btnDeleteRow" onclick="delrow()" class = "btnmouseout">删除行</button> </td> </tr> </table> <table width="100%" id="dataBox" class="tblBillDetail" cellspacing="0" cellpadding="0" height="70" border="1"> <tr> <td width="5%" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center">　</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 商品号</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 商品名称</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 在库量</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 数量</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 计量单位</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 状态</td> </tr> <table> <button class = "redText">aaa</button> </html>