Rumah > Artikel > hujung hadapan web > Berdasarkan jQuery, jadual yang merealisasikan kesan kenaikan baris dengan mengklik pada row_jquery terakhir

Berdasarkan jQuery, jadual yang merealisasikan kesan kenaikan baris dengan mengklik pada row_jquery terakhir

WBOYasal: 2016-05-16 15:20:341630semak imbas

Semuanya pada masa kini mengejar kecekapan dan kemanusiaan Sudah tentu, perkara yang sama berlaku untuk kesan halaman web Jika terdapat jadual yang boleh mengedit data, apabila mengedit ke baris terakhir, klik boleh menambah baris secara automatik kesan berperikemanusiaan untuk menyelamatkan anda sedikit masalah, izinkan saya berkongsi sekeping kod tersebut di bawah.

Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
table 
{
width:800px;
margin:50px auto;
border-collapse:collapse;
border-spacing:0;
}
table tr, table th, table td 
{
border:1px solid #ddd;
font-size:12px;
}
table tr td:first-child 
{
width:30px;
text-align:center;
}
table td input 
{
width:100%;
height:100%;
padding:5px 0;
border:0 none;
}
table td input:focus 
{
box-shadow:1px 1px 3px #ddd inset;
outline:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var oTable = $("#count"), iNum = 1, eEle = '';
oTable.on('click', function(e){
var target = e.target,
oTr = $(target).closest('tr');
if(oTr.index() == oTable.find('tr').last().index())
{
iNum++;
eEle = oTr.clone();
eEle.find('td').eq(0).text(iNum);
}
oTable.append(eEle);
});
});
</script>[/size]
[size=2]</head>
<body>
<table id="count">
<tr>
<th>序号</th>
<th>姓名</th>
<th>金额[USD]</th>
<th>时间</th>
<th>项目</th>
<th>单位</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
</body>
</html>

Kod di atas merealisasikan keperluan kami Klik pada baris terakhir jadual untuk menambah baris baharu secara automatik Berikut ialah pengenalan kepada proses pelaksanaannya.

1. Kod ulasan:

1.$(function(){}), apabila struktur dokumen dimuatkan sepenuhnya, laksanakan kod dalam fungsi.
2.var oTable = $("#count"), dapatkan objek yang nilai atribut idnya dikira, iaitu objek jadual di sini.
3. iNum = 1, isytiharkan pembolehubah dan tetapkan nilai awal kepada 1. Pada masa hadapan, 1 akan digunakan sebagai nombor baris untuk setiap baris tambahan.
4.eEle = '', isytiharkan pembolehubah untuk menyimpan objek baris.
5.oTable.on('click', function(e){}), daftarkan fungsi pemprosesan acara klik untuk objek jadual.
6.var target = e.target, dapatkan objek sumber yang diklik.
7.oTr = $(target).closest('tr'), dapatkan tr elemen moyang terdekat.
8.f(oTr.index()==oTable.find('tr').last().index()), tentukan sama ada yang diklik ialah baris terakhir.
9.iNum, nilai iNum dinaikkan sebanyak 1.
10.eEle = oTr.clone(), klon objek baris semasa.
11.eEle.find('td').eq(0).text(iNum), tetapkan nilai sel pertama baris terakhir.
12.oTable.append(eEle), tambah baris pada hujung jadual.

Saya ingin memperkenalkan semua kandungan jadual dengan jQuery untuk merealisasikan kesan kenaikan automatik baris dengan mengklik pada baris terakhir Kandungan di atas sangat diulas jika anda tidak memahami sesuatu, anda boleh merujuk itu. Terima kasih banyak atas pemahaman anda yang berterusan tentang sokongan laman web Home.

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：Contoh perkongsian penyerahan borang dalam pemalam jquery EasyUI_jqueryArtikel seterusnya：Contoh perkongsian penyerahan borang dalam pemalam jquery EasyUI_jquery

Artikel berkaitan

Lihat lagi