Background: because of work needs, it is necessary to split the data and put it into the table. A total of 64 rows and 8 columns are required. You can't do it manually, so you want to obtain the number of rows first, and then decide how many rows to draw according to the number of rows. However, there is a problem in data acquisition, which has not been solved for the time being. Only 64 rows are drawn by using the for loop, and then the data is obtained through the shell to generate text in json format, Use js to obtain json string, and determine how many times to cycle according to the number of rows, and write it into the table.
<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>
Only some important codes are pasted. In text, some required double quotes are escaped and then used. The innerHTML text content is put into the demo. It should be noted that the div tag of the demo needs to be added in front of the script, otherwise an error will occur because of the order.
The table is as shown above. Next, nvram obtains the database content using shell script and outputs it using 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 '}'
Print the content obtained each time by defining the funWithParam function. There are several small details to pay attention to:
1. Note that json requires very strict format. You must echo {output after outputting} before executing the function
2. Since I have another data at the end, I have no problem with the format here, but I have tested that the comma before the last} will be ignored automatically, and the content of echo does not include the comma
3. Note that echo -n must be used, which means no newline output. In this way, the json string is perfect, and newline may cause problems.
The next step is to get the data through the front-end js and write it into the table. Here, the function JSON of ajax is used Parse (this. ResponseText). I don't know much about this --
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];
}
It's very simple here. I won't say more.
String splicing here is mostly simple. My messy operation may be rarely used by people, and it has been done for several days..... It's still my dish ha ha