masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > 用js实现的一个根据内容自动生成表格的函数_javascript技巧

用js实现的一个根据内容自动生成表格的函数_javascript技巧

WBOY

Lepaskan： 2016-05-16 19:09:40

asal

1210 orang telah melayarinya

晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序。
要求是：
1，对于空内容，应该写为"

",否则在ie会显示的很变态（ie当作该单元格不存在）。
2，当输出数据条数不等于表格的“长X宽”时，用" "自动填补最后一行空余的地方。

其实也很简单，当时做asp时用了一个较复杂的算法（下面代码中MakeTable2），今天又想到一个更容易理解的算法（MakeTable1）,今天用js实现了下，不过郁闷的是感觉效率上都一样，这样还是用第一个比较好（容易理解，代码少）。
代码如下：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">     
<title>Untitled 1</title>     
<style type="text/css">     
.style1 {     
    font-size: x-small;     
}     
</style>     
     
    
     
<span class="style1">     
<script type="text/javascript">     
/*    
    函数作用：根据数组内容自动调整表格大小,对于空内容写入占位符，对于最后不足整行的用空单元格补足。    
    函数思路：首先计算数组长度，并根据要显示列数计算实际需要行数，然后循环输出行列并根据索引输出数组元素，    
             如果当前数组索引不小于数组长度或当前数组值为空则写入占位符单元格。    
*/    
function makeTable1(cols,a){    //cols为列数，a应该是一个用逗号分开的字符串     
    //alert(a.split(',').length);     
    var t1=new Date().getTime();     
    a=a.split(',');    //显式转换为数组,否则ie不能识别为数组     
    var l=a.length;    //得到数组的长度     
    var rows=parseInt(l/cols)+(l%cols==0?0:1);    //计算出行数     
         
    var outStr="<table border=\"1\" align=\"center\">";     
    for(var i=0;i<rows;i++){     
        outStr+="<tr>";     
        for(var j=0;j<cols;j++){     
            var temp=cols*i+j;    //计算当前索引     
            outStr+=("<td width=\"80\" align=\"center\" height=\"80\">"+( (temp<l&&a[temp]!='') ? a[temp]:" ")+"");     
        }     
        outStr+=""    
    }     
    outStr+="";     
    document.write(outStr+"<center>执行时间："+(new Date().getTime()-t1)+"");     
    //alert(rows);     
}     
/*    
    函数作用：同上    
    函数思路：计算数组长度，然后根据长度循环输出元素值，如果当前循环变量值是列数的整数倍（余数为0），    
             则输出行结束标记。否则输出列信息。然后计算当前循环变量值是否是列数的整数倍，如果不是，利用循环补足。直至补齐。    
*/    
function makeTable2(cols,a){     
    var t2=new Date().getTime();     
    a=a.split(',');     
    var l=a.length;     
    var outStr="<table border=\"1\" align=\"center\">";     
    for(var i=0;i<l;i++){     
        var temp=(i+1)%cols;     
        if(i==0||temp==1){     
            outStr+="<tr>";     
        }     
             
        outStr+=("<td width=\"80\" height=\"80\" align=\"center\">"+a[i]+"");     
             
        if(temp==0){     
            outStr+="";     
        }     
    }     
         
    var x=i%cols;     
    if(x!=0){     
        for(var i=0;i<(cols-x);i++){     
            outStr+="<td> ";     
        }     
        outStr+=""    
    }     
    outStr+=""    
    document.write(outStr+"<center>执行时间："+(new Date().getTime()-t2)+"");     
}     
var str="a,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s";     
str+=str;     
str+=str;     
makeTable1(5,str);     
makeTable2(5,str);     
</script>     
</span>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Label berkaitan：

用js实现的一个根据内容自动生成表格的函数

sumber：php.cn

Artikel sebelumnya：javascript写的一个表单动态输入提示的代码_表单特效 Artikel seterusnya：javascript下操作css的float属性的特殊写法_javascript技巧

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Menjana kandungan menggunakan Ajax - menatal ke Id tidak berfungsi Saya menjana kandungan halaman berdasarkan data yang diperoleh melalui ajax. Masalah yang ...

daripada 2024-04-04 09:29:39

0

1

397

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan