Maison > Article > interface Web > Basé sur jQuery, une table qui réalise un effet d'incrémentation de ligne en cliquant sur la dernière ligne_jquery

Basé sur jQuery, une table qui réalise un effet d'incrémentation de ligne en cliquant sur la dernière ligne_jquery

WBOYoriginal: 2016-05-16 15:20:341630parcourir

De nos jours, tout recherche l'efficacité et l'humanité. Bien sûr, il en va de même pour les effets de page Web. S'il existe un tableau qui peut modifier les données, lors de la modification jusqu'à la dernière ligne, un clic peut automatiquement ajouter une ligne. effet humain. Pour vous éviter quelques ennuis, permettez-moi de partager un morceau de ce code ci-dessous.

Le code est le suivant :

<!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>

Le code ci-dessus répond à nos exigences. Cliquez sur la dernière ligne du tableau pour ajouter automatiquement une nouvelle ligne. Ce qui suit est une introduction à son processus de mise en œuvre.

1. Commentaires du code :

1.$(function(){}), lorsque la structure du document est complètement chargée, exécutez le code dans la fonction.
2.var oTable = $("#count"), obtenez l'objet dont la valeur de l'attribut id est count, qui est l'objet table ici.
3. iNum = 1, déclarez une variable et attribuez la valeur initiale à 1. À l'avenir, 1 sera utilisé comme numéro de ligne pour chaque ligne supplémentaire.
4.eEle = '', déclarez une variable pour stocker l'objet ligne.
5.oTable.on('click', function(e){}), enregistrez la fonction de traitement des événements de clic pour l'objet table.
6.var target = e.target, récupère l'objet source cliqué.
7.oTr = $(target).closest('tr'), récupère l'élément ancêtre tr le plus proche.
8.f(oTr.index()==oTable.find('tr').last().index()), déterminez si celle sur laquelle vous avez cliqué est la dernière ligne.
9.iNum, la valeur d'iNum est augmentée de 1.
10.eEle = oTr.clone(), clone l'objet de ligne actuel.
11.eEle.find('td').eq(0).text(iNum), définissez la valeur de la première cellule de la dernière ligne.
12.oTable.append(eEle), ajoutez des lignes à la fin du tableau.

Je voudrais présenter tout le contenu du tableau avec jQuery pour réaliser l'effet d'auto-incrémentation de ligne en cliquant sur la dernière ligne. Le contenu ci-dessus est grandement commenté. Si vous ne comprenez pas quelque chose, vous pouvez vous y référer. Merci beaucoup pour votre compréhension continue du support du site Web d'accueil.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de partage de soumission de formulaire dans le plug-in jquery EasyUI_jqueryArticle suivant：Exemple de partage de soumission de formulaire dans le plug-in jquery EasyUI_jquery

Articles Liés

Voir plus