JQUery动态表格(后台数据查看器)

news/2024/7/11 1:42:36 标签: 表格, jQuery, table

动态表格

    • 前言:
    • HTML
    • CSS
    • js

前言:

		代码不一定最实用,但是对于初学者有一定的帮助!
		主要步骤:
				1.获取某个数据,可以是数据库,或者像我的一样获取HTML中的文本,添加到表格中。
				2.用到的jQuery方法主要有:
					值得获取val(),
					追加方法append(),
					数组的创建new Array(),
					向数组的末尾添加方法push(p1),              
					类的创建,和对象的创建.
				3.

HTML

   <table id="table1" cellpadding=0>
       <tr>
           <th>编号</th> <th>姓名</th> <th>年龄</th>
       </tr>
   </table>
   
   //表格‘#table2’是为了实现,数据填写和按钮的存放位置(为了美观)
   <table id="table2">	
       <tr>
           <td><input type="text" class="id" placeholder="ID"></td> 
           <td><input type="text" class="name" placeholder="name"></td> 
           <td><input type="text" class="age" placeholder="age"></td>
       </tr>
   </table>
   <div class="btn">
   		<input id="add" type="button" value="添加" onclick="add()">
   </div>
  

CSS

<style>
        table{width: 500px; border: 1px #ccc solid; padding: 5px;margin: 20px auto; border-collapse: collapse; margin-bottom: 0;}
        th{ border: 1px solid #3F3F3F; background-color: #3F3F3F;color: #fff;padding: 5px 10px; }
        td{ border: 1px solid #3F3F3F; padding: 5px 10px; font-size: 16px; text-align: center; }
        #table2{ margin-top: 0;}
        input{border: none;}
        input[type=text]{ width: 100px; border: none;}
        #add{width: 500px;height: 30px; border: 1px #000 solid;border-top: none;}
        .btn{margin: 0 auto; width: 500px;}
</style>

js

function add(){
            
            //获取input中的值
            // var ids = $('.id').val();
            var names = $('.name').val();
            var ages = $('.age').val();

            addTable(names,ages);   //调用添加表格一行数据的方法,并赋值
        }

        var id =0;
        function addTable(value2,value3){ //添加表格一行数据(三列的)
            id +=1;
            var personArray = new Array();      //创建person数组

            function person(number,name,age){   //定义person方法
                this.name=name;
                this.age=age;
                this.number=number;
            }

            var p1 = new person(id,value2,value3); //new person 的对象
            personArray.push(p1);                      //向数组的末尾添加一个元素 'p1'
          
            for(var i=0;i<personArray.length;i++){
                console.log(personArray[i]);
                $('#table1').append("<tr><td>"+personArray[i].number+"</td> <td>"+personArray[i].name+"</td> <td>"+personArray[i].age+"</td></tr>");
            }
}

http://www.niftyadmin.cn/n/664398.html

相关文章

将用户信息保存到Cookie中

/*** 把用户保存到Cookie* * param request* param response* param member*/private void rememberPwdAndUserName(HttpServletRequest request,HttpServletResponse response, Member member) {Long memberid member.getMemberId();String uuidMDKey parseKey(memberid);//…

征服者电子狗升级方式

花了很长时间&#xff0c;最后才弄清楚原来要这样升级。 第一步&#xff1a;安装驱动官网驱动的页面&#xff0c;例如雷霆战警系列的&#xff1a;http://rydog.gpscamera.org/安装好之后在计算机设备管理里面&#xff0c;会多一项&#xff1a;第二步&#xff1a;点击页面中的对…

Android Kotlin入门,以及Kotlin的简单写法和监听事件。

前言 Kotlin这个东西出来也有一段时间了&#xff0c;毕竟在2017年的谷歌发布会上被认可了。然后今日就想看看这个东西好不好用&#xff0c;网上很多人说好用&#xff0c;也有说不好用的&#xff0c;但是个人觉得吧&#xff0c;这个可能是Android后面的一个趋势&#xff0c;因为…

centos6安装redis3.2.5

一。redis介绍和安装 1.redis介绍: Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。从2010年3月15日起&#xff0c;Redis的开发工作由VMware主持。从2013年5月开始&#xff0c;Redis的开发由…

MySQL中的函数

MySQL中的函数单行函数数学函数日期函数其他函数流程控制函数单行函数 --CONCAT(str1,str2,...) 拼接字符串select CONCAT("Holle","MySql","88&#xff01;");--substr(str FROM pos FOR len) 截取字符串select substr("Holle",2); …

twisted(1)--何为异步

早就想写一篇文章&#xff0c;整体介绍python的2个异步库&#xff0c;twisted和tornado。我们在开发python的tcpserver时候&#xff0c;通常只会用3个库&#xff0c;twisted、tornado和gevent&#xff0c;其中以twisted和tornado为代表的异步库的效率比较高&#xff0c;但对于开…

MySQL简单查询

简单的查询 –新建一个简单的查询 select user_id ,user_name ,user_age ,user_sex from user– 起别名 select user_id 学号,user_name 姓名,user_age 年龄,user_sex 性别 from user– 去重 distinct select DISTINCT(user_name) 姓名,user_id 学号 from user– “” 计算…

获取iframe中的contentWindow

function getIframeWindow(iframeElement){ return iframeElement.contentWindow || iframeElement.contentDocument.parentWindow; } 转载于:https://www.cnblogs.com/cglWorkBook/p/5601701.html