Rumah hujung hadapan web tutorial js Bagaimana untuk mencipta borang dinamik dalam kemahiran javascript_javascript

Bagaimana untuk mencipta borang dinamik dalam kemahiran javascript_javascript

May 16, 2016 pm 03:49 PM
javascript cipta bentuk dinamik

Contoh dalam artikel ini menerangkan cara membuat borang dinamik menggunakan JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<style>
#tab {
border:1px solid #aaa;
border-collapse:collapse;
width:80%;
}
#tab th{
border:1px solid #aaaaaa;
background:#ECE9D8;
border-collapse:collapse;
padding:5px;
text-align:left;
}
#tab td{
border:1px solid #d8d8d8;
border-collapse:collapse;
padding:5px;
}
.txt{
  border:1px solid #888;
background:#ECE9D8;
}
.checkBg{
border:1px solid #aaaaaa;
background:#ECE9D8;
}
.checkTxt{
border:1px solid #aaa;
background:##d8d8d8;
}
.button {
  border:1px solid #888;margin:5px 0px;
  width:80px;background:#ECE9D8;height:22px;line-height:22px;
}
</style>
  <script language="javascript" type="text/javascript">
  function $(id) {return document.getElementById(id);}
  function $F(name){return document.getElementsByTagName(name);}
function add(){
  var otr = document.getElementById("tab").insertRow(-1);
  var checkTd=document.createElement("td");
  checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">';
  var otd1 = document.createElement("td");
  otd1.innerHTML = '<input type="text" class="txt" name="infoName_txt" id="infoName_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>';
  var otd2 = document.createElement("td");
  otd2.innerHTML = '<input type="text" class="txt" name="infoValue_txt" id="infoValue_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>';
  otr.appendChild(checkTd);
  otr.appendChild(otd1); 
  otr.appendChild(otd2); 
}
function ccolor()
{
  var c1 = document.getElementsByName('checkItem');
  for(var i=0; i<c1.length; i++)
  if(c1[i].checked)
  {
   c1[i].parentNode.parentNode.className="checkBg";
   c1[i].parentNode.nextSibling.firstChild.className="checkTxt";
   c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";
  }
  else { c1[i].parentNode.parentNode.className="";
  c1[i].parentNode.nextSibling.firstChild.className="";
   c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
function del(){
  var c = document.getElementsByName('checkItem');
  var idArray = new Array();
  for(var i=0; i<c.length; i++)
  if(c[i].checked)
  idArray.push(i);
  var rowIndex;
  var nextDiff =0;
  for(j=0;j< idArray.length;j++)
  {
  rowIndex = idArray[j]+1-nextDiff++;
  document.getElementById("tab").deleteRow(rowIndex);
  }
  }
function save(){
  var postString = $("postString");
   var checkboxs = document.getElementsByName("checkItem");
   var ttab = document.getElementsByName("infoName_txt");
   var tt2 = document.getElementsByName("infoValue_txt");
   var idArray = new Array();
   for(i=0;i<checkboxs.length;i++)
  {
   idArray.push(ttab[i].value + "|" + tt2[i].value); 
  }
   postString.value = idArray.join("-");
   alert(postString.value);
}
  function alldell()
  {
  var des =document.getElementsByName('checkItem');
  for(var i=0;i<des.length;i++)
  {
  if(des[i].checked=document.getElementById('delall').checked){
  des[i].parentNode.parentNode.className="checkBg";
  des[i].parentNode.nextSibling.firstChild.className="checkTxt";
  des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}
  else{ des[i].parentNode.parentNode.className="";
   des[i].parentNode.nextSibling.firstChild.className="";
   des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
  }
  } 
</script>
</head>
<body>
<input name="addv_btn" id="addv_btn" type="button" class="button" onClick="add();" value="add" /> 
<input name="del_btn" id="del_btn" type="button" class="button" onClick="del();" value="del" /> 
<input name="save" id="save" type="button" class="button" onClick="save();" value="save" /><br>
<table id="tab" >
<tr>
<th width="5%"><input type="checkbox" id="delall" onclick="alldell()"></td>
<th width="40%">Name</td>
<th width="55%">value</td> 
</tr>
</table>
<p>
<input type="text" name="postString" id="postString"> 
</p>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mencipta seni piksel dalam GIMP Bagaimana untuk mencipta seni piksel dalam GIMP Feb 19, 2024 pm 03:24 PM

Artikel ini akan menarik minat anda jika anda berminat menggunakan GIMP untuk penciptaan seni piksel pada Windows. GIMP ialah perisian penyuntingan grafik terkenal yang bukan sahaja percuma dan sumber terbuka, tetapi juga membantu pengguna mencipta imej dan reka bentuk yang cantik dengan mudah. Selain sesuai untuk pemula dan pereka profesional, GIMP juga boleh digunakan untuk mencipta seni piksel, satu bentuk seni digital yang menggunakan piksel sebagai satu-satunya blok bangunan untuk melukis dan mencipta. Cara Membuat Seni Piksel dalam GIMP Berikut ialah langkah utama untuk mencipta gambar piksel menggunakan GIMP pada PC Windows: Muat turun dan pasang GIMP, kemudian lancarkan aplikasi. Buat imej baharu. Ubah saiz lebar dan tinggi. Pilih alat pensel. Tetapkan jenis berus kepada piksel. sediakan

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Cara mencipta keluarga dengan Gree+ Cara mencipta keluarga dengan Gree+ Mar 01, 2024 pm 12:40 PM

Ramai rakan menyatakan bahawa mereka ingin tahu cara membuat keluarga dalam perisian Gree+ Berikut adalah kaedah operasi untuk anda Rakan yang ingin mengetahui lebih lanjut, datang dan lihat dengan saya. Mula-mula, buka perisian Gree+ pada telefon mudah alih anda dan log masuk. Kemudian, dalam bar pilihan di bahagian bawah halaman, klik pilihan "Saya" di hujung kanan untuk memasuki halaman akaun peribadi. 2. Selepas datang ke halaman saya, terdapat pilihan "Buat Keluarga" di bawah "Keluarga". 3. Seterusnya lompat ke halaman untuk mencipta keluarga, masukkan nama keluarga yang akan ditetapkan dalam kotak input mengikut gesaan, dan klik butang "Simpan" di penjuru kanan sebelah atas selepas memasukkannya. 4. Akhir sekali, gesaan "simpan berjaya" akan muncul di bahagian bawah halaman, menunjukkan bahawa keluarga telah berjaya dibuat.

Cara Membuat Poster Kenalan untuk iPhone Anda Cara Membuat Poster Kenalan untuk iPhone Anda Mar 02, 2024 am 11:30 AM

Dalam iOS17, Apple telah menambahkan ciri poster kenalan pada apl Telefon dan Kenalan yang biasa digunakan. Ciri ini membolehkan pengguna menetapkan poster yang diperibadikan untuk setiap kenalan, menjadikan buku alamat lebih visual dan peribadi. Poster kenalan boleh membantu pengguna mengenal pasti dan mencari kenalan tertentu dengan lebih cepat, meningkatkan pengalaman pengguna. Melalui ciri ini, pengguna boleh menambah gambar atau logo tertentu pada setiap kenalan mengikut keutamaan dan keperluan mereka, menjadikan antara muka buku alamat lebih jelas Apple dalam iOS17 menyediakan pengguna iPhone dengan cara baru untuk mengekspresikan diri mereka, dan menambah poster kenalan yang boleh diperibadikan. Ciri Poster Kenalan membolehkan anda memaparkan kandungan unik dan diperibadikan apabila memanggil pengguna iPhone lain. awak

Cara membuat carta Gantt menggunakan Highcharts Cara membuat carta Gantt menggunakan Highcharts Dec 17, 2023 pm 07:23 PM

Cara menggunakan Highcharts untuk mencipta carta Gantt memerlukan contoh kod khusus Pengenalan: Carta Gantt ialah bentuk carta yang biasa digunakan untuk memaparkan kemajuan projek dan pengurusan masa secara visual boleh memaparkan masa mula, masa tamat dan kemajuan tugas. Highcharts ialah perpustakaan carta JavaScript yang berkuasa yang menyediakan jenis carta kaya dan pilihan konfigurasi yang fleksibel. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta Gantt dan memberikan contoh kod khusus. 1. Carta tinggi

Bagaimana untuk membuat folder pada Telefon Realme? Bagaimana untuk membuat folder pada Telefon Realme? Mar 23, 2024 pm 02:30 PM

Tajuk: Panduan Pemula Telefon Realme: Bagaimana Membuat Folder pada Telefon Realme? Dalam masyarakat hari ini, telefon bimbit telah menjadi alat yang sangat diperlukan dalam kehidupan manusia. Sebagai jenama telefon pintar popular, Telefon Realme digemari pengguna kerana sistem pengendaliannya yang ringkas dan praktikal. Dalam proses menggunakan telefon Realme, ramai orang mungkin menghadapi situasi di mana mereka perlu mengatur fail dan aplikasi pada telefon mereka, dan mencipta folder ialah cara yang berkesan. Artikel ini akan memperkenalkan cara membuat folder pada telefon Realme untuk membantu pengguna mengurus kandungan telefon mereka dengan lebih baik. Tidak.

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Dec 17, 2023 pm 05:13 PM

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

See all articles