如何在Jquery javascript/js ajax中插入html代码 how to insert html into jquery javascript js ajax?

步骤steps

1 先定义html文本

 

2 插入

其实插入的话,有三种方式:append, after【自行查】

上行代码意思是在id为tablelist 的table中的最后一行,插入newRow定义的代码

关于jquery操作table的代码,自行查

 

真实需求demo

在js中需要Ajax获取数据需要一行行展示,不能使用Jgrid插件(因为行里面有下拉菜单jqgrid会挡下下拉菜单正常显示)

因此使用bootstrap的table来显示数据。

流程

首先页面画一个table

(id为tablelist)

 

关键的JS代码

如下:

效果显示

如下

Snip20150807_4

 

除了表头是写好的,其它都是动态生成的。

细节

1 关于Ajax后台请求写法

请看下篇博文

2 关于在拼装的html里面又要调js方法,甚至在调到js方法的时候要传动态参数/静态参数,如何办,引号应该如何写?

解决办法:动态参数(33行)

静态参数(56行)

3 关于拼装的html里面,如何根据Ajax返回值不同,显示不同的网页div块/不同的网页内容

解决办法:可以定义多个网页块,然后在拼装的时候,用if进行判断,然后用+想要显示的块

显示不同的div块示例:

 

显示不同的网页内容

4 动态生成的表格里的数据,是如何填充到里面的

更多请搜索Jquery如何操作表格

总结及延伸

其实更好的插入html方法是模板法,但是

一是要用插件,麻烦

二是插件现在很多不怎么成熟,有的还有bug, 会影响业务

三是增加学习成本

当然网页插入html多且重复性劳动大时,要用模板

发表评论

电子邮件地址不会被公开。