<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> dynamically generate random background color table </title>
<style>
table{margin-top:20px;width:800px;border:1px solid #ddd; border-collapse:collapse;}
td{border:1px solid #ddd;p adding:10px 10px;}
</style>
<script>
Get page elements
Bind a Point click button
CREATE TABLE Table
TD Background with Random color
Old routines
Window.onload = function () {
Get page elements
var row = document.getElementsByTagName ("input") [0];
var line = document.getElementsByTagName ("input") [1];
var btn = document.getElementById (' btn ');
var tablelist = document.getElementById (' tablelist ');
Binding events
Btn.onclick = function () {
var _row = Row.value | | 0;
var _line = Line.value | | 0;
Cycle Increase TR
for (var i=0; i<_row; i++) {
var tr = Tablelist.insertrow (-1);
Loop Increase TD
for (var j=0; j<_line; J + +) {
var td = Tr.insertcell (j);
var bgColor = Rancolor ();
Td.style.backgroundColor = BgColor;
}
}
Random Color
function Rancolor () {
var str = ' 0123456789abcdef ';
var bgColor = ' # ';
for (Var i=0;i<6;i++) {
var idx = parseint (Math.random () *str.length);
BgColor + = Str[idx];
}
return bgColor;
}
}
}
</script>
<body>
<lable> Line </lable>
<input type= "Text"/>
<lable> Columns </lable>
<input type= "Text"/>
<button id= "BTN" > dynamically generate random background color table </button>
<table id= "Tablelist" ></table>
</body>
Dynamically generate random background color tables
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
