JavaScript實現(xiàn)梯形乘法表的方法
更新時間：2015年04月25日 10:19:56 作者：#a
這篇文章主要介紹了JavaScript實現(xiàn)梯形乘法表的方法,涉及基本javascript結(jié)合表格操作的技巧,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)梯形乘法表的方法。分享給大家供大家參考。具體如下：
效果如下圖所示：
表格用html中的table,tr,td,然后利用for語句實現(xiàn)，循環(huán)輸出行和列，再根據(jù)行列的數(shù)量進行乘法運算，第一個for循環(huán)輸出9行，然后內(nèi)嵌一個for，在條件表達式中取第一個for循環(huán)的值然后進行輸出表格運算，為什么要取第一個for循環(huán)，因為第一個for循環(huán)的次數(shù)是梯形排列的規(guī)則，梯形排列的規(guī)則是第一行一個格子，第二行二個格子，第三行三個格子，以此類推。
完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript">
var str= "<table border=1 width=500 align=center>";
for(var a=1;a<=9;a++)
{
str +="<tr>";
for(b=1;b<=a;b++)
{
str +="<td>"+a+"×"+b+"="+a*b+"</td>";
}
str +="</tr>";
}
str +="</table>"
document.write(str);
</script>
</head>
<body>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
javascript打印html內(nèi)容功能的方法示例
這篇文章主要介紹了javascript打印html內(nèi)容的小示例，大家參考使用2013-11-11
這篇文章主要介紹了Flutter實現(xiàn)仿微信底部菜單欄,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了layui在表格中嵌入上傳按鈕并修改上傳進度條的實例,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了JS判斷不能為空實例代碼，有需要的朋友可以參考一下2013-11-11
JavaScript中各種二進制對象關(guān)系的深入講解
JavaScript中用于表示二進制對象有,Blob對象、和 ArrayBuffer 對象,這篇文章主要給大家介紹了關(guān)于JavaScript中各種二進制對象關(guān)系的相關(guān)資料,需要的朋友可以參考下2021-09-09
JavaScript實現(xiàn)讀取條碼中的二進制數(shù)據(jù)
條碼是一種以機器可讀的可視形式表示數(shù)據(jù)的方法,我們可以從條碼獲取二進制數(shù)據(jù),并通過不同方法去讀碼,下面我們就來看看如何實現(xiàn)讀取條碼中的二進制數(shù)據(jù)吧2024-03-03
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。本文給大家介紹Bootstrap 表格與按鈕功能，感興趣的朋友參考下吧2016-04-04
JS 組件系列之 bootstrap treegrid 組件封裝過程
最近產(chǎn)品需要設(shè)計一套相對完整的組織架構(gòu)的解決方案，由于組織架構(gòu)涉及到層級關(guān)系，在表格里面展示層級關(guān)系，自然就要用到所謂的treegrid。下面小編通過本文給大家分享JS 組件系列之 bootstrap treegrid 組件的封裝過程,需要的朋友可以參考下2017-04-04
JavaScript如何將偽數(shù)組轉(zhuǎn)換成數(shù)組?
這篇文章主要介紹了JavaScript如何將偽數(shù)組轉(zhuǎn)換成數(shù)組，?偽數(shù)組的主要特征是一個對象，并且該對象有l(wèi)ength屬性，更多參考內(nèi)容，需要的小伙伴可以參考一下2022-07-07
JavaScript實現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能示例
這篇文章主要介紹了JavaScript實現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能,涉及javascript日期與時間相關(guān)操作及運算操作技巧,需要的朋友可以參考下2017-02-02