Comment afficher la table de multiplication 99 en utilisant JavaScript-js tutoriel-php.cn

L'éditeur suivant vous présentera un exemple simple d'implémentation de la table de multiplication en JavaScript. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Tous ceux qui ont appris la programmation ont écrit « Hello World »

Mais la table de multiplication 99, je pense, devrait également devenir un incontournable pour tout débutant en programmation. . Programmation

C'est la méthode d'implémentation de JavaScript, très adaptée aux débutants ! ! !

Ce qui suit est le code et les commentaires

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript九九乘法表</title> 
 
<style type="text/css"> 
table{ 
  width:600px;     //表格height属性可设置可不设置,建议不设置
  border-collapse:separate;
  } 
table td{ 
  border:#000000 1px solid;
  text-align: center;  //使<td>标签中的内容居中显示，若是<th>标签，没有此行代码亦可自动居中
  } 
</style>

</head> 
<body> 
 
<script type="text/javascript"> 
//下面部分是核心代码
 
document.write("<table>");   //<table></table>添加一个表格样式来显示乘法表 
for (var x = 1; x <= 9; x++) 
{ 
  document.write("<tr>");   //<tr></tr>标签
  for (var y = 1; y <= x; y++)
  { 
    document.write("<td>"+y+"x"+x+"="+y*x+"</td>");//亦可用<th>标签来起到居中加粗内容的作用
  }                          
  document.write("</tr>"); 
} 
document.write("</table>");  
</script> 
 
</body> 
</html>

Copier après la connexion

Ce qui suit est un contenu impliqué dans le code ci-dessus

•La balise

définit un tableau !

- Définir les lignes du tableau

- Définir l'en-tête du tableau

table )

border=""L'attribut peut définir la bordure du tableau ! Les mots entre

sont en gras et centrés par défaut !

bgcolor=""Autrement dit, je suis habitué à définir la couleur d'arrière-plan du tableau !

•cellspacing="" et Cellspadding="" sont utilisés pour définir l'espacement entre les tableaux et l'espacement entre les cellules ! Mais les deux balises ont été supprimées par HTML5 et remplacées par border-collapse:separate Collapse |

separate	默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承border-collapse属性的值。

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：

javascript js

source：php.cn

Article précédent：Explication détaillée des fonctions JavaScript Article suivant：Structure de l'instruction JavaScript

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

Derniers articles par auteur