javascript之表格

最新推荐文章于 2022-04-13 15:08:41 发布
最新推荐文章于 2022-04-13 15:08:41 发布
阅读量478 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chejinqiang/article/details/44116851
版权 
<html>

<head>

<title></title>

</head>

<body>
<script>
//创建table对象
var tab=document.createElement("table");
tab.width=500;
tab.border=1;
tab.id="tab";
var row,cell;
for(var i=0;i<3;i++){
//为表插入行
row=tab.insertRow(-1);//参数-1表示新增的行或者列是新增在最后面
for(var j=0;j<3;j++){
cell=row.insertCell(-1);
cell.innerHTML="我是单元格"+i+"*"+j;
}
}
document.body.appendChild(tab);






</script>
</body>

</html>

<pre name="code" class="java"><html>

<head>

<title></title>

</head>

<body>
<script>
var tab=document.createElement("table");
tab.width=500;
tab.id="tab";
tab.border=2;
var row,cell;
for(var i=0;i<3;i++){
row=tab.insertRow(-1);
for(var j=0;j<3;j++){
cell=row.insertCell(-1);
cell.innerHTML="我是单元格"+i+"*"+j;}
}

document.body.appendChild(tab);
alert("查看删除效果");
tab.deleteRow(1);
alert("查看删除效果");
tab.rows[0].deleteCell(2);
</script>
</body>

</html>


<html>

<head>

<title></title>


<style>
body{
margin:0; //设置对象四边的外补丁
padding:0;//设置对象四边的内补丁
background:#000000;
color:black;//设置文本的颜色
line-height:100%;//字体的行高
}
table{
width:100%;
height:50%;
}
//定义表头所使用的背景图片
th{
font-size:200%;
font-weight:bold;
cursor:pointer;//像手形一样的样式
}
td{
background:#e5f1f4;
text-align:center;
}

</style>
</head>
<body>
<table id="sortTable" cellspacing="0" cellpadding="0" border=1>
<tr bgcolor=greenorange><th>数字</th><th>英文</th><th>汉字<th>标题</th></th></tr>
<tr><td>1</td><td>a</td><td>啊</td><td>data1</td></tr>
<tr><td>3</td><td>b</td><td>哦</td><td>data2</td></tr>
<tr><td>5</td><td>c</td><td>饿</td><td>data3</td></tr>
<tr><td>4</td><td>d</td><td>是</td><td>data4</td></tr>
</table>
<script>
var sortTable=document.getElementById("sortTable");
sortTable.οnmοuseοver=function(e){
e=e||event;//兼容事件对象
var target=e.target||e.srcElement;//兼容事件源
if(target.tagName.toLowerCase()=='td'){
for(var i=1,l=this.rows.length;i<l;i++){
this.rows[i].cells[target.cellIndex].style.background='#bce774';
}
var cells=target.parentNode.cells;
for(var i=0,l=cells.length;i<l;i++)
cells[i].style.background='#bce774';
}
}
sortTable.οnmοuseοut=function(e){
e=e||event;//兼容事件对象
var target=e.target||e.srcElement;//兼容事件源
if(target.tagName.toLowerCase()=='td'){
for(var i=1,l=this.rows.length;i<l;i++){
this.rows[i].cells[target.cellIndex].style.background='#e5f1f4';
}
var cells=target.parentNode.cells;
for(var i=0,l=cells.length;i<l;i++)
cells[i].style.background='#e5f1f4';
}
}









</script>
</body>

</html>


<html>

<head>

<title></title>

</head>

<body>
<script>
var numbers=[2,4,8,5,1];
alert(numbers.sort());

</script>
</body>

</html>


<html>

<head>

<title></title>

</head>

<body>
<script>
var chars=['b','c','e','x'];
alert(chars.sort());

</script>
</body>

</html>


<html>

<head>

<title></title>

</head>

<body>
<script>
var letters=['呆','啊','猜','中'];
alert(letters.sort(
function(a,b){
return a.localeCompare(b);}
));
</script>
</body>

</html>


<html>

<head>

<title></title>

</head>

<body>
<table width="500" border="1" id="tab">
<tr><td>我是单元格</td><td>我是单元格</td><td>我是单元格</td></tr>
<tr><td>我是单元格</td><td>我是单元格</td><td>我是单元格</td></tr>
<tr><td>我是单元格</td><td>我是单元格</td><td>我是单元格</td></tr>
</table>
<script>
var tab=document.getElementById("tab");
var rows=tab.rows.length;//获取表格的行数
var cells;
for(var i=0;i<rows;i++){
//获取当前行的单元格数 
cells=tab.rows[i].cells.length;
for(var j=0;j<cells;j++)
tab.rows[i].cells[j].innerHTML+=i+"*"+j;
}

</script>
</body>

</html>



 


                

        

        

    




    

      

        

            

              
                
                  车晋强
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
javascript表格

				
			

			

				

					2304_76550555的博客
				

				

					05-26
					
					276
					
				

			

		

		

			
				
<input type="submit" value="添加英雄" onclick="add()"/></td></tr><tr align="center"><td>编号</td><td>名字</td><td>外号</td><td>操作</td></tr><tr><td>编号:<input type="text" id="index"name="index"/>

			
		

	



                

              
                



	

		

			

				
					
JavaScript制作表格

				
			

			

				

					张晓颜的博客
				

				

					12-07
					
					2364
					
				

			

		

		

			
				
制作一个表格，显示班级的学生信息。要求：1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff2. 点击添加按钮，能动态在最后添加一行3. 点击删除按钮，则删除当前行


     new document 
    
    

        window.onload = function(){

            var tr=document

			
		

	



                


  
              

                


	

		

			

				
					
JavaScript 动态表格操作

				
			

			

				

					wgchen
				

				

					04-13
					
					5176
					
				

			

		

		

			
				
阅读目录JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法1.1 Table 对象集合1.2 Table 对象方法1.3 Table 对象常用属性1.4 TableRow 对象TableRow 对象方法TableRow 对象属性1.5 TableCell 对象TableCell 对象属性JavaScript 实现点击显示和隐藏表格技术解答JavaScript 实现动态克隆一个表格技术解答JavaScript 实现动态点击改变单元格颜色技术解答
JavaScript 动态创建表

			
		

	





	

		

			

				
					
JavaScript实现动态表格

				
			

			

				

					weixin_45757641的博客
				

				

					01-18
					
					4102
					
				

			

		

		

			
				
JavaScript实现动态表格
基本效果如下
点击添加，可以将输入框中的值，新增到表格中；点击删除可以删除本行内容。

代码如下：
第一种方式（较简单，建议使用）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格02</title>
    <style>
        table{
           

			
		

	



		

			
		



	

		

			

				
					
JavaScript 表格过滤器

				
			

			

				

					allway2的博客
				

				

					04-01
					
					1647
					
				

			

		

		

			
				
在这篇教程博客中，我们学习了如何使用 JavaScript 在 HTML 表格中添加过滤器或搜索选项？

借助 HTML、CSS、JavaScript 创建 JavaScript 表格过滤器，然后我们可以从 HTML 表格中过滤数据。这里我们需要创建响应式 HTML 表格设计，如果您不知道如何设计请参阅响应式表格设计帖子，希望您能了解响应式 HTML 表格。



您已经在许多网站上看到，您可以在表格中搜索特定条件。大多数情况下，当用户设置一些条件然后过滤相应的数据时，您已经访问了任何网站后端仪表板。

本

			
		

	





	

		

			

				
					
javascript操作表格

				
			

			

				

					12-09
				

			

		

		

			
				
在网页设计中，JavaScript 提供了一种强大而灵活的方式，使用户可以与表格进行交互，例如添加、删除、编辑单元格或行，以及排序数据。  在给定的描述中，我们看到一个CSS样式代码，它定义了表格及其元素（如`<input>...

			
		

	





	

		

			

				
					
JavaScript简单表格编辑功能实现方法

				
			

			

				

					12-03
				

			

		

		

			
				
在JavaScript中，实现表格（Table）的编辑功能是一项常见的任务，尤其在网页交互设计中。本文将通过一个实例详细介绍如何使用JavaScript实现简单的表格编辑功能，包括插入行、删除行、插入单元格、删除单元格、创建...

			
		

	





	

		

			

				
					
JavaScript实现表格排序方法

				
			

			

				

					10-27
				

			

		

		

			
				
JavaScript作为前端开发中不可或缺的语言，常被用来实现各种动态交互效果，包括表格排序。本文旨在介绍如何使用JavaScript实现表格排序的方法。  ### 知识点1：JavaScript排序算法的选择  实现表格排序的关键在于...

			
		

	





	

		

			

				
					
javascript之锁定表格栏位

				
			

			

				

					10-30
				

			

		

		

			
				
在JavaScript中，锁定表格栏位通常是指在用户滚动页面时保持特定列或行可见的技术，这对于数据密集型的Web应用程序非常有用，特别是当表格内容过多，用户需要滚动查看时，保持表头或关键列固定可以帮助用户更好地...

			
		

	





	

		

			

				
					
Javascript 表格操作实现代码

				
			

			

				

					10-29
				

			

		

		

			
				
Javascript 表格操作实现代码   Javascript 是一种广泛应用于 Web 开发的脚本语言，它可以用来实现网页的交互效果和动态更新。在本文中，我们将通过实例代码来介绍如何使用 Javascript 实现表格操作，包括获取表格值...

			
		

	





	

		

			

				
					
javascript之动态网页编程

				
			

			

				

					车晋强的专栏
				

				

					03-07
					
					2988
					
				

			

		

		

			
				
第一章  JavaScript简介
JavaScript在HTML中的使用：
在网页文件的标签对中直接编码
将程序代码放置在一个单独的文件中，在网页的适当位置引用这个文件
将程序代码作为某个元素的事件属性值，或超链接的href属性。
可以出现在HTML文件中的标签对中，也可以出现在标签对中，在一个HTML中，可以使用多个标签对。并且各段JavaScript代码之间可以相互访问，




			
		

	





	

		

			

				
					
javascript之对象

				
			

			

				

					车晋强的专栏
				

				

					03-07
					
					2146
					
				

			

		

		

			
				
innerHTML属性




alert(document.documentElement.innerHTML);









var func=new Function("a","b","alert(this==window)");
func(3,4);
func.call(Object,3,4);








function getosinfo(){
var os="δ֪";


			
		

	





	

		

			

				
					
javascript之传智播客

				
			

			

				

					车晋强的专栏
				

				

					03-07
					
					1079
					
				

			

		

		

			
				
张孝祥JavaScript网页编程第一章  HTML基础
注释标签不可以嵌入。
特殊字符的表示：
<  
>   >
 空格
©&copt;版权符号。
&&
"“
格式标签：
     表示段落
  换行
   用于防止浏览器将过长 的文字换行显示
   加入的文本按缩进的方式显示
   居中
   behavior=

			
		

	





	

		

			

				
					
javascript之键盘与鼠标事件

				
			

			

				

					车晋强的专栏
				

				

					03-07
					
					943
					
				

			

		

		

			
				
第十章  键盘和鼠标事件处理
键盘和鼠标事件处理功能非常强大，在网页设计中经常用到。这一章将介绍相关的内容。
10.1事件处理
在本节给出一个例子，当用户在Web页面中单击鼠标左键时，程序要能够报告鼠标所在的位置，当和户释放鼠标键时，需要报告鼠标键已经弹起，如果用户在按下三个功能键的同时再按下鼠标键，也应当给出详细的报告。
在实际应用中，鼠标右键对程序控制来说是没有用的，因为浏览器已经预先

			
		

	





	

		

			

				
					
javascript之定位

				
			

			

				

					车晋强的专栏
				

				

					03-07
					
					873
					
				

			

		

		

			
				
先说说学习方法吧：建议的学习方法：
学习JavaScript比较快速有效的方法是先熟悉一些基本的概念，然后经常查看网站中所使用的JavaScript源代码，积累一些有用的函数。长期不用且容易忘记的东西，
取好在计算机上留有留份。
只要熟悉了HTML，CSS。了解了DOM对象事件模型，了解了DOM对象之间的各种关系，又掌握了一些编程技巧和JavaScript语法，就可以编写出实现各种功能的代码

			
		

	





	

		

			

				
					
javascript动态网页编程二

				
			

			

				

					车晋强的专栏
				

				

					03-07
					
					869
					
				

			

		

		

			
				
第六章  JavaScript对象与数组
对象是JavaScript最基本的数据类型之一，是一种复合的数据类型，将多种数据类型集中在一个数据单元中。并允许通过对象名来存取这些数据的值。
对象使用运算符new来创建，在new之后必须有用于初始化对象的构造函数名，。
在建立新对象之前，需要通过构造其属性来定义对象，这一过程由定义函数名及其属性的函数来完成。
function Student(n

			
		

	





	

		

			

				
					
javascript之表单

				
			

			

				

					车晋强的专栏
				

				

					03-07
					
					752
					
				

			

		

		

			
				
第十七章 表单和表单元素
表单是网页设计中的重要内容。没有表单，就不能实现网页内容的交互。
17.1 表单基础
javaScript通过Form对象访问XHTML文档内的表单。Form对象是Document对象的一个子对象。
Form对象的常用属性：
action        动作属性值，表示用户提交表单后，数据要传送到的URL。
elements[]    表单域对象队列，
en

			
		

	





	

		

			

				
					
javascript基础之DOM

				
			

			

				

					车晋强的专栏
				

				

					03-07
					
					600
					
				

			

		

		

			
				
什么是DHTML？
JavaScript将浏览器本身，网页文档，以及网页文档中的HTML元素都用内置对象来表示，这些对象以及对象之间的层次关系统称为文档对象模型DOM。文档对象模型。
动态HTML。
window对象：
window对象代表浏览器的的整个窗口，编程人员可以利用window对象控制浏览器窗口的各个方面。如改变状态栏上的显示文字，移动窗口，弹出对话框等。
对window对象属

			
		

	





	

		

			

				
					
javascipt之动态网页编程三

				
			

			

				

					车晋强的专栏
				

				

					03-07
					
					589
					
				

			

		

		

			
				
18.1  复选框
复选框是一个带有标识的小方格，当用户单击时，在其中会显示一个选择标志。或者已经有的选择标志消失。本节向用户显示多个复选框。






请选择一个复选框

check1
check2
check3







function check1Click(){
document.myform.textBox.value="1 is cli

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值