Rumah hujung hadapan web tutorial js 基于JQuery的一句代码实现表格的简单筛选_jquery

基于JQuery的一句代码实现表格的简单筛选_jquery

May 16, 2016 pm 06:22 PM
jquery penapis

效果图:
基于JQuery的一句代码实现表格的简单筛选_jquery
代码:

复制代码 代码如下:













DataKeyNames="OrderID" DataSourceID="SqlDataSource1"
HorizontalAlign="Left" PageSize="50" >

SortExpression="OrderID" InsertVisible="False" />
SortExpression="CustomerID" />
SortExpression="EmployeeID" />
SortExpression="OrderDate" />
SortExpression="RequiredDate" />
SortExpression="ShippedDate" />
SortExpression="ShipVia" />
SortExpression="Freight" />


ConnectionString=""
SelectCommand="SELECT top 50 * FROM [Orders]">





 
JQuery代码就:
复制代码 代码如下:

$(function() {
$("#Text1").keyup(function() {
var filterText = $(this).val();
$("# tr").not(":first").hide().filter(":contains('" + filterText + "')").show();;
}).keyup();
});


里面最重要的就是JQuery的选择器:

1:$("# tr")选择表格的所有行;
2:not(":first"):除去第一行表头行;
3:filter(":contains('" + filterText + "')"):从上面所选择的行里面筛选出行文本中包含filterText 的行显示出来;
4:最后加一句keyup()是为了在提交后重新触发keyup事件。(但是在这里没有作用因为我用的客户端控件没有ViewState
若是服务器端控件就会看见他的作用)。

JQuery的选择器的强大之处,让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有JQuery插件提供
给我们选择, 但是这种简单的功能,我不会去选择加入一个JavaScript文件库,呵呵。
作者:破  浪
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)

Cara menapis lebih daripada 3 kata kunci pada masa yang sama dalam excel Cara menapis lebih daripada 3 kata kunci pada masa yang sama dalam excel Mar 21, 2024 pm 03:16 PM

Excel sering digunakan untuk memproses data dalam kerja pejabat harian, dan selalunya perlu menggunakan fungsi "penapis". Apabila kami memilih untuk melakukan "penapisan" dalam Excel, kami hanya boleh menapis sehingga dua syarat untuk lajur yang sama Jadi, adakah anda tahu cara menapis lebih daripada 3 kata kunci pada masa yang sama dalam Excel? Seterusnya, izinkan saya menunjukkannya kepada anda. Kaedah pertama ialah menambah keadaan secara beransur-ansur pada penapis. Jika anda ingin menapis tiga butiran kelayakan pada masa yang sama, anda perlu menapis satu daripadanya langkah demi langkah terlebih dahulu. Pada mulanya, anda boleh menapis terlebih dahulu pekerja dengan nama keluarga "Wang" berdasarkan syarat. Kemudian klik [OK], dan kemudian tandakan [Tambah pilihan semasa untuk penapis] dalam hasil penapis. Langkah-langkahnya adalah seperti berikut. Begitu juga, lakukan penapisan secara berasingan sekali lagi

Apakah yang perlu saya lakukan jika terdapat data dalam jadual Excel tetapi tempat kosong ditapis? Apakah yang perlu saya lakukan jika terdapat data dalam jadual Excel tetapi tempat kosong ditapis? Mar 13, 2024 pm 06:38 PM

Excel adalah perisian pejabat yang kerap digunakan Ramai pengguna merekodkan pelbagai data dalam jadual, tetapi jadual itu jelas mengandungi data dan kosong apabila menapis mengenai masalah ini, ramai pengguna tidak tahu cara menyelesaikannya. , kandungan tutorial perisian ini adalah untuk memberikan jawapan kepada majoriti pengguna yang memerlukan dialu-alukan untuk menyemak penyelesaian. Apakah yang perlu saya lakukan jika terdapat data dalam jadual Excel tetapi tempat kosong ditapis? Alasan pertama ialah jadual mengandungi baris kosong Kami mahu menapis semua orang dengan nama keluarga "Li", tetapi kami dapat melihat bahawa hasil yang betul tidak ditapis kerana jadual mengandungi baris kosong Bagaimana menangani situasi ini? Penyelesaian: Langkah 1: Pilih semua kandungan dan kemudian tapis Tekan c

Cara menapis kandungan pendua dalam word Cara menapis kandungan pendua dalam word Mar 19, 2024 pm 07:01 PM

Apabila ia datang untuk menapis kandungan pendua, perkara pertama yang mungkin anda fikirkan ialah menapis nilai berangka dalam Excel Malah, dalam Word, kami juga boleh menapis teks pendua dalam dokumen. Apabila anda tidak pasti sama ada anda telah menaip perkataan dengan salah, anda boleh menggunakan penapis untuk melihat Langkah ini sangat mudah. Editor di bawah akan membawa anda mempelajari cara menapis kandungan pendua dalam Word Rakan yang ingin belajar, datang dan belajar bersungguh-sungguh! 1. Mula-mula, kita buka dokumen perkataan yang ingin kita tapis pada komputer, seperti yang ditunjukkan dalam rajah di bawah. 2. Kemudian, kita pilih teks yang ingin kita cari, seperti yang ditunjukkan oleh anak panah merah dalam gambar di bawah. 3. Tekan [ctrl+H] pada papan kekunci untuk memaparkan arahan cari dan ganti Anak panah merah dalam rajah di bawah menunjuk ke

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Feb 28, 2024 pm 03:12 PM

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Feb 28, 2024 am 08:39 AM

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi keperluan untuk memanipulasi atribut ketinggian elemen. Kadangkala, kita mungkin perlu menukar ketinggian unsur secara dinamik, dan kadangkala kita perlu mengalih keluar atribut ketinggian unsur. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar atribut ketinggian elemen dan memberikan contoh kod khusus. Sebelum menggunakan jQuery untuk mengendalikan atribut ketinggian, kita perlu terlebih dahulu memahami atribut ketinggian dalam CSS. Atribut ketinggian digunakan untuk menetapkan ketinggian elemen

Bagaimana untuk menyediakan dan mengendalikan penapisan wps? Bagaimana untuk menyediakan dan mengendalikan penapisan wps? Mar 20, 2024 pm 09:51 PM

Apabila menggunakan jadual WPS, kami kadangkala menyenaraikan semua jenis data dalam jadual Jika perlu, kami perlu memilih data yang memenuhi keperluan untuk aplikasi sangat mengurangkan kecekapan kerja gunakan beberapa fungsi perisian untuk membuat pilihan Fungsi penapisan wps boleh merealisasikan operasi ini. Mari kita lihat perkongsian operasi di bawah. 1. Buka dahulu data yang perlu ditapis pada komputer (seperti yang ditunjukkan di bawah) 2. Mula-mula pilih pengepala jadual dan klik "Start" (seperti yang ditunjukkan di bawah). 3. Kemudian klik "Penapis" (seperti yang ditunjukkan di bawah). 4. Kemudian anda akan menemui segitiga terbalik di belakang pengepala jadual Klik pada segitiga terbalik di belakang "Math" (seperti yang ditunjukkan di bawah). 5. Kemudian pilihan penapisan akan muncul, seperti mengklik "Penapis Nombor"

Penyelesaian kepada masalah bahawa jadual Excel tidak boleh ditapis Penyelesaian kepada masalah bahawa jadual Excel tidak boleh ditapis Mar 14, 2024 am 10:20 AM

Dalam kehidupan seharian, saya dapati jadual Excel tidak boleh ditapis, apakah yang perlu saya lakukan? Excel ialah salah satu alat pemprosesan data yang paling biasa digunakan, membantu pengguna melengkapkan kemasukan data dan organisasi dengan mudah dan cepat Untuk membolehkan pengguna menggunakan Excel dengan lancar, mari kita lihat penyelesaian kepada masalah yang jadual Excel tidak boleh ditapis. . 1. Mula-mula buka dokumen Excel dan klik pilihan [Lihat] dalam menu. 2. Klik pilihan [Freeze Window] dalam bar alat. 3. Kemudian dalam pilihan yang terbuka, batalkan tetapan beku. 4. Anda boleh menapis semula selepas membatalkan.

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: &lt

See all articles