js动态操作表格
这次给大家带来js动态操作表格，使用js动态操作表格的注意事项有哪些，下面就是实战案例，一起来看一下。
关于js对表格进行逐行添加，今天抽空整理了一下：新建一个html文件（没有编辑器的可以新建一个demo.txt文件，然后改后缀名为demo.html），把下面代码全部贴进去即可。
功能包括：表格添加一行，表格删除一行，表格遍历取值等。
点击说明：点击添加按钮，则表格添加一行，可进行录入，删除按钮，可删除当前行，其他行不影响。删除或者添加，每行的的编号都会自动变化，套餐和价格是，内容是
<textarea></textarea>,点击保存按钮的时候，遍历表格中所有行，把所有行的数据取出来弹框弹出展示，后期可根据需求传递到后台进行处理。
效果图：
源代码：
<!--
Creator： WangPeng
CreateTime : 2018-01-25
去年今日此门中，人面桃花相映红。
人面不知何处去，桃花依旧笑春风。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态增加表格</title>
</head>
<style>
td /*设置表格文字左右和上下居中对齐*/
{
vertical-align: middle;
text-align: center;
padding: 9px;
}
textarea{
min-height: 60px;
min-width: 200px;
}
</style>
<script type="text/javascript">
function del(obj){
if(document.getElementById('tbodyid').children.length>1){
var trid=obj.parentNode.parentNode.id;
var objtr=document.getElementById(trid);
document.getElementById('tbodyid').removeChild(objtr);
var tbody=document.getElementById('tbodyid');
var countchildren=tbody.childElementCount;
for (var i=0;i<countchildren;i++){
tbody.children[i].children[0].innerHTML=i+1;
}
}
else{
alert("请不要全部删除");
}
}
function add(){
var trid = new Date().getTime();
var packageid=trid+'packageid';
var countid=trid+'countid';
var priceid=trid+'priceid';
var objtr=document.createElement('tr');
objtr.id=trid;
objtr.innerHTML="<td></td> " +
" <td><input id='"+trid+"packageid'></td> " +
" <td><textarea id='"+trid+"countid'></textarea></td> " +
" <td><input id='"+trid+"priceid'></td> " +
" <td><button type='button' onclick='del(this)'>删除</button></td>";
document.getElementById("tbodyid").appendChild(objtr);
var tbodyobj=document.getElementById('tbodyid');
var countchildren=tbodyobj.childElementCount;
for (var i=0;i<countchildren;i++){
tbodyobj.children[i].children[0].innerHTML=i+1;
}
}
function save(){
var tbodyobj=document.getElementById('tbodyid');
var countchildren=tbodyobj.childElementCount;
var trid="";
var packageid="";
var countid="";
var priceid="";
var list=new Array();
for (var i=0;i<countchildren;i++){
trid=tbodyobj.children[i].id;
packageid=trid+"packageid";
countid=trid+"countid";
priceid=trid+"priceid";
var map={
"套餐":document.getElementById(packageid).value,
"内容":document.getElementById(countid).value,
"价格":document.getElementById(priceid).value
}
list.push(map);
}
console.log("list:",list);
alert(JSON.stringify(list));
}
</script>
<body>
<p>
<p style="width: 80%;margin: 10%">
<table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%">
<caption>动态增加表格</caption>
<thead>
<tr>
<th width="5% ">序号</th>
<th width="20%">套餐</th>
<th width="30%">内容</th>
<th width="10%">价格</th>
<th width="10%">操作</th>
</tr>
</thead>
<tbody id="tbodyid">
<tr id="123">
<td>1</td>
<td><input id="123packageid"></td>
<td><textarea id="123countid"></textarea></td>
<td><input id="123priceid"></td>
<td><button type="button" onclick='del(this)'>删除</button></td>
</tr>
</tbody>
</table>
<button type="button" onclick='add()'>添加</button>
<button type="button" onclick='save()'>保存</button>
</p>
</p>
</body>
</html>js动态生成其他的也同理，可根据自己需要在指定位置创建自己所需要的元素。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci js动态操作表格. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Langkah-langkah melaraskan format gambar yang disisipkan dalam jadual PPT
Mar 26, 2024 pm 04:16 PM
1. Buat fail PPT baharu dan namakannya [Petua PPT] sebagai contoh. 2. Klik dua kali [Petua PPT] untuk membuka fail PPT. 3. Masukkan jadual dengan dua baris dan dua lajur sebagai contoh. 4. Klik dua kali pada sempadan jadual, dan pilihan [Reka Bentuk] akan muncul pada bar alat atas. 5. Klik pilihan [Shading] dan klik [Picture]. 6. Klik [Gambar] untuk muncul kotak dialog pilihan isi dengan gambar sebagai latar belakang. 7. Cari dulang yang anda ingin masukkan dalam direktori dan klik OK untuk memasukkan gambar. 8. Klik kanan pada kotak jadual untuk memaparkan kotak dialog tetapan. 9. Klik [Format Cells] dan semak [Imej jubin sebagai teduhan]. 10. Tetapkan [Pusat], [Mirror] dan fungsi lain yang anda perlukan, dan klik OK. Nota: Lalai adalah untuk gambar diisi dalam jadual
Cara membuat jadual untuk ramalan jualan
Mar 20, 2024 pm 03:06 PM
Mampu membuat borang dengan mahir bukan sahaja kemahiran yang diperlukan untuk perakaunan, sumber manusia dan kewangan Bagi kebanyakan kakitangan jualan, belajar membuat borang juga sangat penting. Kerana data yang berkaitan dengan jualan adalah sangat besar dan kompleks, dan ia tidak boleh direkodkan dalam dokumen untuk menjelaskan masalah tersebut. Untuk membolehkan lebih ramai kakitangan jualan mahir menggunakan Excel untuk membuat jadual, editor akan memperkenalkan isu pembuatan jadual mengenai ramalan jualan Rakan yang memerlukan tidak boleh ketinggalan! 1. Buka [Ramalan Jualan dan Tetapan Sasaran], xlsm, untuk menganalisis data yang disimpan dalam setiap jadual. 2. Buat [Lembaran Kerja Kosong] baharu, pilih [Sel], dan masukkan [Maklumat Label]. [Seret] ke bawah dan [Isi] bulan. Masukkan data [Lain-lain] dan klik [
Bagaimana untuk menetapkan nilai WPS untuk menukar warna secara automatik mengikut syarat_Langkah untuk menetapkan nilai jadual WPS untuk menukar warna secara automatik mengikut keadaan
Mar 27, 2024 pm 07:30 PM
1. Buka lembaran kerja dan cari butang [Start]-[Conditional Formatting]. 2. Klik Pemilihan Lajur dan pilih lajur yang mana pemformatan bersyarat akan ditambahkan. 3. Klik butang [Pemformatan Bersyarat] untuk memaparkan menu pilihan. 4. Pilih [Serlahkan peraturan bersyarat]-[Antara]. 5. Isikan peraturan: 20, 24, teks hijau tua dengan warna isian gelap. 6. Selepas pengesahan, data dalam lajur yang dipilih akan diwarnakan dengan nombor, teks dan kotak sel yang sepadan mengikut tetapan. 7. Peraturan bersyarat tanpa konflik boleh ditambah berulang kali, tetapi untuk peraturan bercanggah WPS akan menggantikan peraturan bersyarat yang ditetapkan sebelum ini dengan peraturan tambahan terakhir. 8. Tambah lajur sel berulang kali selepas [Antara] peraturan 20-24 dan [Kurang daripada] 20. 9. Jika anda perlu menukar peraturan, anda boleh mengosongkan peraturan dan kemudian menetapkan semula peraturan.
Tutorial penggunaan PyCharm: membimbing anda secara terperinci untuk menjalankan operasi
Feb 26, 2024 pm 05:51 PM
PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python yang sangat popular. Ia menyediakan pelbagai fungsi dan alatan untuk menjadikan pembangunan Python lebih cekap dan mudah. Artikel ini akan memperkenalkan anda kepada kaedah operasi asas PyCharm dan menyediakan contoh kod khusus untuk membantu pembaca memulakan dengan cepat dan menjadi mahir dalam mengendalikan alat tersebut. 1. Muat turun dan pasang PyCharm Pertama, kita perlu pergi ke laman web rasmi PyCharm (https://www.jetbrains.com/pyc
Adakah anda tahu cara menjumlahkan jadual Word?
Mar 21, 2024 pm 01:10 PM
Kadangkala, kita sering menghadapi masalah mengira dalam jadual Word Secara amnya, apabila menghadapi masalah seperti itu, kebanyakan pelajar akan menyalin jadual Word ke Excel untuk pengiraan secara senyap. Adakah terdapat cara cepat untuk mengiranya? Sudah tentu ada, sebenarnya jumlahnya juga boleh dikira dalam Word. Jadi, adakah anda tahu bagaimana untuk melakukannya? Hari ini, mari kita lihat bersama-sama! Tanpa berlengah lagi, rakan-rakan yang memerlukan perlu segera mengumpulnya! Butiran langkah: 1. Mula-mula, kita buka perisian Word pada komputer dan buka dokumen yang perlu diproses. (Seperti yang ditunjukkan dalam gambar) 2. Seterusnya, kami meletakkan kursor pada sel di mana nilai yang dijumlahkan terletak (seperti yang ditunjukkan dalam gambar kemudian, kami klik [Bar Menu);
Langkah-langkah operasi dan langkah berjaga-jaga Deploy Linux
Mar 14, 2024 pm 03:03 PM
Langkah pengendalian dan langkah berjaga-jaga LinuxDeploy LinuxDeploy ialah alat berkuasa yang boleh membantu pengguna menggunakan pelbagai pengedaran Linux dengan pantas pada peranti Android, membolehkan pengguna mengalami sistem Linux yang lengkap pada peranti mudah alih mereka. Artikel ini akan memperkenalkan langkah pengendalian dan langkah berjaga-jaga LinuxDeploy secara terperinci dan memberikan contoh kod khusus untuk membantu pembaca menggunakan alat ini dengan lebih baik. Langkah-langkah operasi: Pasang LinuxDeploy: Pertama, pasang
Apa yang perlu dilakukan jika anda terlupa menekan F2 untuk kata laluan but win10
Feb 28, 2024 am 08:31 AM
Mungkin ramai pengguna mempunyai beberapa komputer yang tidak digunakan di rumah, dan mereka telah lupa sepenuhnya kata laluan kuasa hidup kerana mereka tidak digunakan untuk masa yang lama, jadi mereka ingin tahu apa yang perlu dilakukan jika mereka terlupa kata laluan? Kemudian mari kita lihat bersama-sama. Apa yang perlu dilakukan jika anda terlupa menekan F2 untuk kata laluan boot win10 1. Tekan butang kuasa komputer, dan kemudian tekan F2 semasa but (jenama komputer yang berbeza mempunyai butang yang berbeza untuk memasuki BIOS). 2. Dalam antara muka bios, cari pilihan keselamatan (lokasi mungkin berbeza untuk jenama komputer yang berbeza). Biasanya dalam menu tetapan di bahagian atas. 3. Kemudian cari pilihan SupervisorPassword dan klik padanya. 4. Pada masa ini, pengguna boleh melihat kata laluannya, dan pada masa yang sama mencari Didayakan di sebelahnya dan menukarnya kepada Dis.
Bagaimana untuk menukar jadual secara mendatar dan menegak dalam perkataan
Mar 20, 2024 am 09:31 AM
Perisian Word amat diperlukan untuk kami dan perlu digunakan dengan kerap Saya telah belajar cara mengedit jadual menggunakan perisian Word sebelum ini, tetapi jika saya secara tidak sengaja mengedit jadual dalam arah mendatar dan menegak, dan saya tidak mahu membuang masa semula -menciptanya, adakah mungkin untuk menukar arah mendatar dan menegak meja? Jawapannya sudah tentu ya Seterusnya, editor akan memperkenalkan kepada anda secara terperinci cara menukar jadual secara mendatar dan menegak dalam Word. Pertama, kita perlu menukar baris dan lajur jadual Word di bawah. Untuk melakukan ini, kita perlu terlebih dahulu memilih jadual sepenuhnya, kemudian klik kanan dan pilih fungsi salin. Langkah 2: Selepas memilih salinan, kami meminimumkan perkataan, kemudian buka jadual Excel, klik kanan, pilih tampal dan tampalkannya ke dalam Exc
