利用原生js写自动生成表单
2017-05-31 本文已影响0人
羞答答_aff1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td {
padding: 10px;
border-collapse: collapse;
}
</style>
</head>
<body>
行数:<input type="text" id="rows"><br>
列数:<input type="text" id="columns"><br>
宽度:<input type="text" id="width"><br>
边框:<input type="text" id="border"><br>
内容:<input type="text" id="center"><br>
<button onclick="makeTable()">生成表格</button><br>
<div id="table"></div>
<script>
function shengChengTable(rows,columns,width,border,center) {
if (rows == 0) {
rows = 5;
}
if (columns == 0) {
columns = 5;
}
if (width == 0) {
width = 500;
}
if (border == 0) {
border = 1;
}
if(center == 0){
center == 1;
}
var table = "<table border='"+border+"' width='"+width+"'>";
for (var i = 0; i < rows; i++) {
table += "<tr>";
for (var j = 0; j < columns; j++) {
table += "<td>"+center+"</td>"
}
table += "</tr>";
}
table += "</table>";
return table;
}
function makeTable() {
var center_value =(document.getElementById("center").value);
var rows_value = Number(document.getElementById("rows").value);
var columns_value = Number(document.getElementById("columns").value);
var width_value = Number(document.getElementById("width").value);
var border_value = Number(document.getElementById("border").value);
document.getElementById("table").innerHTML = shengChengTable(rows_value,columns_value,width_value,border_value,center_value);
}
</script>
</body>
</html>
