Js--动态生成表格

<div>
        <h1>动态生成表格</h1>
        <div id="table1">
            行:<input type="text" id="h"/>
            列:<input type="text" id="l"/>
            <input type="button" value="生成" onclick="addTable();" />
            <div id="divt"></div>
        </div>
        
    </div>
    <script type="text/javascript">
        function addTable(){
                /*动态生成表格
                    1、得到输入的行和列的值
                    2、生成表格
                        循环行
                        在行里面循环单元格
                    3、显示到页面上
                        把表哥的代码设置到div里面
                        使用innerHTML属性
                */
            var h=document.getElementById("h").value;
            var l=document.getElementById("l").value;
            var divtab=document.getElementById("divt");
            //把表格代码放到一个变量里面
            var tab="<table border=‘solid‘>";
            for(var i=0;i<h;i++){
                tab+="<tr>";
                for(var j=0;j<l;j++){
                    tab+="<td>";
                    tab+="aaaaa";
                    tab+="</td>";
                }
                tab +="</tr>";
                
            }
            tab+="</table>";
            divtab.innerHTML=tab;
        }
    </script>

原文地址:https://www.cnblogs.com/xiqoqu/p/9061560.html

时间: 2024-08-14 11:18:47

Js--动态生成表格的相关文章

JS动态生成表格后 合并单元格

JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示: 1. 没有合并之前的图如下: 2. 合并之后的图如下: 如上所示:是根据相邻的编号相同 进行单元格合并. 先看看实现后的效果再聊吧! JSfiddle链接地址如下: 点

js动态生成表格(原创)

原文:js动态生成表格(原创) 源代码下载地址:http://www.zuidaima.com/share/1571860936543232.htm 原生js实现,兼容各主流浏览器,提供生成表格,修改表格,验证合法性功能,可做学习参考 版权声明:本文为博主原创文章,未经博主允许不得转载.

js动态生成表格

下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值 1 <table> 2 <tr> 3 <td>动态生成表格</td> 4 <td><input id="Cold" type="text" class="input" size="10" name="Num"/>行</td>

JS实现动态生成表格并向后端提交表格数据(一)

前段时间开发了一些web应用,其中就有涉及到动态的表格问题,因为很久没有写web前端了,所以在网上找了一些资料,发现很零碎,于是自己就根据找到的资料写了这么一个小功能,主要是供自己记忆,如果能帮到你很荣幸,如果你有更好的方法,也可以相互讨论,相互学习一下. 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. 1 <script src="../js

JS实现动态生成表格并提交表格数据向后端 表格中数据转为json

原文地址 需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面div中事先创建一个空白表格,可以根据需求而定,我这里是一个带表头的表格 <table border="0" style="text-align: center;" width="100%" id="myTable">

js动态生成数据列表

我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js来动态生成表格. 首先我们需要先写好页面的样式. html部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

js动态创建表格------Day59

刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完成了今天的记录,结果临关机,登录了下,发现又好了,就再多花个几分钟转下吧,也不管究竟在意的是什么了,权当强迫症了... 前几天记录了动态的添加一行一列:insertRow()和insertCell();动态的删除一行一列:deleteRow()和deleteCell():选中一行:this的参数传递,这些都是实现的关键,但是这一切都建立在一个基础上:那就是存在一个表格.今天就来记录下动态建立表格的方法: 事实上在刚开始的时候,我只想到了一个

Extjs 动态生成表格

Extjs 动态生成表格 在web显示数据时,会遇到grid的列数和行数不确定的这种情况.如何来根据数据动态的创建表格呢?Extjs 的json data给我们带来了一个很好的比较简单的方法.  要创建一个grid需要确定它的列数,再根据数据的数量就可以确定行数了.  看到有人用过一种方法就是讲列的属性和数据一起放在json data里去,这样可以达到效果,但是不难发现,这样的话,就很难进行分页或者更新表格里的数据.  其实我们可以结合extjs官网上的那种固定列数的访问方法来动态生成表格.  

Android动态生成表格

最近刚刚学习完Android的五大布局,现在我们进一步深入学习,尝试做一个动态生成表格功能的例子 样式布局代码如下: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4

如何进行js动态生成option?如何实现二级连动?

何为二级连动? 首先要明白什么是二级连动!顾名思义,就是一个动,另外一个也跟着一起动 看下面的例子: 这里有一个"市级"的选择列表框,还有一个"县级"的选择列表框,如果"市级"的选择列表框中的值发现变化,那么会连带"县级"的列表框发生变化. function selectOrg(){         var selectNow = document.getElementById("city");