用js实现增加和删除功能

缺乏、安全感 2022-11-27 10:18 217阅读 0赞

描述：用js实现增加和删除功能，点击按钮进行增加，点击delete进行删除具体界面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center]  
js代码如下：  
用于进行删除的函数，用removeChild()函数实现：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 1]灰色的部分是代码注释了，是因为把它提取成一个函数后面进行调用，所以前面的部分不在此函数里面实现：  
2.对删除函数进行调用，对所有的超链接进行点击函数绑定：  
![在这里插入图片描述][20200814224414865.png_pic_center]  
3.添加：  
1）点击按钮，将数据添加到表格中，要先获取数据，代码：  
![在这里插入图片描述][20200814224735806.png_pic_center]  
2）创建表单结构，用document.createElement()函数和document.createTextNode()函数，（注意：创建超链接节点时要为他加上href属性和绑定点击响应函数）实现代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 2]  
3）将文本添加进节点中，使用appendChild()函数实现：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 3]  
js的完整代码如下：

html代码如下：

<body>
    		<table id="table1" cellspacing="0">
    			<thead>
    				<tr>
    					<th>Name</th>
    					<th>Email</th>
    					<th>Salary</th>
    					<th>Del</th>
    				</tr>
    			</thead>
    			<tbody id="tbody1">
    				<tr>
    					<td>Tom</td>
    					<td>tom@tom.com</td>
    					<td>5000</td>
    					<td><a href="javascript:;">Delete</a></td>
    				</tr>
    				<tr>
    					<td>Jerry</td>
    					<td>jerry@jerry.com</td>
    					<td>8000</td>
    					<td><a href="javascript:;">Delete</a></td>
    				</tr>
    				<tr>
    					<td>Bob</td>
    					<td>Bob@bob.com</td>
    					<td>10000</td>
    					<td><a href="javascript:;">Delete</a></td>
    				</tr>
    			</tbody>
    			
    		</table>
    		<br /><br />
    		<h2>添加新元素</h2>
    		<table id="table2">
    			
    			<tr>
    				<td>name:</td>
    				<td><input type="text"/></td>
    			</tr>
    			<tr>
    				<td>email:</td>
    				<td><input type="text"/></td>
    			</tr>
    			<tr>
    				<td>salary:</td>
    				<td><input type="text" /></td>
    			</tr>
    			<tr>
    				<td colspan="2" align="center"> </td>
    				<td><button id="button1">submit</button></td>
    			</tr>
    		</table>
    	</body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/59fa0c43fac3432b8b38ddc97ea8ba0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/e235dab6a06f459c9c0c64a9731ff597.png
[20200814224414865.png_pic_center]: /images/20221124/f8ce94a320eb4610828fa31da1fcdea2.png
[20200814224735806.png_pic_center]: /images/20221124/92238c8314b3491b920da67a4f6c13b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/90153a12048e415bb2db404930f722e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/dfbae7a80784402491861e2bb2ab9f5e.png