Home > Article > Web Front-end > How to output the 99 multiplication table using JavaScript

How to output the 99 multiplication table using JavaScript

PHP中文网Original: 2017-06-22 13:49:154166browse

The following editor will bring you a simple example of implementing the multiplication table in JavaScript. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

Everyone who has learned programming has written “HelloWorld”

But the 99 multiplication table, I think, should also become a must-have for every programming beginner. Programming

This is the implementation method of JavaScript, very suitable for beginners! ! !

The following is the code and comments

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

The following is some content involved in the above code

•f5d188ed2c074f8b944552db028f98a1The tag defines a table!

a34de1251f0d9fe1e645927f19a896e8 - Define table rows

b4d429308760b6c2d20d6300079ed38e - Define table header

b6c5a531a458a2e790c1fd6421739d1c - Define table elements (specific data of the table )

border=""Attribute can set the border of the table! The words in

b4d429308760b6c2d20d6300079ed38e are bold and centered by default!

bgcolor=""That is, I am familiar with setting the table background color!

•cellspacing="" and cellspadding="" are used to set the spacing between tables and the spacing between cells! But both tags were removed by HTML5 and replaced by border-collapse:separate | collapse | inherit.

separate	Default value. The borders will be separated. The border-spacing and empty-cells properties are not ignored.
collapse	If possible, the borders will be merged into a single border. The border-spacing and empty-cells properties are ignored.
inherit	Specifies that the value of the border-collapse attribute should be inherited from the parent element.

The above is the detailed content of How to output the 99 multiplication table using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript functionsNext article：Detailed explanation of JavaScript functions

See more

How to output the 99 multiplication table using JavaScript

Related articles