运用jQuery动态向html中添加表格元素

实现的功能是运用jQuery动态的向一个table中添加行元素，很简单，也不废话，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>点赞统计</title>
</head>
<style type="text/css">
.tdClass{width: 26vw;border: 1px solid #cccccc
}
</style>
<body><div style="color: #FF6600;font-size: 6.5vw;width: 100%;text-align: center;margin-top: 8vw">快乐大本营</div><div style="font-size: 4.2666vw;text-align: center;margin: 7vw 0">分组点赞排名</div><table id = "group" style="width: 80vw;display: flex;margin: auto;font-size: 3.5vw;text-align: center;border-collapse:collapse;"><tr><td class="tdClass">排名</td><td class="tdClass">组名</td><td class="tdClass">票数</td></tr></table><div style="font-size: 4.2666vw;text-align: center;margin: 7vw 0">个人点赞排名</div><table id = "alone" style="margin-bottom: ;width: 80vw;display: flex;margin: auto;font-size: 3.5vw;text-align: center;border-collapse:collapse;margin-bottom: 7vw"><tr><td class="tdClass">排名</td><td class="tdClass">姓名</td><td class="tdClass">票数</td></tr></table><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="js/request.js"></script>
</body>
</html>

在没添加元素之前，显示入下图所示：

var group = [{name:"1班",num:100},{name:"2班",num:150},{name:"3班",num:200},{name:"4班",num:250},{name:"5班",num:300},{name:"6班",num:350},{name:"7班",num:400}]var groupTable = $('#group');
for(var i = 1 ;i <= group.length;i++){var item = group[i-1]groupTable.append('<tr> ' +'<td class="tdClass">' + i + '</td>' + '<td class="tdClass">' + item.name + '</td>' +'<td class="tdClass">' + item.num + '</td>' +'</tr>')
}var groupTable = $('#alone');
for(var i = 1 ;i <= group.length;i++){var item = group[i-1]groupTable.append('<tr> ' +'<td class="tdClass">' + i + '</td>' + '<td class="tdClass">' + item.name + '</td>' +'<td class="tdClass">' + item.num + '</td>' +'</tr>')
}

在动态添加了元素之后，显示如下图：

运用jQuery动态向html中添加表格元素相关推荐

java 取pdf表格内容数据_Java 在PDF中添加表格
本文将介绍通过Java编程在PDF文档中添加表格的方法.添加表格时,可设置表格边框.单元格对齐方式.单元格背景色.单元格合并.插入图片.设置行高.列宽.字体.字号等. 使用工具:Free Spire. ...
spring：如何用代码动态向容器中添加或移除Bean ？
先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...
使用jQuery在AJAX请求中添加标头
本文翻译自:Add header in AJAX request with jQuery I would like to add a custom header to an AJAX POST req ...
在WPS的Word中添加表格或复制别的文章过来的表格，表格下方不能打字
在WPS的Word中添加表格或复制别的文章过来的表格,表格下方不能打字,上下文有空,尤其是双列排版,会挤到下一列才能打字一.剪切表格,再粘贴一遍,表格右下角会有图示图标二.别乱点,表格右下角选择匹 ...
Html怎样往div中添加文本,给div中添加文本元素
[javascript]代码库给div中添加文本元素 div{ border: 1px solid blue; background-color: green; width: 300px; heig ...
php中插入表格标签,PHP_HTML中的表格元素，一，table标签。tablegt - phpStudy
HTML中的表格元素一, 1,border属性的参数值是数字,表示表格边框宽度所占的像素点数.它也可以不带有参数值使用,仅表示该表格是有边框的.例如, 2,width和height属性的作用是指定表 ...
圣诞节PNG免扣素材|轻松向现有项目中添加节日元素！
制作任何东西,从定制的圣诞卡,图标,可以用于网站设计或包装,甚至图形,照片和插图,PNG免扣格式图片素材,无疑可以帮助你有效的完成项目. 节日的装饰不仅仅包括挂一棵圣诞树和添加金属箔.装饰也可以延伸到 ...
svg.draggable.js 实现动态向svg中添加图形和图片并可以拖拽
源码: <!doctype html> <html> <head><meta charset="utf-8"><title&g ...
android 动态向Gallery中添加图片及倒影3D效果
在android中gallery可以提供一个很好的显示图片的方式,实现上面的效果以及动态添加数据库或者网络上下载下来的图片资源.我们首先实现一个自定义的Gallery类. MyGallery.java ...

运用jQuery动态向html中添加表格元素

运用jQuery动态向html中添加表格元素相关推荐

最新文章

热门文章