如何通过js获取当前页面的数据并组合成json字符串_框架

感觉还是有点复杂，可用。可加双引号。

<!DOCTYPE html>

<html>

<head>

<meta ;

重新放下JS，好难看

function tabToJSON(id) {

var trs = documentgetElementById(id)getElementsByTagName("tr");//获得tr数组

var titles = trs[0]getElementsByTagName("td"); //获得表头td数组

var json = "";

for(var i = 1; i < trslength; i++) {

var tds = trs[i]getElementsByTagName("td");

json += "{";

//拼装json

for(var j = 0; j < tdslength; j++)

json += titles[j]innerHTML + ":" + tds[j]innerHTML + ",";

json = jsonsubstring(0, jsonlength - 1) + "},";

}

json = "[" + jsonsubstring(0, jsonlength - 1) + "]";

documentgetElementById("test")innerHTML = json;

}

function tabToJSONForJquery(id) {

var titles = $("#" + id)find("tr:first td"); //获得表头td数组

//遍历非表头的，tr、td拼装json

var json = "[" + $("#" + id)find("tr:not(:first)")map(function(i, e) {

return "{" + $(e)children("td")map(function(j, el) {

return $(titles[j])html() + ":" + $(el)html();

})get()join(",") + "}";

})get()join(",") + "]";

$("#test")html(json);

}

JSON 一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。（现在公司大部分都用这个）。 json的表示方式：{"city":"Beijing","street":" Chaoyang Road ","postcode":100025} ，这就是个简单的json对象。实际上此处的 json对象相当于 Java 中的 Map<String, Object>。注意 Key 只能用 String 表示。

其中 Value 也可以是另一个 Object 或者数组，因此，复杂的 Object 可以嵌套表示，例如，一个 Person 对象包含 name 和 address 对象，可以表示如下：

{"name":"Michael","address":

{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}

}

</SPAN>

</SPAN>JavaScript 处理 JSON 数据

function handleJson() {

var j={"name":"Michael","address":

{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}

};

documentwrite(jname);

documentwrite(jaddresscity);

}

现在一般在后台用gson将数据转换成json对象，前台用jquery的ajax与后台的数据进行交互。具体咋用网上有很多实例，如果实在不懂得话，加我的qq:1249119842

假如你这个json对象用变量j表示

用下面代码

var t='', k=jstudentjson;

//得到数组k

for(var i=0;i<klength;i++){

var m=k[i];

t+=['<tr><td>'+m['学号'],m['姓名'],m['性别'],m['班级']+'</td></tr>']join('</td><td>');

}

t='<table><tbody>'+t+'</tbody></table>';

//得到表格html代码t

存储过程获取，其实都是一样的。只不过底层的查询语句变成存储过程写的罢了。

数据传输用JSON，其实就是KEY和VALUE。把查询出来的集合、实体、各种结果包装成MAP类型。可以方便的与JSON进行转换读写。

根据需要自定义实体类，以便前后台的统一调用。这样的实体类可以与实体表出入很大。完全根据需要制定。

var _data = [

{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},

{'name': 'a','id': 'b2','sex': 'g','age': '2'},

{'name': 'a','id': 'b3','sex': 'g','age': '3'},

{'name': 'a','id': 'b4','sex': 'b','age': '4' }

]

var UI = {};

UIGrid = {};

function creatTable(current,o){

var table = documentcreateElement('table');

tableid = oid;

tablestylecssText = 'width: 300px; height: 100px;border-collapse:collapse;border: 1px solid #DDDDDD;';

var thead = documentcreateElement('thead');

var th = documentcreateElement('tr');

thstylewidth = '300px';

thstylecssText = 'background: #ffffff';

var tbody = documentcreateElement('tbody');

tbodystylecssText = 'border: 1px solid #DDDDDD;';

for(var i = 0 ; i < ocloumlength ; i++){

var td = documentcreateElement('td');

tdstylewidth = '75px' ;

var span = documentcreateElement('span');

spaninnerHTML = ocloum[i]head;

spanstylelineHeight = '30px';

//spanstylefontFamily = '宋体';

spanstylefontSize = '25px';

tdappendChild(span);

tdstyletextAlign = 'center';

thappendChild(td);

}

theadappendChild(th);

for( var j = 0 ; j < odatalength ; j++){

var tr = documentcreateElement('tr');

//var att = getKeys(trattributes);

// consoleinfo(att);

// consoleinfo(trattributes);

// consoleinfo(trattributeslength);

// trattributesselected = false;

for(var i = 0 ; i < ocloumlength ; i++){

var td = documentcreateElement('td');

var text = odata[j][ocloum[i]datafield] ; //应该有个加载function调用

tdinnerHTML = text;

tdstyletextAlign = 'center';

tdstylecssText = 'border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;text-align:center';

trappendChild(td);

}

trstylecssText = 'border-top: 1px solid #DDDDDD;';

tbodyappendChild(tr);

}

tableappendChild(thead);

tableappendChild(tbody);

currentappendChild(table);

};

$fncreatSth = function(o){

UIGrid[oid] = o ;

var current = this[0];

var table = documentcreateElement('table');

tablestylecssText = 'border-collapse:collapse;border: 1px solid #DDDDDD;';

//line 1

var tr1 = documentcreateElement('tr');

tr1styleheight = '8px';

var td11 = documentcreateElement('td');

td11stylewidth = '8px';

var td12 = documentcreateElement('td');

var td13 = documentcreateElement('td');

td13stylewidth = '8px';

tr1appendChild(td11);

tr1appendChild(td12);

tr1appendChild(td13);

// toolbar - line

var trbar = documentcreateElement('tr');

trbarstyleheight = '15px';

var tdbar1 = documentcreateElement('td');

var tdbar2 = documentcreateElement('td');

var tdbar3 = documentcreateElement('td');

tdbar2innerHTML = '123123';

trbarappendChild(tdbar1);

trbarappendChild(tdbar2);

trbarappendChild(tdbar3);

//line 2

var tr2 = documentcreateElement('tr');

var td21 = documentcreateElement('td');

td21stylewidth = '8px';

var td22 = documentcreateElement('td');

creatTable(td22,o);

var td23 = documentcreateElement('td');

td23stylewidth = '8px';

tr2appendChild(td21);

tr2appendChild(td22);

tr2appendChild(td23);

//line 3

var tr3 = documentcreateElement('tr');

tr3styleheight = '8px';

var td31 = documentcreateElement('td');

td31stylewidth = '8px';

var td32 = documentcreateElement('td');

var td33 = documentcreateElement('td');

td33stylewidth = '8px';

tr3appendChild(td31);

tr3appendChild(td32);

tr3appendChild(td33);

tableappendChild(tr1);

if(otbar){

tableappendChild(trbar);

}

tableappendChild(tr2);

tableappendChild(tr3);

currentappendChild(table);

};

$('#test')creatSth({

id:'tb1',

cloum:[

{head:'name',datafield:'name'},

{head:'id',datafield:'id'},

{head:'sex',datafield:'sex'},

{head:'age',datafield:'age'}

data:_data

});

//获取jsonObject的key值

function getKeys(o){

var keys = [];

for(key in o){

keyspush(key);

}

return keys;

}

这个是用JS和jquery写的简单的JS表格，自己试试看吧

你好！！

//一个笨方法，从json中取出内容拼成table并追加到body中

$(function(){

var table_1 = {

"table": {

"_width": "600",

"thead": {

};

var jsonTbl = table_1table; //获取json中的table

if(jsonTbl != ""){ //如果table不为空

var $tbl = $("<table/>"); //创建一个table元素

$tblwidth(jsonTbl_width)attr("border",1);//设置table1的宽度和边框

//循环thead中的tr

$each(jsonTbltheadtr, function(i, _tr){

var $tr = $("<tr/>"); //创建一个tr元素

//循环tr中的th

$each(_trth, function(j, _th){

var $th = $("<th/>"); //创建一个th元素

$thtext( _th_text ); //设置th元素的文本内容

if(_th_colspan){ //如果存在_colspan属性

$thattr("colspan", _th_colspan); //为th元素添加colspan属性

}

$trappend( $th ); //将th元素追加至tr元素上

});

$tblappend( $tr ); //将该tr元素追加至table元素上

});

//循环tbody中的tr

$each(jsonTbltbodytr, function(i, _tr){

var $tr = $("<tr/>"); //创建一个tr元素

//循环tr中的td

$each(_trtd, function(j, _td){

var $td = $("<td/>"); //创建一个td元素

$tdtext( _td_text ); //设置td元素的文本内容

$trappend( $td ); //将该td元素追加至tr元素上、

});

$tblappend( $tr ); //将tr元素追加至table元素上

})

//将表格元素追加至body

$("body")append( $tbl );

}

};

//还有种使用模板实现的方式，需要引入一个jquerytmplminjs文件，它是个jQuery模板插件

</table>

</script>

$(function(){

var table_1 = {

"table": {

"_width": "600",

"thead": {

};

$("#tbl")tmpl( table_1table )appendTo( $("body") );

});

</script>

希望对你有帮助！！！

<!DOCTYPE HTML>

<head>

</style>

var json = [

1, 2, 3

];

$ (function ()

{

$ ("table")data ("json", json)

alert ($ ("table")data ("json"));

})

</script>

</head>

<body>

</body>

</html>

以上就是关于如何通过js获取当前页面的数据并组合成json字符串全部的内容，包括:如何通过js获取当前页面的数据并组合成json字符串、js如何获取ajax返回的json的数据、怎么样在js代码中获取json对象中的数据，我刚开始学到json对象这不太熟，求详细代码！加急我在线等！等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/9871689.html

如何通过js获取当前页面的数据并组合成json字符串

发表评论

评论列表（0条）