<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>动态创建表格实操</title> <style> #table,tr,td{ border: 1px #000000 solid; } /* tr,td{ width: 10px; height: 10px; } */ </style> </head> <body> 行:<input type="text" name="" id="row"> 列:<input type="text" name="" id="col"> <input type="submit" name="" id="submit" value="开始创建"> <table id="table"> <!-- <tr> <td></td> </tr> --> </table> <script src="public.js"></script> <script> var row = $id("row"), col = $id("col"), submit = $id("submit"), table = $id("table"); submit.onclick = function(){ var rVal = Number(row.value); var cVal = Number(col.value); for(i = 0 ; i < rVal ; i++){ var tr = document.createElement("tr"); table.appendChild(tr); for(j = 0 ; j <= cVal ; j++){ var td = document.createElement("td"); tr.appendChild(td); if(j != cVal ){ td.innerHTML = "磊子哥真帅!"; td.style.background = getColor(); }else{ var a = document.createElement("a"); a.href = "#"; td.appendChild(a); a.innerHTML = "购买"; a.onclick = function(){ table.removeChild(this.parentNode.parentNode) var flag = true; setTimeout(function(){ if(flag){ alert("恭喜您成功买入磊子大帅哥!") } },) } } } } } </script> </body> </html>
源码分享下载外链:
https://www.lanzous.com/b886162/
密码:7cm1
原文:https://www.cnblogs.com/g-code/p/11321120.html