实例详解jQuery实现用户信息表格的添加和删除功能
本文主要介绍了jQuery实现用户信息表格的添加和删除功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助到大家。
1、浏览器界面
一个简单的用户信息操作
2、html代码
<body>
<form name="userForm">
<center>
用户录入
<br />
用户名:
<input id="username" name="username" type="text" size=15 />
E-mail:
<input id="email" name="email" type="text" size=15 />
电话:
<input id="tel" name="tel" type="text" size=15 />
<input type="button" value="添加" id="btn_submit" />
<input type="button" value="删除所有" id="btn_removeAll" />
</center>
</form>
----------------------------
<hr />
<table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
<thead>
<tr>
<th>用户名</th>
<th>E-mail</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
----------------------------
<tbody id="userTbody">
<tr>
<td>乔峰</td>
<td>qiao@163.com</td>
<td>18212345678</td>
<td>
<a href='#' class='myClz'>删除</a>
</td>
</tr>
</tbody>
----------------------------
</table>
</body>3、jQuery实现
$(function () {
$("#btn_submit").click(function () {
// 获取用户输入的值
var usernameVal = $("#username").val();
var emailVal = $("#email").val();
var telVal = $("#tel").val();
var tr = "<tr><td>" + usernameVal + "</td><td>" + emailVal
+ "</td><td>" + telVal
+ "</td><td><a href='#' class='myClz'>删除</a></td></tr>";
$("#userTbody").append(tr);
});
// 全部删除
$("#btn_removeAll").click(function () {
$("#userTbody").empty();
});
//删除一行数据
/*click只对本身页面有的元素有作用，对于后面新加的元素，不起作用
$(".myClz").click(function() {
console.log(123);
});
*/
/*选择id=userTbody元素下所有样式名含有myClz的标签,并添加click事件
*当点击后,向上一级找到tr元素，然后删除
*/
$('#userTbody').on('click', ".myClz", function () {
$(this).closest('tr').remove();
});
});相关推荐：
Atas ialah kandungan terperinci 实例详解jQuery实现用户信息表格的添加和删除功能. 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
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
1378
52
Bagaimana untuk menggunakan akaun Xiaohongshu untuk mencari pengguna? Bolehkah saya mencari nombor telefon bimbit saya?
Mar 22, 2024 am 08:40 AM
Dengan perkembangan pesat media sosial, Xiaohongshu telah menjadi salah satu platform sosial yang paling popular. Pengguna boleh membuat akaun Xiaohongshu untuk menunjukkan identiti peribadi mereka dan berkomunikasi serta berinteraksi dengan pengguna lain. Jika anda perlu mencari nombor Xiaohongshu pengguna, anda boleh mengikuti langkah mudah ini. 1. Bagaimana untuk menggunakan akaun Xiaohongshu untuk mencari pengguna? 1. Buka APP Xiaohongshu, klik butang "Temui" di penjuru kanan sebelah bawah, dan kemudian pilih pilihan "Nota". 2. Dalam senarai nota, cari nota yang disiarkan oleh pengguna yang ingin anda cari. Klik untuk memasuki halaman butiran nota. 3. Pada halaman butiran nota, klik butang "Ikuti" di bawah avatar pengguna untuk memasuki halaman utama peribadi pengguna. 4. Di penjuru kanan sebelah atas halaman utama peribadi pengguna, klik butang tiga titik dan pilih "Maklumat Peribadi"
Log masuk ke Ubuntu sebagai pengguna super
Mar 20, 2024 am 10:55 AM
Dalam sistem Ubuntu, pengguna root biasanya dilumpuhkan. Untuk mengaktifkan pengguna root, anda boleh menggunakan arahan passwd untuk menetapkan kata laluan dan kemudian menggunakan arahan su untuk log masuk sebagai root. Pengguna akar ialah pengguna dengan hak pentadbiran sistem tanpa had. Dia mempunyai kebenaran untuk mengakses dan mengubah suai fail, pengurusan pengguna, pemasangan dan pengalihan keluar perisian, dan perubahan konfigurasi sistem. Terdapat perbezaan yang jelas antara pengguna akar dan pengguna biasa Pengguna akar mempunyai kuasa tertinggi dan hak kawalan yang lebih luas dalam sistem. Pengguna akar boleh melaksanakan perintah sistem yang penting dan mengedit fail sistem, yang tidak boleh dilakukan oleh pengguna biasa. Dalam panduan ini, saya akan meneroka pengguna akar Ubuntu, cara log masuk sebagai akar, dan bagaimana ia berbeza daripada pengguna biasa. Notis
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei?
Mar 24, 2024 am 11:27 AM
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak
Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci
Mar 20, 2024 pm 04:54 PM
Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei
Mar 24, 2024 pm 06:03 PM
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.
Analisis mekanisme penyimpanan kata laluan pengguna dalam sistem Linux
Mar 20, 2024 pm 04:27 PM
Analisis mekanisme penyimpanan kata laluan pengguna dalam sistem Linux Dalam sistem Linux, penyimpanan kata laluan pengguna adalah salah satu mekanisme keselamatan yang sangat penting. Artikel ini akan menganalisis mekanisme penyimpanan kata laluan pengguna dalam sistem Linux, termasuk storan kata laluan yang disulitkan, proses pengesahan kata laluan dan cara mengurus kata laluan pengguna dengan selamat. Pada masa yang sama, contoh kod khusus akan digunakan untuk menunjukkan proses operasi sebenar penyimpanan kata laluan. 1. Penyimpanan kata laluan yang disulitkan Dalam sistem Linux, kata laluan pengguna tidak disimpan dalam sistem dalam teks biasa, tetapi disulitkan dan disimpan. L
Pangkalan Data Oracle: Bolehkah seorang pengguna mempunyai beberapa ruang meja?
Mar 03, 2024 am 09:24 AM
Pangkalan data Oracle ialah sistem pengurusan pangkalan data hubungan yang biasa digunakan, dan ramai pengguna akan menghadapi masalah dengan penggunaan ruang jadual. Dalam pangkalan data Oracle, pengguna boleh mempunyai berbilang ruang jadual, yang boleh mengurus penyimpanan dan organisasi data dengan lebih baik. Artikel ini akan meneroka cara pengguna boleh mempunyai berbilang ruang jadual dalam pangkalan data Oracle dan memberikan contoh kod khusus. Dalam pangkalan data Oracle, ruang jadual ialah struktur logik yang digunakan untuk menyimpan objek seperti jadual, indeks dan pandangan. Setiap pangkalan data mempunyai sekurang-kurangnya satu ruang meja,
Panduan Pelaksanaan Keperluan Permainan PHP
Mar 11, 2024 am 08:45 AM
Panduan Pelaksanaan Keperluan Permainan PHP Dengan populariti dan perkembangan Internet, pasaran permainan web menjadi semakin popular. Ramai pembangun berharap untuk menggunakan bahasa PHP untuk membangunkan permainan web mereka sendiri, dan melaksanakan keperluan permainan adalah langkah utama. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk melaksanakan keperluan permainan biasa dan menyediakan contoh kod khusus. 1. Cipta watak permainan Dalam permainan web, watak permainan adalah elemen yang sangat penting. Kita perlu mentakrifkan atribut watak permainan, seperti nama, tahap, nilai pengalaman, dll., dan menyediakan kaedah untuk mengendalikannya
