JS代码对表格进行新增时无法解析HTML代码的解决方式

朝山行

已于 2022-09-07 11:53:40 修改

阅读量499

点赞数

分类专栏： vue|Element 文章标签： javascript html 前端

于 2022-09-07 11:49:04 首次发布

本文链接：https://blog.csdn.net/killbibi/article/details/126742071

版权

vue|Element 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

话不多说,先上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
	<script>
		
	   var count = 4; //新增节点的计数
	   window.onload = function(){
		submit();
	
	   }
	   //新增
	   function submit(){
		 document.getElementById("btn_add").onclick = function(){
			let num = document.getElementById("id").value
			let name = document.getElementById("name").value
			let gender = document.getElementById("gender").value
			if(num.replace(/^ +| +$/g,'') == ''|| name.replace(/^ +| +$/g,'') == '' || gender.replace(/^ +| +$/g,'') == '') {
				alert("输入的数据不能为空")
				return;
			}
			//不为空
			error_add(num,name,gender);
		 	//add(num,name,gender);
		 }
	   }
	   
	   //错误的方式
	   function error_add(num,name,gender){
	     let str = '<tr id= tr'+count+'><td>'+num+'</td><td>'+name+'</td><td>'+gender+'</td>'+'<td><a href="javascript:void(0)" onclick= remove('+(count++)+')>删除</a></td></tr>';
		 document.getElementById("td").append(str);
		 refresh();
	   } 
	   //正确的方式
	   function add(num,name,gender){
	     var para = document.createElement("tr");
	     para.innerHTML = '<td>'+num+'</td><td>'+name+'</td><td>'+gender+'</td>'+'<td><a href="javascript:void(0)" onclick= remove('+count+')>删除</a></td>';
		 para.id = 'tr'+(count++);
   		 document.getElementById("td").appendChild(para);
		 refresh();
	   }
	   
	   //删除
	   function remove(num){
	    let key = 'tr'+num;
		document.getElementById(key).remove();
	   }
	   
	   //刷新数据
	   function refresh(){
		document.getElementById("id").value = null;
	    document.getElementById("name").value = null;
	    document.getElementById("gender").value = null;
	   }
	</script>
</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


    <table id = "td">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr id= 'tr1'>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0)" onclick = remove(1);>删除</a></td>
        </tr>

        <tr id = 'tr2'>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0)" onclick = remove(2);>删除</a></td>
        </tr>

        <tr id = 'tr3'>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
          <td><a href="javascript:void(0)" onclick = remove(3);>删除</a></td>
        </tr>


    </table>

</body>
</html>

错误原因:

在这里插入图片描述

上图是HTML解析DOM文档的顺序,浏览器根据DOM树的父节点逐级往下解析渲染在浏览器中的。
当使用error_add方式使用append()对table节点进行操作时,前端的渲染是这样的:
在这里插入图片描述

可以根据前端的代码发现,这东西压根就没有作为一个Node节点挂载到DOM文档树上,只是作为了一个字符强行加到了table表的最后,所以在实际效果这段HTML代码并没有被解析。

解决方式:

既然已经发现问题的所在是这段代码并没有生成一个Node节点挂载在DOM树上由浏览器内核渲染在页面中,那么我们只需要先生成一个Node节点然后再传入需要渲染的元素,最后获取到需要挂载的节点直接挂载上去即可!

  var para = document.createElement("tr"); //生成一个Node节点
  para.innerHTML = '<td>'+num+'</td><td>'+name+'</td><td>'+gender+'</td>'+'<td><a href="javascript:void(0)" onclick= remove('+count+')>删除</a></td>';
  para.id = 'tr'+(count++);
  document.getElementById("td").appendChild(para); //进行挂载

在这里插入图片描述

解决。

朝山行

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS代码对表格进行新增时无法解析HTML代码的解决方式

既然已经发现问题的所在是这段代码并没有生成一个Node节点挂载在DOM树上由浏览器内核渲染在页面中,那么我们只需要先生成一个Node节点然后再传入需要渲染的元素,最后获取到需要挂载的节点直接挂载上去即可!可以根据前端的代码发现,这东西压根就没有作为一个Node节点挂载到DOM文档树上,只是作为了一个字符强行加到了table表的最后,所以在实际效果这段HTML代码并没有被解析。这是HTML解析DOM文档的顺序,浏览器根据DOM树的父节点逐级往下解析渲染在浏览器中的。
复制链接

扫一扫