hujung hadapan web
tutorial js
Bagaimana untuk melaksanakan semua-pilih, songsang-pilih dan padam jadual menggunakan kemahiran javascript_javascript
Bagaimana untuk melaksanakan semua-pilih, songsang-pilih dan padam jadual menggunakan kemahiran javascript_javascript
Contoh dalam artikel ini menerangkan kaedah melaksanakan javascript untuk memilih semua, menyongsangkan pemilihan dan memadamkan jadual. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以全选反选删除的表格</title>
<style type="text/css">
body,table
{
margin:0;
padding:0;
font-size:14px;
}
table,tr,th,td
{
border:1px solid #cdc;
}
th
{
background-color:green;
width:100px;
}
.oddColor
{
background-color:#ccc;
}
.evenColor
{
background-color:#fcf;
}
.overColor
{
background-color:#dff;
}
</style>
<script type="text/javascript">
//定义嵌套数组
var datas = [["张三", 30, "南昌"], ["李四", 25, "北京"], ["王五", 20, "郑州"],
["赵六", 19, "武汉"], ["李莫", 18, "深圳"], ["罗成", 33, "重庆"],
["王平", 31, "天津"], ["刘萍", 22, "上海"], ["杨丽", 17, "石家庄"],
["郭丽", 30, "广州"]];
//动态创建表格
function CreateMyTable() {
var tblMain = document.getElementById("tblMain");
var rowsCount = tblMain.rows.length;
var addRow;
var addCol;
var detailInfos;
for (var i = 0; i < datas.length; i++) {
addRow = tblMain.insertRow(rowsCount - 1);//控制数据行添加到倒数第二列
addCol = addRow.insertCell(-1);
addCol.innerHTML = "<input type='checkbox' name='item' />";
addCol.align = "center"; //控制列居中
detailInfos = datas[i];
for (var j = 0; j < detailInfos.length; j++) {
addCol = addRow.insertCell(-1);
addCol.innerHTML = detailInfos[j];
}
addCol = addRow.insertCell(-1);
addCol.innerHTML = "<input type='button' id='btnDel" + i + "' value='删除' onclick='btnDel(this)' />";
addCol.align = "center"; //控制列居中
rowsCount++;
}
TableColor();
}
//设置网格间隔色和高亮显示
var oldClassName; //记住行的背景色
function TableColor() {
var tblMain = document.getElementById("tblMain");
var rowNodes = tblMain.rows;
for (var i = 1; i < rowNodes.length-1; i++) { //除去首行和末行
if (i % 2 == 0) {
rowNodes[i].className = "evenColor";
}
else {
rowNodes[i].className = "oddColor";
}
rowNodes[i].onmouseover = function () {
oldClassName = this.className;
this.className = "overColor";
}
rowNodes[i].onmouseout = function () {
this.className = oldClassName;
}
}
}
//复选框全选函数
function checkAll() {
var currentCheckNode = event.srcElement;
var checkAllNodes = document.getElementsByName("all");
//把没有点击的全选复选框去除复选
for (var i = 0; i < checkAllNodes.length; i++) {
if (currentCheckNode != checkAllNodes[i]) {
checkAllNodes[i].checked = false;
}
}
var checkItemNodes = document.getElementsByName("item");
for (var i = 0; i < checkItemNodes.length; i++) {
checkItemNodes[i].checked = currentCheckNode.checked;
}
}
//按钮选择函数
function btnCheckboxSel(index) {
var checkItemNodes = document.getElementsByName("item");
for (var i = 0; i < checkItemNodes.length; i++) {
if (index == 2) {
checkItemNodes[i].checked = !checkItemNodes[i].checked;
}
else {
checkItemNodes[i].checked = index;
}
}
}
//每行的删除按钮函数
function btnDel(btn) {
var tblMain = document.getElementById("tblMain");
var delRowNode = btn.parentNode.parentNode;
var sMsg = "您是否要删除 姓名为:【" + delRowNode.cells[1].innerText + "】,年龄为:【" +
delRowNode.cells[2].innerText + "】,城市为:【" +
delRowNode.cells[3].innerText + "】 的数据?";
if (window.confirm(sMsg)) {
tblMain.tBodies[0].removeChild(delRowNode);
TableColor();
}
}
//删除所选项按钮函数
function btnDelSelectRow() {
var arrDel = new Array();
var pos = 0;
var itemNodes = document.getElementsByName("item");
for (var i = 0; i < itemNodes.length; i++) {
if (itemNodes[i].checked) {
arrDel[pos] = itemNodes[i].parentNode.parentNode;
pos++;
}
}
if (pos <= 0) {
return;
}
if (!window.confirm("是否要删除选择的数据?"))
return;
var tblMain = document.getElementById("tblMain");
for (var i = 0; i < arrDel.length; i++) {
tblMain.tBodies[0].removeChild(arrDel[i]);
}
}
window.onload = CreateMyTable;
</script>
</head>
<body>
<table id="tblMain" cellspacing="0" cellpadding="10px" align="center">
<tbody>
<tr>
<th><input type="checkbox" name="all" onclick="checkAll()" />全选</th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" name="all" onclick="checkAll()" />全选</th>
<th colspan="4">
<input type="button" value="全选" onclick="btnCheckboxSel(1)" />
<input type="button" value="全清" onclick="btnCheckboxSel(0)" />
<input type="button" value="反选" onclick="btnCheckboxSel(2)" />
<input type="button" value="删除所选项" onclick="btnDelSelectRow()" />
</th>
</tr>
</tbody>
</table>
</body>
</html>Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.
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
AI Hentai Generator
Menjana ai hentai secara percuma.
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
1371
52
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
Bagaimana untuk memadam nota Xiaohongshu
Mar 21, 2024 pm 08:12 PM
Bagaimana untuk memadamkan nota Xiaohongshu? pandangan! Tutorial penggunaan Xiaohongshu Cara memadam nota Xiaohongshu 1. Mula-mula buka APP Xiaohongshu dan masukkan halaman utama, pilih [Saya] di sudut kanan bawah untuk memasuki kawasan khas 2. Kemudian di kawasan Saya, klik pada halaman nota sebagai ditunjukkan di bawah , pilih nota yang anda mahu padamkan;
Adakah benar anda boleh disekat dan dipadamkan pada WeChat dan tidak dapat ditambahkan secara kekal?
Apr 08, 2024 am 11:41 AM
1. Pertama sekali, adalah palsu untuk menyekat dan memadam seseorang secara kekal dan tidak menambahkannya secara kekal. Jika anda ingin menambah pihak lain selepas anda menyekat dan memadamkannya, anda hanya memerlukan persetujuan pihak lain. 2. Jika pengguna menyekat seseorang, pihak yang satu lagi tidak akan dapat menghantar mesej kepada pengguna, melihat kalangan rakan pengguna atau membuat panggilan dengan pengguna. 3. Menyekat tidak bermakna memadamkan pihak lain daripada senarai kenalan WeChat pengguna. 4. Jika pengguna memadamkan pihak lain daripada senarai kenalan WeChat pengguna selepas menyekat mereka, tiada cara untuk pulih selepas pemadaman. 5. Jika pengguna ingin menambah pihak yang satu lagi sebagai rakan semula, pihak yang satu lagi perlu bersetuju dan menambah pengguna itu semula.
Bagaimana untuk memadam keluaran Xiaohongshu? Bagaimana untuk memulihkan selepas pemadaman?
Mar 21, 2024 pm 05:10 PM
Sebagai platform e-dagang sosial yang popular, Xiaohongshu telah menarik sejumlah besar pengguna untuk berkongsi kehidupan harian dan pengalaman membeli-belah mereka. Kadangkala kami mungkin secara tidak sengaja menerbitkan beberapa kandungan yang tidak sesuai, yang perlu dipadamkan dalam masa untuk mengekalkan imej peribadi kami dengan lebih baik atau mematuhi peraturan platform. 1. Bagaimana untuk memadam keluaran Xiaohongshu? 1. Log masuk ke akaun Xiaohongshu anda dan masukkan halaman utama peribadi anda. 2. Di bahagian bawah halaman utama peribadi, cari pilihan "Ciptaan Saya" dan klik untuk masuk. 3. Pada halaman "Ciptaan Saya", anda boleh melihat semua kandungan yang diterbitkan, termasuk nota, video, dsb. 4. Cari kandungan yang perlu dipadamkan dan klik butang "..." di sebelah kanan. 5. Dalam menu pop timbul, pilih pilihan "Padam". 6. Selepas mengesahkan pemadaman, kandungan akan hilang dari laman utama peribadi anda dan halaman awam.
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.
Cara memadam sepenuhnya Pembantu Pemindahan Fail WeChat_Pengenalan kepada cara menutup Pembantu Pemindahan Fail WeChat
Mar 20, 2024 pm 08:31 PM
Pembantu pemindahan fail WeChat tersedia untuk setiap pengguna Sesetengah pengguna menggunakannya sebagai memo untuk merekodkan beberapa perkara. Jadi bagaimana untuk memadam sepenuhnya Pembantu Pemindahan Fail WeChat? Izinkan saya memperkenalkannya kepada anda secara terperinci di bawah. Bagaimana untuk memadam sepenuhnya Pembantu Pemindahan Fail WeChat Jawapan: [WeChat]-[Tekan lama Pembantu Pemindahan Fail]-[Padam sembang ini]. Langkah-langkah khusus: 1. Mula-mula buka perisian WeChat Selepas memasuki halaman utama, kami mencari [Pembantu Pemindahan Fail] dan tekan dan tahan 2. Kemudian pop timbul akan ditandakan sebagai belum dibaca, sematkan sembang ke bahagian atas, lakukan tidak memaparkan sembang, dan memadam sembang Di sini Kita boleh klik [Padam sembang ini];
Bagaimana untuk menghantar fail kepada orang lain di TikTok? Bagaimana untuk memadam fail yang dihantar kepada orang lain?
Mar 22, 2024 am 08:30 AM
Di Douyin, pengguna bukan sahaja boleh berkongsi butiran kehidupan dan bakat mereka, tetapi juga berinteraksi dengan pengguna lain. Dalam proses ini, kadangkala kita perlu menghantar fail kepada pengguna lain, seperti gambar, video, dll. Jadi, bagaimana untuk menghantar fail kepada orang lain di Douyin? 1. Bagaimana untuk menghantar fail kepada orang lain di Douyin? 1. Buka Douyin dan masukkan antara muka sembang di mana anda ingin menghantar fail. 2. Klik tanda "+" dalam antara muka sembang dan pilih "Fail". 3. Dalam pilihan fail, anda boleh memilih untuk menghantar gambar, video, audio dan fail lain. Selepas memilih fail yang ingin anda hantar, klik "Hantar". 4. Tunggu pihak lain menerima fail anda Setelah pihak lain menerimanya, fail tersebut akan berjaya dipindahkan. 2. Bagaimana untuk memadam fail yang dihantar kepada orang lain di Douyin? 1. Buka Douyin dan masukkan teks yang anda hantar.
