zoukankan      html  css  js  c++  java
  • 获取表格数据转换为JSON字符串

    核心代码JavaScript代码:

    方法一

    function sc () {
        			var myTable=document.getElementById("myTable");
        		    //获取表格中的所有行
        		    var rows=myTable.rows;
        		    //获取第一行的所有列
        		    var title=rows[0].cells;
        		    var json="";
        		    for (var i=1;i<rows.length;i++) {
        		    	var cells=rows[i].cells;//获取第i行中的所有列
        			    json+="{";
        			    //拼裝JSON字符串
        			    for (var j=0;j<cells.length;j++) {
        			    	json+="""+title[j].innerHTML+"":""+cells[j].innerHTML+"","
        			    }
        			    //运用substring()方法获取所需要的子串,去掉不需要的逗号
        			    json=json.substring(0,json.length-1)+"},"
        		    }
        		    json="["+json.substring(0,json.length-1)+"]";
        		    alert(json);
        		}
    

    方法二(第一步获取表格数据并储存在js数组中,第二步把js对象数组转化为JSON字符串)

    function sc () {
        		   var trs = document.getElementsByTagName("tr"); //获取表格中的所有行
    				var sum = [];//新建一个数组
    				for(var i = 1; i < trs.length; i++) {
    					var tds=trs[i].cells;//获取第i行的所有列
    					var stu={};//新建一个对象
    					//把属性和属性的值添加到对象中
    					stu.编号=tds[0].innerHTML;
    					stu.书名=tds[1].innerHTML;
    					stu.单价=tds[2].innerHTML;					
    					sum.push(stu);//使用push方法把对象添加到数组中
    				}
    				document.write(JSON.stringify(sum));//把js对象数组转换成JSON字符串并输出
        		}
    

      

      HTML代码

    		<table id="myTable" class="cart_table">
        		<tr class="cart_title">
        			<td>编号</td>
        			<td>书名</td>
        			<td>单价</td>
        		</tr>
        		<tr>
        			<td>1</td>
        			<td>C程序设计语言</td>
        			<td>50</td>
        		</tr>
        		<tr>
        			<td>2</td>
        			<td>并行程序设计</td>
        			<td>80</td>
        		</tr>
        		<tr>
        			<td>3</td>
        			<td>C#设计模式</td>
        			<td>100</td>
        		</tr>   		
        	</table>
        	<input type="button" onclick="sc()" value="获取表格数据生成JSON" />
    

     CSS样式

             .cart_table {
    				text-align: center;				
    				border-collapse: collapse;
    			}
    			.cart_title {
    				background-color: #999999;
    			}
    			td {
    				border: 1px solid;
    			}
    

      

     得到JSON数据如下

    [{"编号":"1","书名":"C程序设计语言","单价":"50"},{"编号":"2","书名":"并行程序设计","单价":"80"},{"编号":"3","书名":"C#设计模式","单价":"100"}]
    

     

  • 相关阅读:
    外观模式
    享元模式
    c#中的抽象类和接口
    装饰者模式
    组合模式
    适配器模式
    springboot 源码篇002## web层自动装配部分源码
    springboot 源码篇002## 自动装配原理
    springboot 源码篇 01
    shell 脚本基础 第二篇
  • 原文地址:https://www.cnblogs.com/duyadong/p/12112993.html
Copyright © 2011-2022 走看看