Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menggelungkan berbilang kotak edit dalam javascript

Bagaimana untuk menggelungkan berbilang kotak edit dalam javascript

WBOY
WBOYasal
2023-05-29 17:43:07778semak imbas

Dengan pembangunan aplikasi web yang berterusan, semakin banyak aplikasi memerlukan pengguna memasukkan berbilang data borang pada satu halaman. Data borang ini mungkin termasuk kotak teks, kotak lungsur, kotak semak, dsb. Pembangun bahagian hadapan perlu menggunakan javascript untuk mengendalikan data borang, dan perlu dapat menggelungkan berbilang kotak edit untuk mengendalikan berbilang data borang.

Terdapat dua cara utama untuk menggelungkan berbilang kotak edit dalam JavaScript: menggunakan gelung for dan menggunakan gelung sementara. Kami akan membincangkan kedua-dua kaedah satu demi satu.

Kaedah 1: Gunakan untuk gelung

Gunakan untuk gelung untuk melintasi tatasusunan dan objek seperti tatasusunan. Objek seperti tatasusunan merujuk kepada objek dengan sifat panjang dan beberapa sifat angka, seperti NodeList dan HTMLCollection. Kod sampel berikut menunjukkan cara menggunakan gelung for untuk melintasi NodeList yang mengandungi berbilang kotak edit:

var textareas = document.querySelectorAll('textarea'); // 获取所有textarea元素
for (var i = 0; i < textareas.length; i++) {
  textareas[i].value = '这是第' + (i+1) + '个编辑框'; // 设置编辑框的值
}

Dalam kod di atas, kami mula-mula menggunakan kaedah querySelectorAll untuk mendapatkan semua elemen textarea, dan kemudian gunakan gelung for untuk melintasi elemen ini. Dalam gelung, kita boleh mengendalikan setiap kotak edit, seperti menetapkan atribut nilainya.

Kaedah 2: Gunakan gelung sambil

Gunakan gelung sambil untuk melintasi senarai atau koleksi, seperti tatasusunan atau senarai terpaut. Kod sampel berikut menunjukkan cara menggunakan gelung while untuk melintasi tatasusunan yang mengandungi berbilang kotak edit:

var textareas = document.getElementsByTagName('textarea'); // 获取所有textarea元素
var i = textareas.length; // 初始化计数器
while (i--) {
  textareas[i].value = '这是第' + (i+1) + '个编辑框'; // 设置编辑框的值
}

Dalam kod di atas, kami mula-mula menggunakan kaedah getElementsByTagName untuk mendapatkan semua elemen textarea, dan kemudian gunakan gelung sementara untuk melintasi elemen ini. Dalam gelung, kita boleh mengendalikan setiap kotak edit, seperti menetapkan atribut nilainya.

Perlu diambil perhatian bahawa apabila menggunakan gelung sementara untuk memproses objek seperti tatasusunan, kita perlu menggunakan pembilang untuk melintasi tatasusunan. Memandangkan indeks tatasusunan bermula dari 0 dan nilai sifat panjang bermula dari 1, kita perlu memulakan pembilang kepada panjang tatasusunan tolak 1.

Ringkasan

Artikel ini memperkenalkan dua kaedah javascript menggelung keluar berbilang kotak edit: menggunakan gelung for dan menggunakan gelung sementara. Kedua-dua kaedah ini sesuai untuk jenis koleksi yang berbeza, dan pembangun bahagian hadapan boleh memilih kaedah yang sesuai dengan mereka mengikut situasi tertentu. Pada masa yang sama, tidak kira kaedah yang digunakan, kami boleh beroperasi pada setiap kotak suntingan dan menggunakan gelung untuk melintasi data bentuk berbilang.

Atas ialah kandungan terperinci Bagaimana untuk menggelungkan berbilang kotak edit dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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 sebelumnya:Bagaimana untuk membungkus htmlArtikel seterusnya:Bagaimana untuk membungkus html