benzhuo/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

## dabblet.html
<html>
<head>

<title>九九乘法表</title>

<style type="text/css">
table{
    width:600px;
    border-collapse:collapse;
	margin:5px;
    }
table th{
    border:#CC0000 1px solid
    }
div{ width:100%;height:70px; border:1px #bbb solid; margin:5px; padding-left:10px}
button{width:100px;height:25px; margin:5px;}
</style>
</head>
<body>
  <div>

  <button onclick="multiplication(9)">9x9</button>
  <button onclick="multiplication(19)">19x19</button>
  <button onclick="multiplication(99)">99x99</button>
  <button onclick="multiplication(99,3)">Divisble by 3</button>
  <button onclick="multiplication(99,7)">Divisble by 7</button>

   <br>
   <input type='text' size=5 id='x'> X <input type='text' size=5 id='y'> = <input type='text' size=8 id='res'>
   <button onclick="mutiple(9)">确认</button> <button onclick="find(99)">查找</button>
  </div>

  <div id="content" style="height:100%">
  </div>
<script type="text/javascript">
//用表格形式显示一个九九乘法表

 let lastrow;
 let content=document.getElementById("content");
 content.style.background="#fff";
 let HtmlStr="<table>";

function multiplication(rows,z)
{
	let lastrow=rows==0?lastrow:rows;
	for (let x = 1; x <= lastrow; x++)
	{
		HtmlStr+="<tr>";
		for (let y = 1; y <= x; y++)
		{
			let result=y*x
			let text=y+"x"+x+"="+result
			if(z && y*x%z==0)
			{
				HtmlStr+="<th style='background-color:pink'>"+text+"</th>";
			}
			else
			{
				let id='th_'+x+'_'+y
				HtmlStr+="<th id="+id+">"+text+"</th>";
			}
		}
		HtmlStr+"</tr>";
	}
	HtmlStr+="</table>"
	content.innerHTML=HtmlStr;
}

function mutiple(){
 let X=Number(document.getElementById('x').value)
 let Y=Number(document.getElementById('y').value)
 document.getElementById('res').value=X*Y
}
function find(rows){
for (let x = 1; x <= rows; x++)
	{
		for (let y = 1; y <= x; y++)
		{
			if((x*y)==Number(document.getElementById('res').value)){
				let cell=document.getElementById('th_'+x+'_'+y)
				cell.style='background-color:pink'
			}
		}
		HtmlStr+"</tr>";
	}
}
</script>
</body>
</html>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
	<html>
	<head>

	<title>九九乘法表</title>

	<style type="text/css">
	table{
	width:600px;
	border-collapse:collapse;
	margin:5px;
	}
	table th{
	border:#CC0000 1px solid
	}
	div{ width:100%;height:70px; border:1px #bbb solid; margin:5px; padding-left:10px}
	button{width:100px;height:25px; margin:5px;}
	</style>
	</head>
	<body>
	<div>

	<button onclick="multiplication(9)">9x9</button>
	<button onclick="multiplication(19)">19x19</button>
	<button onclick="multiplication(99)">99x99</button>
	<button onclick="multiplication(99,3)">Divisble by 3</button>
	<button onclick="multiplication(99,7)">Divisble by 7</button>

	<br>
	<input type='text' size=5 id='x'> X <input type='text' size=5 id='y'> = <input type='text' size=8 id='res'>
	<button onclick="mutiple(9)">确认</button> <button onclick="find(99)">查找</button>
	</div>

	<div id="content" style="height:100%">
	</div>
	<script type="text/javascript">
	//用表格形式显示一个九九乘法表

	let lastrow;
	let content=document.getElementById("content");
	content.style.background="#fff";
	let HtmlStr="<table>";

	function multiplication(rows,z)
	{
	let lastrow=rows==0?lastrow:rows;
	for (let x = 1; x <= lastrow; x++)
	{
	HtmlStr+="<tr>";
	for (let y = 1; y <= x; y++)
	{
	let result=y*x
	let text=y+"x"+x+"="+result
	if(z && y*x%z==0)
	{
	HtmlStr+="<th style='background-color:pink'>"+text+"</th>";
	}
	else
	{
	let id='th_'+x+'_'+y
	HtmlStr+="<th id="+id+">"+text+"</th>";
	}
	}
	HtmlStr+"</tr>";
	}
	HtmlStr+="</table>"
	content.innerHTML=HtmlStr;
	}

	function mutiple(){
	let X=Number(document.getElementById('x').value)
	let Y=Number(document.getElementById('y').value)
	document.getElementById('res').value=X*Y
	}
	function find(rows){
	for (let x = 1; x <= rows; x++)
	{
	for (let y = 1; y <= x; y++)
	{
	if((x*y)==Number(document.getElementById('res').value)){
	let cell=document.getElementById('th_'+x+'_'+y)
	cell.style='background-color:pink'
	}
	}
	HtmlStr+"</tr>";
	}
	}
	</script>
	</body>
	</html>