How to output the 99 multiplication table using JavaScript-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to output the 99 multiplication table using JavaScript

PHP中文网

Jun 22, 2017 pm 01:49 PM

javascriptjs

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

•

The tag defines a table!
- Define table rows

- Define table header

- Define table elements (specific data of the table )

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

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