适用纯js往table中添加行

本文介绍了如何避免在使用原生JavaScript操作表格时遇到的兼容性问题,通过将table置于div中,并提供了一个使用纯JS动态添加行的详细示例,包括AJAX调用和JSON解析,帮助开发者节省时间。
摘要由CSDN通过智能技术生成

平常用多了jquery,发现原生js通过字符串往table里添加一行还有点复杂,以至于浪费了挺多时间。

这里直接上一个案例,注意ajax也是纯js的
由于不能直接对table进行innerHTML操作(IE会报错)原因是:主要是使用此属性的标签的“包容性”不高,经常是table,tr,td,form等引起的,特别是需要更改这些标签内部的内容是最易发生

解决办法是:将talbe用div括起来,建议使用div,span此类“包容性”较高的标签。像form标签,需要对form内部的标签使用innerHTML的话,就可以将form标签改为div标签,
html代码:

<div id="rlrztable">
				
</div>

js代码:

	function sucfunc(response){
			var myobj=response.responseText.evalJSON(true);
	    	var isTrue=myobj.isTrue;
    		var tabStr="<table  border='5px'><tr><td>用户</td><td>验证次数</td><td>登录次数</td><td>注册次数</td><td>验证失败次数</td></tr>";
    		for(var j=0;j<myobj.pjyList.length;j++){
    			var tablist = myobj.pjyList[j];
    			for(var i = 0;i<tablist.length;i++){
    				var obj = tablist[i];//得到每一行
    				if(i==0){
    					tabStr+="<tr>"
    				}
    				tabStr+="<td>"+obj+"</td>"
    			}
    			tabStr+="</tr>"
    		}
    		tabStr+="</table>"
    		var t = document.getElementById("rlrztable");
			t.innerHTML = tabStr;
		}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用 JavaScript 和表格实现分页,可以按照以下步骤: 1. 在 HTML 创建一个表格,并添加一个 ID。 ```html <table id="myTable"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> <td>Row 2, Cell 3</td> </tr> <!-- add more rows here --> </tbody> </table> ``` 2. 创建一个 JavaScript 函数,该函数用于分页并显示表格的指定数。 ```javascript function displayTable(pageSize, pageNumber) { var table = document.getElementById("myTable"); var rows = table.getElementsByTagName("tr"); var firstRow = pageNumber * pageSize; var lastRow = firstRow + pageSize; for (var i = 1; i < rows.length; i++) { if (i < firstRow || i >= lastRow) { rows[i].style.display = "none"; } else { rows[i].style.display = ""; } } } ``` 3. 在 HTML 添加一个分页控件,该控件包含一个下拉列表和一个按钮,用于选择每页显示的数和跳转到指定页数。 ```html <div> Show <select id="pageSizeSelect"> <option>5</option> <option>10</option> <option>20</option> </select> rows per page <button onclick="goToPage()">Go</button> </div> ``` 4. 创建一个 JavaScript 函数,该函数从下拉列表获取每页显示的数,并调用 displayTable 函数以显示指定页数的。 ```javascript function goToPage() { var pageSizeSelect = document.getElementById("pageSizeSelect"); var pageSize = pageSizeSelect.options[pageSizeSelect.selectedIndex].value; var pageNumber = 0; displayTable(pageSize, pageNumber); } ``` 5. 最后,需要在页面加载时调用 displayTable 函数以显示默认的数和第一页的。 ```javascript window.onload = function() { var pageSizeSelect = document.getElementById("pageSizeSelect"); var pageSize = pageSizeSelect.options[pageSizeSelect.selectedIndex].value; var pageNumber = 0; displayTable(pageSize, pageNumber); }; ``` 这样,就可以使用 JavaScript 和表格实现分页了。需要注意的是,该方法只适用于少量数据的情况,对于大量数据的分页,需要使用服务器端分页或其他分页插件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值