JS如何自定义创建表格

最新推荐文章于 2024-03-22 18:08:45 发布
最新推荐文章于 2024-03-22 18:08:45 发布
阅读量5.2k 收藏 7
点赞数 4
文章标签： javascript table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/babylove_lin/article/details/70256653
版权 
 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
输入行 <input type="text" id="row"/> <br/>
输入列 <input type="text" id="col"/><br/>
<button οnclick="fun()">创建表格</button>
</body>
<script>
    function fun(){
        var row=document.getElementById("row").value;
        var col=document.getElementById("col").value;
        document.write("<table>");
        for(var i=0;i<row;i++){
            document.write("<tr >")
            for(var j=0;j<col;j++){
                document.write("<td style='width: 50px; height: 50px; border: 1px solid red'></td>");
            }
            document.write("</tr>")
        }
        document.write("</table>");
    }

</script>
</html>
在输入框中输入想要创建的行列值，即可创建表格
                

        

        

    

  


    

      

        

            

              
                
                  babylove_lin
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
JS创建自定义表格具体实现

				
			

			

				

					12-04
				

			

		

		

			
				
JS部分：  代码如下: function next() { //得到table对象 var oTable = document.getElementById(“table1”); //插入tr var oTr = oTable.insertRow(); //一行tr插入3个td var oTd1 = oTr.insertCell(); var oTd2 = oTr.insertCell(); var oTd3 = oTr.insertCell(); //指定td内容 oTd1[removed] = “@process_time显示处理某个页面所需要的时间”; oTd2[removed] 

			
		

	



                

              
                



	

		

			

				
					
如何通过前端表格控件实现自动化报表？

					
最新发布

				
			

			

				

					葡萄城技术团队博客
				

				

					07-30
					
					761
					
				

			

		

		

			
				
比如在做员工打分时，呈现给领导的报表，如果领导觉得某个员工的打分不合适，希望能直接对分数做调整，不再需要回到打分系统中，只要开发人员接入好数据回写接口，即可做到在报表查看态，高权限用户可直接进行数据修改或录入，等于说，一部分填报工作可以直接通过报表能力解决（如下图所示）。除此之外，SpreadJS 也具备了和主流报表引擎同等的报表制作能力，区别是在报表制作形式上，SpreadJS并没有选择市面上常用的表单配置型模式，而是选择了类 Excel 的报表设计形式，有效减少用户的学习成本。

			
		

	



                


  
              

                


	

		

			

				
					
JS创建自定义表格

				
			

			

				

					Erikz的专栏
				

				

					02-10
					
					1666
					
				

			

		

		

			
				
JS部分：
 
function next() {
  //得到table对象
    var oTable = document.getElementById("table1");
 //插入tr
    var oTr = oTable.insertRow();
//一行tr插入3个td
    var oTd1 = oTr.insertCell();
    var oTd

			
		

	





	

		

			

				
					
JS:自定义对象及表格操作

				
			

			

				

					weixin_52166438的博客
				

				

					08-30
					
					307
					
				

			

		

		

			
				
自定义对象的创建
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义对象的创建</title>   
<style type="text/css">

</style>
</head>
<body>

<script

			
		

	



		

			
		



	

		

			

				
					
AngularJS中自定义有关一个表格的Directive

				
			

			

				

					weixin_33896069的博客
				

				

					01-08
					
					119
					
				

			

		

		

			
				
 
本篇体验在AngularJS中自定义一个有关表格的Directive。表格的需求包括：● 表格结构&lt;table&gt;    &lt;thead&gt;        &lt;tr&gt;            &lt;th&gt;Name&lt;/th&gt;            &lt;th&gt;Street&lt;/th&gt;            &lt;th&a

			
		

	





	

		

			

				
					
jQuery自定义数据表格编辑插件

				
			

			

				

					07-28
				

			

		

		

			
				
本文将详细探讨"jQuery自定义数据表格编辑插件"这一主题，结合其描述和标签，我们将深入理解如何利用jQuery实现对表格数据的编辑功能，并能自动获取这些数据。  首先，jQuery自定义数据表格编辑插件的核心特性是点击...

			
		

	





	

		

			

				
					
spreadjs_自定义表格筛选菜单内容-demo.zip

				
			

			

				

					09-09
				

			

		

		

			
				
《SpreadJS 自定义表格筛选菜单内容的实现与详解》  SpreadJS 是一款强大的 HTML5 表格控件，它提供了一系列丰富的功能，包括数据编辑、公式计算、图表绘制等，可以满足开发者在 web 应用中创建、展示和操作电子表格...

			
		

	





	

		

			

				
					
jquery自定义表格样式

				
			

			

				

					10-23
				

			

		

		

			
				
在jQuery中，自定义表格样式是一项常见的需求，用于提升网页的视觉效果和用户体验。本教程将详细介绍如何使用jQuery实现三种不同的表格样式：默认状态、鼠标悬浮状态和鼠标点击状态。  首先，我们需要创建一个HTML...

			
		

	





	

		

			

				
					
JavaScript 自定义动态生成表格

				
			

			

				

					weixin_33701251的博客
				

				

					12-02
					
					276
					
				

			

		

		

			
				
JavaScript 自定义动态生成表格


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" conten...

			
		

	





	

		

			

				
					
js 自定义拆分表格 (按行/按列拆分)

				
			

			

				

					bug搬运工
				

				

					03-22
					
					732
					
				

			

		

		

			
				
思路：获取选中的单元格，将原来的表格克隆一份（这样可以保证拆分出的表格与原来的表格样式一样），对克隆出来的表格进行删除未选中的单元格，需要处理跨行的单元格，将修改后的表格插入到原表格的下一个兄弟节点。先将跨行的单元格进行克隆记录，将表格B对该行以上的行删除（下面案例 表头不删除），同时添加跨行的单元格，需要修改跨行的行数，同时注意添加单元格的顺序；先将跨列的单元格进行克隆记录，将表格B对该列左边的列删除，同时添加跨行的单元格，需要修改跨列数；思路：获取光标所在行，将原来的表格A克隆一份表格B，

			
		

	





	

		

			

				
					
JS自定义的漂漂亮样式的Table

				
			

			

				

					06-22
				

			

		

		

			
				
自定义的table样式
隔行换色，鼠标悬停变色 ，点击 变色

			
		

	





	

		

			

				
					
js创建table表格

				
			

			

				

					02-14
				

			

		

		

			
				
js创建table表格，有下拉框，输入框，真实可用，适合使用，学习

			
		

	





	

		

			

				
					
js/jq基础（日常整理记录）-3-一个自定义表格

				
			

			

				

					weixin_34191845的博客
				

				

					04-23
					
					202
					
				

			

		

		

			
				
一、一个自定义的表格
　　这个js是我刚工作的时候，我们老大让我做一个功能，我觉得html自带的table功能单一，没有分页和排序功能，所有就尝试着做一下，所以这个东西就出来了。很久没写博客了，贴出来吧，避免以后丢失。
先看看做出来是什么样子吧！（侧重于功能，样式没有怎么用心调整哈）
走的是ajax请求的挡板数据：
（说明：可以给指定类设置是否支持排序（升降序）,支出翻页功能）

话不...

			
		

	





	

		

			

				
					
JS自己做Table

				
			

			

				

					猩猩是个好程序员的博客
				

				

					03-01
					
					399
					
				

			

		

		

			
				
首先html里面，这个class我是基于layui的一个东西做的
<table class="layui-table" id="choiceTable">
    <thead>
    <tr align="center" class="table_header" height="22">
        <th style="width: 10%; t...

			
		

	





	

		

			

				
					
JS 创建表格

				
			

			

				

					weixin_50784508的博客
				

				

					06-12
					
					865
					
				

			

		

		

			
				
【代码】JS 创建表格。

			
		

	





	

		

			

				
					
用js做一个可自定大小的表格

				
			

			

				

					bian2845972116的博客
				

				

					10-25
					
					750
					
				

			

		

		

			
				
首先要自定义大小，那么表格的高度和宽度就不能定死，需要用变量去控制表格的大小，定义变量后，将变量应用于表格之中，然后输出。代码如下


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var w 

			
		

	





	

		

			

				
					
js创建表格

				
			

			

				

					yaojxing的博客
				

				

					04-29
					
					685
					
				

			

		

		

			
				
利用js创建表格，（注意tr的父节点时tbody，但是我们也可以利用tr的爷爷辈节点即table来创建tr）

			
		

	





	

		

			

				
					
js实现自定义修改网页中表格信息

				
			

			

				

					weixin_34279061的博客
				

				

					04-18
					
					748
					
				

			

		

		

			
				
项目中的打印页面，为提高用户体验，需要增自定修改表格内容的功能，以下是使用示意图（双击td标签部分的内容，可自定义修改）：

以下是js插件源码，存为edit.js文件：

 1 var tbl, tbt;
 2 
 3 var body = document.getElementsByTagName('body');
 4 
 5 var tb = document.getEl...

			
		

	





	

		

			

				
					
自定义左侧表头的JS表格控件实现

				
			

			

				

					
				

			

		

		

			
				
"左侧是表头的JS表格控件，是一种自定义的JavaScript实现的表格组件，用于在网页中创建具有特殊布局的表格，其中表头位于左侧。这个控件的特点包括支持多行多表头、固定表头、标题显示、数据获取、兼容IE和Chrome...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值