Maison > interface Web > js tutoriel > Partage d'exemples de la fonction de table générée dynamiquement ajax de jQuery

Partage d'exemples de la fonction de table générée dynamiquement ajax de jQuery

小云云
Libérer: 2018-01-10 09:10:13
original
1609 Les gens l'ont consulté

Cet article présente principalement la fonction de jQuery ajax pour générer dynamiquement des tables et analyse les compétences opérationnelles associées de jQuery pour créer dynamiquement des tables basées sur l'interaction des données ajax sur la base d'exemples spécifiques. J'espère que les amis qui en ont besoin pourront s'y référer. cela peut aider tout le monde.

$(function(){
ajaxT();
});
function ajaxT(){
$.ajax({
  type:"POST",
  dataType: "json",
  url:"<%=basePath%>UserInfoServlet",
  data:"doaction=userList",
  success:function(data){
  createShowingTable(data);
}
}
);
}
//动态的创建一个table
function createShowingTable(data) {
var tableStr = "<table class=&#39;tab-list&#39; width=&#39;99%&#39;>";
tableStr = tableStr
  + "<tr class=&#39;list-header&#39;>"
  +"<td width=&#39;5%&#39;>序号</td>"
  +"<td width=&#39;5%&#39;><input id=&#39;checkAll&#39; name=&#39;checkAll&#39; type=&#39;checkbox&#39; /></td>"
  +"<td width=&#39;30%&#39;>用户姓名</td>"
  +"<td width=&#39;20%&#39;>工号</td>"
  +"<td width=&#39;20%&#39;>职位</td>"
  +"<td width=&#39;20%&#39;>创建时间</td>"
  +"</tr>";
var len = data.length;
for ( var i = 0; i < len; i++) {
 tableStr = tableStr + "<tr>"
   +"<td>"+ (i+1) + "</td>"
   +"<td><input class=&#39;check&#39; id=&#39;checkOne&#39; name=&#39;checkOne&#39; type=&#39;checkbox&#39; value=&#39;"+data[i].key+"&#39; /></td>"
   +"<td>"+ data[i].realName + "</td>"
   + "<td>"+ data[i].userNo + "</td>"
   + "<td>"+ data[i].position + "</td>"
   +"<td>"+data[i].regTime+"</td>"
   +"</tr>";
}
if(len==0){
 tableStr = tableStr + "<tr style=&#39;text-align: center&#39;>"
 +"<td colspan=&#39;6&#39;><font color=&#39;#cd0a0a&#39;>"+ 暂无记录 + "</font></td>"
 +"</tr>";
}
tableStr = tableStr + "</table>";
//添加到p中
$("#tableAjax").html(tableStr);
}
Copier après la connexion

Recommandations associées :

Exemple d'analyse de PHP générant dynamiquement des objets basés sur des noms de classes de chaînes

Génération dynamique de formulaires HTML Exemple de code de méthode asp.net

js génère dynamiquement des exemples HTML de caractères d'échappement qui déclenchent les paramètres d'événement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal