JS利用for循环画表格解析json字符串数据写入表格

最新推荐文章于 2023-11-02 09:48:14 发布

Assg444

最新推荐文章于 2023-11-02 09:48:14 发布

阅读量963

点赞数 1

文章标签：字符串 shell javascript

本文链接：https://blog.csdn.net/Assg444/article/details/118675892

版权

该博客讲述了如何通过编程自动化创建HTML表格并填充数据。首先，使用JavaScript预先定义了64行8列的表格结构，然后利用shell脚本从数据库获取信息，生成JSON格式的数据。接着，前端JavaScript解析JSON并动态填充表格内容。此过程涉及到前端开发、后端数据获取以及JSON处理等技术。

摘要由CSDN通过智能技术生成

背景：因为工作需要，需要讲数据拆分之后放入表格中，一共需要64行8列，总不能手动搞吧，于是便想先获取行数，再根据行数决定画多少行，但是数据获取有问题，暂时这块没有解决，只利用for循环画了64行，然后通过shell获取数据，生成json格式的文本，利用js获取json字符串，根据行数决定循环多少次讲其写入表格内。

<body>


<div class="Tab_title2">
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
	<span>7</span>
	<span>8</span>
</div>

<div id="demo"></div>
<script>	
	var text = "" ;
	for (var i=1;i<64;i++)
	{
	text += "<div class=\"Tab_body\"><span id=\"id_sid"+i+"\"></span><span id\=\"id_sn"+i+"\"></span><span id=\"id_data"+i+"\">
	</span><span id=\"id_dev"+i+"\"></span><span id=\"id_senf"+i+"\"></span><span id=\"id_senl"+i+"\"></span>
	<span id=\"id_rssi"+i+"\"></span><span class=\"TB_last"+i+"\" id=\"id_onl"+i+"\"></span></div>";

	}
	document.getElementById("demo").innerHTML = text;
</script>
</body>

只贴出来部分较为重要的代码，在text主要是把一些需要的双引号进行转义，然后利用。innerHTML讲text的内容放到demo里，需要注意一点的是，demo的div标签需要加在script的前面否则因为加在顺序，这块会出错。
在这里插入图片描述
表格如上所示，下面利用shell脚本，nvram获取数据库内容，利用echo将其输出。

funWithParam(){
NUM=`/bin/nvram get NUM`
for ((i=1; i<=$NUM; i++))
do
	a=`/bin/nvram get INFO${i} | awk -F "," '{print $1}'`
	b=`/bin/nvram get INFO${i} | awk -F "," '{print $2}'`
	c=`/bin/nvram get INFO${i} | awk -F "," '{print $3}'`
	d=`/bin/nvram get INFO${i} | awk -F "," '{print $4}'`
	e=`/bin/nvram get INFO${i} | awk -F "," '{print $5}'`
	f=`/bin/nvram get INFO${i} | awk -F "," '{print $6}'`
	g=`/bin/nvram get INFO${i} | awk -F "," '{print $7}'`
	h=`/bin/nvram get INFO${i} | awk -F "," '{print $8}'`
	echo ""
	
	echo -n \"id_sid${i}\":\"$id_sid${a}\",\"id_sn${i}\":\"$id_sn${b}\",\"id_data${i}\":\"$id_data${c}\", 
	\"id_dev${i}\":\"$id_dev${d}\",\"id_senf${i}\":\"$id_senf${e}\",\"id_senl${i}\":\"$id_senl${f}\",
	\"id_rssi${i}\":\"$id_rssi${g}\",\"id_onl${i}\":\"$id_onl${h}\",

done
}
echo '{'
funWithParam

NUM=`/bin/nvram get NUM`
echo -n \"NUM\":\"$NUM\"
echo '}'

通过定义funWithParam 函数将每次获取到的内容打印出来，需要注意的几点小细节：
1.注意json要求格式很严格，必须要在执行函数之前先echo出 { 在输出内容完输出}
2.由于我最后还有一个数据因此在我这里格式是完全没问题的但是我测试过最后一个}前的逗号会自动忽略，echo出的内容也不包括逗号
3.注意一定要是用 echo -n 它的意思是不换行输出，这样组成的json串比较完美，换行可能导致问题。

下一步就是通过前端js获取数据，并将其写入表格了，这里使用的是ajax的函数JSON.parse(this.responseText)，这块我也不是很懂-.-

	var json_str = JSON.parse(xmlhttp.responseText);
	num_json = json_str.NUM;
	for (var i = 1; i <= num_json; i++)
	{
	document.getElementById("id_sid"+i).innerHTML = json_str['id_sid'+i];
	document.getElementById("id_sn"+i).innerHTML = json_str['id_sn'+i];
    document.getElementById("id_data"+i).innerHTML = json_str['id_data'+i];
    document.getElementById("id_dev"+i).innerHTML = json_str['id_dev'+i];
	document.getElementById("id_senf"+i).innerHTML = json_str['id_senf'+i];
    document.getElementById("id_senl"+i).innerHTML = json_str['id_senl'+i];
    document.getElementById("id_rssi"+i).innerHTML = json_str['id_rssi'+i];
    document.getElementById("id_onl"+i).innerHTML = json_str['id_onl'+i];
	}