Maison interface Web js tutoriel 基于PHP+Jquery制作的可编辑的表格的代码_jquery

基于PHP+Jquery制作的可编辑的表格的代码_jquery

May 16, 2016 pm 06:08 PM
可编辑 表格

table.php

复制代码 代码如下:

header("Content-Type:text/html;charset=utf-8");
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb");
if(mysqli_connect_errno){
echo "连接数据库失败".mysqli_connect_error();
exit;
}
?>


可编辑表格





$sql="select id,name,age,sex,email from users limit 0,20";
$result=$mysqli->query($sql);
echo "";
echo "";
echo "";
echo "";
echo "";
while($row=$result->fetch_assoc()){
echo '';
echo '';
echo '';
echo '';
echo '';
echo '';
echo '';
}
echo "
可编辑表格
编号 姓名 性别 年龄 邮箱
'.$row['id']''.$row['name']''.$row['age']''.$row['sex']''.$row['email']'
";
$mysqli->close();
?>



style.css
复制代码 代码如下:

@charset "utf-8";
/* CSS Document */
body{ font-size:12px; background:#EEE; text-align:center;}
table{ width:600px; border:1px solid #050; border-collapse:collapse;}
th,td{ border:1px solid #050; width:120px;}
th{ background:#282; color:white;}

table.js
复制代码 代码如下:

// JavaScript Document
$(function(){
$("tr:even").css("background-color","#ffff99");
$("tr td:not(.id)").click(function(){
if($(this).children('input').length > 0)
return;
//取出表格中原有的内容
var data=$(this).text();
//将内容设置为空
$(this).html('');
var td=$(this);
//创建一个表格
var inp=$('');
inp.val(data);
inp.css("background-color",$(this).css("background-color"));
inp.css("border-width","0px");
inp.css("width",$(this).css("width"));
//在表格中放一个input表单
inp.appendTo($(this));
//表单放入表格后触发焦点事件
inp.trigger('focus');
//全选内容
inp.trigger('select');
//添加键盘时间
inp.keydown(function(event){
switch(event.keyCode){
case 13:
td.html($(this).val());
//利用Ajax将数据传给服务器
//获取一行所有的列对象
var tds=td.parent("tr").children("td");
var i=tds.eq(0).text();
var n=tds.eq(1).text();
var a=tds.eq(2).text();
var s=tds.eq(3).text();
var e=tds.eq(4).text();
//var user={id:i,name:n,age:a,sex:s,email:e}
$.post("save.php",{id:i,name:n,age:a,sex:s,email:e},function(data){
alert(data);
});
break;
case 27:
td.html(data);
break;
}
}).blur(function(){
td.html($(this).val());
//利用Ajax将数据传给服务器
//获取一行所有的列对象
var tds=td.parent("tr").children("td");
var i=tds.eq(0).text();
var n=tds.eq(1).text();
var a=tds.eq(2).text();
var s=tds.eq(3).text();
var e=tds.eq(4).text();
//var user={id:i,name:n,age:a,sex:s,email:e}
$.post("save.php",{id:i,name:n,age:a,sex:s,email:e},function(data){
alert(data);
});
});
});
});

save.php
复制代码 代码如下:

header("Content-Type:text/html;charset=utf-8");
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb");
if(mysqli_connect_errno){
echo "连接数据库失败".mysqli_connect_error();
exit;
}
$sql="update users set name='{$_POST["name"]}',age='{$_POST["age"]}',sex='{$_POST["sex"]}',email='{$_POST["email"]}' where id='{$_POST["id"]}'";
$result=$mysqli->query($sql);
if($result){
echo "修改成功";
}else{
echo "保存失败";
}
$mysqli->close();
?>
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Étapes pour ajuster le format des images insérées dans les tableaux PPT Étapes pour ajuster le format des images insérées dans les tableaux PPT Mar 26, 2024 pm 04:16 PM

1. Créez un nouveau fichier PPT et nommez-le [Conseils PPT] à titre d'exemple. 2. Double-cliquez sur [Conseils PPT] pour ouvrir le fichier PPT. 3. Insérez un tableau avec deux lignes et deux colonnes à titre d'exemple. 4. Double-cliquez sur la bordure du tableau et l'option [Conception] apparaîtra dans la barre d'outils supérieure. 5. Cliquez sur l'option [Ombrage] et cliquez sur [Image]. 6. Cliquez sur [Image] pour faire apparaître la boîte de dialogue des options de remplissage avec l'image comme arrière-plan. 7. Recherchez le bac que vous souhaitez insérer dans le répertoire et cliquez sur OK pour insérer l'image. 8. Cliquez avec le bouton droit sur la zone de tableau pour afficher la boîte de dialogue des paramètres. 9. Cliquez sur [Formater les cellules] et cochez [Carreler les images en ombrage]. 10. Définissez [Centre], [Miroir] et les autres fonctions dont vous avez besoin, puis cliquez sur OK. Remarque : Par défaut, les images doivent être remplies dans le tableau.

Comment faire un tableau pour les prévisions de ventes Comment faire un tableau pour les prévisions de ventes Mar 20, 2024 pm 03:06 PM

Être capable de créer habilement des formulaires n'est pas seulement une compétence nécessaire pour la comptabilité, les ressources humaines et la finance, mais est également très importante pour de nombreux vendeurs. Parce que les données liées aux ventes sont très volumineuses et complexes, et qu’elles ne peuvent pas être simplement enregistrées dans un document pour expliquer le problème. Afin de permettre à davantage de vendeurs de maîtriser l'utilisation d'Excel pour créer des tableaux, l'éditeur présentera les numéros de création de tableaux sur les prévisions de ventes. Les amis dans le besoin ne devraient pas le manquer ! 1. Ouvrez [Sales Forecast and Target Setting], xlsm, pour analyser les données stockées dans chaque table. 2. Créez une nouvelle [Feuille de travail vierge], sélectionnez [Cellule] et saisissez les [Informations sur l'étiquette]. [Faites glisser] vers le bas et [remplissez] le mois. Saisissez les données [Autres] et cliquez sur [

Comment utiliser JavaScript pour réaliser la fonction d'ajustement par glisser-déposer de la largeur des colonnes du tableau ? Comment utiliser JavaScript pour réaliser la fonction d'ajustement par glisser-déposer de la largeur des colonnes du tableau ? Oct 21, 2023 am 08:14 AM

Comment utiliser JavaScript pour réaliser la fonction d'ajustement par glisser-déposer de la largeur des colonnes du tableau ? Avec le développement de la technologie Web, de plus en plus de données sont affichées sur les pages Web sous forme de tableaux. Cependant, il arrive parfois que la largeur des colonnes du tableau ne puisse pas répondre à nos besoins et que le contenu puisse déborder ou que la largeur soit insuffisante. Afin de résoudre ce problème, nous pouvons utiliser JavaScript pour implémenter la fonction d'ajustement par glisser-déposer de la largeur des colonnes du tableau, afin que les utilisateurs puissent ajuster librement la largeur des colonnes en fonction de leurs besoins. Pour réaliser la fonction d'ajustement par glisser-déposer de la largeur des colonnes du tableau, les trois points principaux suivants sont requis :

Comment définir la valeur WPS pour changer automatiquement la couleur en fonction des conditions_Étapes pour définir la valeur du tableau WPS pour changer automatiquement la couleur en fonction des conditions Comment définir la valeur WPS pour changer automatiquement la couleur en fonction des conditions_Étapes pour définir la valeur du tableau WPS pour changer automatiquement la couleur en fonction des conditions Mar 27, 2024 pm 07:30 PM

1. Ouvrez la feuille de calcul et recherchez le bouton [Démarrer]-[Formatage conditionnel]. 2. Cliquez sur Sélection de colonne et sélectionnez la colonne à laquelle la mise en forme conditionnelle sera ajoutée. 3. Cliquez sur le bouton [Formatage conditionnel] pour afficher le menu d'options. 4. Sélectionnez [Mettre en surbrillance les règles conditionnelles]-[Entre]. 5. Remplissez les règles : 20, 24, texte vert foncé avec une couleur de remplissage sombre. 6. Après confirmation, les données de la colonne sélectionnée seront colorées avec les chiffres, le texte et les zones de cellules correspondants en fonction des paramètres. 7. Des règles conditionnelles sans conflits peuvent être ajoutées à plusieurs reprises, mais pour les règles conflictuelles, WPS remplacera les règles conditionnelles précédemment établies par la dernière règle ajoutée. 8. Ajoutez à plusieurs reprises les colonnes de cellules après les règles [Entre] 20 à 24 et [Moins de] 20. 9. Si vous devez modifier les règles, vous pouvez simplement les effacer, puis les réinitialiser.

Que dois-je faire si le formulaire ne peut pas être imprimé en dehors de la ligne pointillée ? Que dois-je faire si le formulaire ne peut pas être imprimé en dehors de la ligne pointillée ? Mar 28, 2023 am 11:38 AM

Solution au problème selon lequel le tableau ne peut pas être imprimé en dehors de la ligne pointillée : 1. Ouvrez le fichier Excel et cliquez sur « Imprimer » sur la page ouverte. 2. Recherchez « Pas de zoom » sur la page d'aperçu et sélectionnez pour ajuster sur une page ; 3. Sélectionnez l'imprimante à imprimer. La documentation suffit.

Comment exporter et importer des données de table dans Vue Comment exporter et importer des données de table dans Vue Oct 15, 2023 am 08:30 AM

Comment implémenter l'exportation et l'importation de données tabulaires dans Vue nécessite des exemples de code spécifiques. Dans les projets Web développés avec Vue, nous rencontrons souvent le besoin d'exporter des données tabulaires vers Excel ou d'importer des fichiers Excel. Cet article expliquera comment utiliser Vue pour implémenter les fonctions d'exportation et d'importation de données de table et fournira des exemples de code spécifiques. 1. Dépendances d'installation pour l'exportation des données du tableau Tout d'abord, nous devons installer certaines dépendances pour l'exportation de fichiers Excel. Exécutez la commande suivante depuis la ligne de commande dans votre projet Vue : npmin

Comment utiliser Vue pour implémenter une table de données modifiable ? Comment utiliser Vue pour implémenter une table de données modifiable ? Jun 25, 2023 pm 06:20 PM

Avec le développement continu de la technologie frontale, les tableaux de données sont devenus l'un des outils importants pour la gestion d'entreprise et l'affichage des données. Dans le développement quotidien, il est parfois nécessaire de modifier ou d'ajouter des données dans le tableau de données. A ce stade, il est nécessaire d'implémenter un tableau de données modifiable. Cet article explique comment utiliser Vue pour implémenter des tables de données modifiables. 1. Idées d'implémentation Lors de l'implémentation de la fonction de tableau de données modifiable, nous devons prendre en compte les points suivants : Présentation des données : Restituez les données dans le tableau pour l'affichage et l'édition. Modification du tableau : modifiez les données du tableau.

Savez-vous comment résumer un tableau Word ? Savez-vous comment résumer un tableau Word ? Mar 21, 2024 pm 01:10 PM

Parfois, nous rencontrons souvent des problèmes de comptage dans les tableaux Word. Généralement, lorsqu'ils rencontrent de tels problèmes, la plupart des étudiants copient le tableau Word dans Excel pour le calcul ; certains étudiants prennent silencieusement la calculatrice. Existe-t-il un moyen rapide de le calculer ? Bien sûr, la somme peut également être calculée dans Word. Alors, savez-vous comment faire ? Aujourd’hui, jetons un coup d’œil ensemble ! Sans plus attendre, les amis dans le besoin devraient rapidement le récupérer ! Détails de l'étape : 1. Tout d'abord, nous ouvrons le logiciel Word sur l'ordinateur et ouvrons le document qui doit être traité. (Comme le montre l'image) 2. Ensuite, nous plaçons le curseur sur la cellule où se trouve la valeur additionnée (comme le montre l'image), puis nous cliquons sur [Barre de menu) ;

See all articles