JavaScript经典案例：表格节点操作

逃离我推掉我的手 2022-12-23 03:22 77阅读 0赞

效果展示:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]

HTML代码：

<table border="0" cellspacing="10px" cellpadding="10px">
    <tr>
    		<th colspan="4">学生信息表</th>
    	</tr>
    	<tr>
    		<td>姓名</td>
    		<td>性别</td>
    		<td>年龄</td>
    		<td>选项</td>
    	</tr>
    	<tr>
    		<td>高睿</td>
    		<td>女</td>
    		<td>18</td>
    		<td><a href="javascript:void(0);">删除</a></td>
    	</tr>
    	<tr>
    		<td>潘虹</td>
    		<td>女</td>
    		<td>22</td>
    		<td><a href="javascript:void(0);">删除</a></td>
    	</tr>
    	<tr>
    		<td>单依纯</td>
    		<td>女</td>
    		<td>18</td>
    		<td><a href="javascript:void(0);">删除</a></td>
    	</tr>
    </table>
    <table border="0" cellspacing="10px" cellpadding="10px">
    	<tr>
    		<th colspan="2">添加学生</th>
    	</tr>
    	<tr>
    		<td>姓名：</td>
    		<td><input type="text" name="name" id="stuName" value="" /></td>
    	</tr>
    	<tr>
    		<td>性别：</td>
    		<td><input type="text" name="gender" id="stuGender" value="" /></td>
    	</tr>
    	<tr>
    		<td>年龄：</td>
    		<td><input type="text" name="age" id="stuAge" value="" /></td>
    	</tr>
    	<tr>
    		<td colspan="2">
    			<input type="submit" name="" id="submit" value="添    加" />
    		</td>
    	</tr>
    </table>

JavaScript代码：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c07aa907103d41b49ce380472c0ddabe.png