自動生成表格

時間 2019-11-13

標籤自動生成表格简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<title>createTable2.html</title>
<style type="text/css">
table{
border:#00ffff solid 2px;
border-collapse:collapse;
}
td{
border:#8080ff solid 2px;
padding:10px;
}
</style>
<script type="text/javascript">
   var tableNode;
   function createTable(){
       tableNode=document.createElement("table");//得到對象
   tableNode.setAttribute("id","table")
   var row=parseInt(document.getElementsByName("row1")[0].value);//得到行號
   //alert(row);
   if(row<=0 || isNaN(row) ){
       alert("輸入的行號錯誤，不能建立表格，請從新輸入：");
       return;
   }
       var cols=parseInt(document.getElementsByName("cols1")[0].value);
   if(isNaN(cols) || cols<=0){
       alert("輸入的列號錯誤，不能建立表格，請從新輸入：");
       return;
   }
   //上面肯定了如今開始建立
   for(var x=0;x<row;x++){
       var trNode=tableNode.insertRow();
       for(var y=0;y<cols;y++){
       var tdNode=trNode.insertCell();
       tdNode.innerHTML="單元格"+(x+1)+"-"+(y+1);
       }
   }
   document.getElementById("div1").appendChild(tableNode);//添加到那個位置
   }
/* function delRow(){
//要刪除行，必須獲得table對象才能刪除，因此在建立的時候必需要設置table對象的 id 方便操做
var tab=document.getElementById("table");//得到table對象
if(tab==null){
alert("刪除的表不存在！")
return;
}
var rows=parseInt(document.getElementsByName("delrow1")[0].value);//得到要刪除的對象
if(isNaN(rows)){
alert("輸入的行不正確。請輸入要刪除的行。。。");
return;
}
if (rows >= 1 && rows <= tab.rows.length) {
tab.deleteRow(rows-1);
}else{
alert("刪除的行不存在！！");
return ;
} <frameset rows="<form method="post" action="">

</form>," cols=",">
       <frame src="" name="">
       <frame src="" name="">
</frameset>

}
//刪除列要麻煩些，要經過行來進行刪除
// 一行的cells的長度就是列的個數
//tab.rows[x].deleteCell(cols-1)
function delCols(){
//得到table對象
var tab=document.getElementById("table");

if(tab==null){
alert("刪除的表不存在！！");
return ;
}
//得到文本框裏面的內容
var cols=parseInt(document.getElementsByName("delcols1")[0].value);
//檢查是否可靠
if(isNaN(cols)){
alert("輸入不正確。請輸入要輸出的列。。");
return;
} javascript

if(!(cols>=1 && cols<tab.rows[0].cells.length)){
alert("您要刪除的行不存在！！");
return;
}
for(var x=0;x<tab.rows.length;x++){//全部的行
tab.rows[x].deleteCell(cols-1);
}
} */

</script>
</head>

<body>
行:<input type="text" name="row1"/>
列:<input type="text" name="cols1"/>
<input type="button" value="建立表格" onclick="createTable()"/><br/>


<div id="div1"></div>
</body>
</html>
css

延伸：html

根據數據量，自動生成表格，並添加數據內容java

<div class="row"><div id="div1" class="col-md-12"> </div></div> app

//後臺數據爲post

List<ProPubOption> lst = proPubOptionService.getProPubOptionByType(proPubOptionType.getId());
modelAndView.addObject("proPubOptionLst", gson.toJson(lst));orm

//Js 腳本爲htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。