《js遍历json、js创建table、隐藏id列、点击获取id值》

前述：终于抽出时间，整理了一些编程所需基础知识。

js遍历json数据再添加到table中。选择所需行后点击提交拿到id传给后台，（也可以放入集合一起给）。

先看效果：

选择点击后：

code：


<body><div id="tb"></div>
<button onclick="submit()">提交</button>
<script>var jsonstr = '[{"id":"01sdfae24lj0s34k4234kijwerm3", info0: "01", "info2": "梨子", "info3": "3个"},' +'{"id":"02sdfae24lj0s66d32t6gu9jwerm3", "info0": "02", "info2": "苹果", "info3": "3个"},' +'{"id":"03sdfae24lj0s348t53f78tty843","info0": "03","info2": "香蕉", "info3": "6个"},' +'{"id":"04sdfae24lj0s34k4kd45gtrrm3","info0": "04","info2": "橘子", "info3": "6个"}]';function tablef() {var jsonData = new Function("return " + jsonstr)();var table = document.createElement("table");table.className = "table";table.id = "table";htmls = "<tr>" +"<td style='width:25px;'></td>" +"<td style='width:50px;'>序号</td>" +"<td style='width:100px;'>名称</td>" +"<td style='width:100px;'>个数</td>" +"</tr>";table.innerHTML = htmls;for (i = 0; i < jsonData.length; i++) {var trs = document.createElement("tr");var v = i + 1;var inbx = "<td><input class='checkbox-css'  id='cbx_" + v + "' value='' type='checkbox'/></td>";trs.innerHTML = inbx;for (tdvalue in jsonData[i]) {var td = document.createElement("td");td.appendChild(document.createTextNode(jsonData[i][tdvalue]));if (tdvalue == "id") {td.className = "disno";}trs.appendChild(td);}table.appendChild(trs);}document.getElementById("tb").appendChild(table);}window.onload = function () {tablef();};//submitfunction submit() {var table = document.getElementById('table');for (i = 1; i < table.rows.length; i++) {var id = document.getElementById("cbx_" + i);if (id.checked) {console.log(table.rows[i].cells[1].innerHTML);}}}
</script></body>

所需小知识：

1、js创建table：

<table id="tb"></table>
<script>var oTab = document.getElementById('tb');trHtml = "<tr>" +"<th style='width: 6%;'></th>" +"<th style='width: 6%;'>1</th>" +"</tr>";oTab.innerHTML = trHtml;for (var i = 0; i < 4; i++) {var oTr = document.createElement('tr');var inbx="<td><input class='checkbox-css'  id='itcheckbox' type='checkbox'/></td>";oTr.innerHTML=inbx;for (var j = 0; j < 4; j++) {var oTd = document.createElement('td');oTr.appendChild(oTd);}oTab.appendChild(oTr);}
</script>

2、table样式：

合并线条： border-collapse: collapse;
文字居中： text-align: center;
文字颜色： color: #666;
添加框线： border: 1px solid #caf1c5;
背景颜色： background-color: #CCE8EB;
整体背景色：background: #fff;

标签隐藏：display: none;

整体css：

<style type="text/css">table{border-collapse: collapse;text-align: center;}table td, table th{border: 1px solid #caf1c5;color: #666;height: 30px;}table thead th{background-color: #CCE8EB;width: 100px;}table tr:nth-child(odd){background: #fff;}table tr:nth-child(even){background: #f1f3fd;}</style>

3、js基础知识：https://blog.csdn.net/xysxlgq/article/details/119570069

。

《js遍历json、js创建table、隐藏id列、点击获取id值》相关推荐

ComeFuture英伽学院——2020年全国大学生英语竞赛【C类初赛真题解析】(持续更新)
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
ComeFuture英伽学院——2019年全国大学生英语竞赛【C类初赛真题解析】大小作文——详细解析
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
信息学奥赛真题解析（玩具谜题）
玩具谜题(2016年信息学奥赛提高组真题) 题目描述小南有一套可爱的玩具小人, 它们各有不同的职业.有一天, 这些玩具小人把小南的眼镜藏了起来.小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的 ...
信息学奥赛之初赛第1轮讲解（01-08课）
信息学奥赛之初赛讲解 01 计算机概述系统基本结构信息学奥赛之初赛讲解 01 计算机概述系统基本结构_哔哩哔哩_bilibili 信息学奥赛之初赛讲解 02 软件系统计算机语言进制转换信息 ...
信息学奥赛一本通习题答案（五）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通习题答案（三）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通提高篇第六部分数学基础相关的真题
第1章快速幂 1875:[13NOIP提高组]转圈游戏信息学奥赛一本通(C++版)在线评测系统第2 章素数第 3 章约数第 4 章同余问题第 5 章矩阵乘法第 6 章 ...
信息学奥赛一本通题目代码（非题库）
为了完善自己学c++,很多人都去读相关文献,就比如<信息学奥赛一本通>,可又对题目无从下手,从今天开始,我将把书上的题目一一的解析下来,可以做参考,如果有错,可以告诉我,将在下次解析里重 ...
信息学奥赛一本通（C++版）刷题记录
总目录详见:https://blog.csdn.net/mrcrack/article/details/86501716 信息学奥赛一本通(C++版) 刷题记录 http://ybt.ssoier. ...
最近公共祖先三种算法详解 + 模板题建议新手收藏例题：信息学奥赛一本通祖孙询问距离
首先什么是最近公共祖先?? 如图:红色节点的祖先为红色的1, 2, 3. 绿色节点的祖先为绿色的1, 2, 3, 4. 他们的最近公共祖先即他们最先相交的地方,如在上图中黄色的点就是他们的最近公共祖先 ...

《js遍历json、js创建table、隐藏id列、点击获取id值》

《js遍历json、js创建table、隐藏id列、点击获取id值》相关推荐

最新文章

热门文章