JS动态生成Table

栏目:资讯发布:2023-10-26浏览:2收藏

JS动态生成Table,第1张

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表格,自己试试看吧

1、按照描述,题主是想将多条数据记录提交到服务端,同时服务端将数据插入到数据库。那么思路是将多条数据存在数组中,调用post方法的接口传入后端。

2、方法如下:

var sendData = [];

sendDatapush({name:'david',age:'20'});

sendDatapush({name:'peter',age:'23'});

3、传递数据给服务端,一般使用post方法调用接口,使用jquery,代码如下:

$post("接口路径",sendData,function(result){

consolelog(result,'发送结果');

});

扩展资料:

1、json与字符串互相转换:

JSONparse('{"name":"karla"}')//将字符串转换为json

JSONstringify({name:'karla'})//将json转化为字符串

2、jquery中post与get的区别:

1) $get() 方法使用GET方法来进行异步请求的。$post() 方法使用POST方法来 进行异步请求的。

2)get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体     内容发送给Web服务器的,这种传递是对用户不可见的。

3) get方式传输的数据大小不能超过2KB 而POST要大的多。

4)GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

参考资料:

-json

分类: 电脑/网络 >> 互联网

问题描述:

学用DW8做网页,听人说要将数据动态生成到一个js文件,怎么做,能举例说一下吗?

解析:

script 引用的脚本不一定是 js 文件

你可以做这样的实验

新建一个页面写上

<script src=aa></script>

aa 的内容是

<%

responsewrite "alert('花衣燕子')"

%>

试试看

JS动态生成Table

var _data = [ {'name': 'a','id': 'b1','sex': 'b', 'age': '1'}, {'name': 'a','id': 'b2','sex'...
点击下载
热门文章
    确认删除?
    回到顶部