masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Penciptaan jadual yang dinamik dan meningkatkan bilangan baris jadual berdasarkan kemahiran JavaScript_javascript

Penciptaan jadual yang dinamik dan meningkatkan bilangan baris jadual berdasarkan kemahiran JavaScript_javascript

WBOY
Lepaskan： 2016-05-16 15:24:32
asal
1596 orang telah melayarinya

Dalam keperluan kerja dan projek, kadangkala bilangan baris dalam jadual tidak dapat memenuhi keperluan kami Pada masa ini, kami perlu meningkatkan bilangan baris dalam jadual secara dinamik. Editor berikut akan memperkenalkan kepada anda melalui contoh kod bagaimana untuk mencipta jadual dengan js dan menambah bilangan baris dalam jadual, dan juga melaksanakan fungsi menukar warna baris ganti. Kawan-kawan yang berminat ni boleh rujuk kod:

Kod js adalah seperti berikut: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态操作表格</title>
</head>
<body>
<script type="text/javascript">
var n = 0;
function showTable(len) 
{
 wi('<table border="1" width="300" style="border-collapse:collapse"><tbody id="table">');
 for (i=0;i<len;i++) 
 {
 if (parseInt(i%2)==1) 
{
  bg = '#F4FAC7';
 } 
else 
{
  bg = 'white'; 
 }
 wi('<tr bgcolor='+bg+'><td>第'+(i+1)+'行</td></tr>'); 
 }
 wi('</tbody></table><br />');
 wi('<input type="button" value="Add" id="add" />'); 
}</P>
<P>function wi(str) 
{
 return document.write(str); 
}
showTable(10);
var add = document.getElementById("add");
 add.onclick = function() {
 n = n+1;
 if (n%2==0) 
 {
 bg = '#F4FAC7';
 } 
 else 
 {
 bg = 'white'; 
 }
 var table = document.getElementById("table");
 var tr = document.createElement("tr");
 tr.bgColor = bg;
 var td = document.createElement("td");
 td.innerHTML = '第'+(10+n)+'行';
 tr.appendChild(td);
 table.appendChild(tr);
}
</script>
</body>
</html>
Salin selepas log masuk

Kandungan di atas adalah kod yang berkaitan untuk membuat jadual secara dinamik dan menambah bilangan baris jadual berdasarkan JavaScript. Saya harap anda menyukainya.

Label berkaitan：
javascript动态表格 js增加表格行
sumber：php.cn
Artikel sebelumnya：js untuk mencapai kemahiran effect_javascript karusel imej Artikel seterusnya：js melaksanakan muat naik imej dan kemahiran display_javascript biasa
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
Isu terkini
Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}
daripada 2024-04-06 19:25:49
0
1
505
Cara untuk mencari masa purata untuk menyatakan peralihan: menggunakan pertanyaan Eloquent atau DB Saya mempunyai jadual yang dipanggil state_histories dengan kandungan berikut: Jenis Entit...
daripada 2024-04-04 14:58:46
0
1
351
Tajuk yang disemak: Kira jumlah berdasarkan pilihan kotak pilihan Saya sedang membangunkan aplikasi penjejakan kewangan yang mudah. Dalam permohonan itu, te...
daripada 2024-04-04 13:45:50
0
1
3465
JQuery - Pengiraan/penukaran segera dalam jadual dinamik Saya mempunyai jadual HTML dinamik (baris boleh ditambah) dan saya "hanya" mahu ...
daripada 2024-04-03 12:38:26
0
1
393
Pertanyaan tab silang dalam PHP dan MYSQL Saya sedang mencari cara untuk melaksanakan pertanyaan tab silang dalam MySQL dan menemui ...
daripada 2024-04-02 22:34:20
0
1
414
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