JS顯示隱藏的table表
<!doctype html>
<html>
<head>
<title>車輛基本信息表</title>
<style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;}
html,body{width:100%;font-family:'Arial Normal', 'Arial'; font-size:14px;margin: 0;padding: 0; width:100%; height:100%;}
img{ vertical-align:top; border:none;}
.cl_title{ width:100%; height:46px; border-top:solid 1px #D5E4E9; background:#DEEAF9; line-height:46px; text-align:center; font-weight:bold; margin-bottom:20px;}
.cl_left{ width:16%; float:left;}
.cl_left>div{ height:130px; margin:0 0 10px 20px;}
.cl_right{width:84%; float:left;}
.cl_name{ width:100%;border-collapse: collapse; margin:0 auto; color:#7B7B7B; font-size:13px; font-weight:700; text-align:center;}
.cl_name tr td{ border:solid 1px #919191; width:21.333%; height:32px;}
.cl_name tr td:nth-of-type(odd){ background:#F3F3F3; width:12%;table-layout:fixed;}
.cl_size{width:95%; margin:0 auto; color:#000; line-height:18px; font-size:13px;}
.cl_size div:nth-of-type(1){ margin-top:10px;}
</style>
<script type="text/javascript">
var s=2;
function check(){
var x= document.getElementsByTagName("tr");
x[s].style.display="";
s++;
}
</script>
</head>
<body>
<table class="cl_name" cellpadding="1" cellspacing="1" dir="ltr" style="width: 100%;">
<caption class="cl_title" >項目工程進度</caption>
<tbody>
<tr>
<td>
<p>日期</p>
</td>
<td>工程名稱</td>
<td>建設規模</td>
<td>投資</td>
<td>甲方主管</td>
<td>計劃工期</td>
<td>工程進度</td>
<td>
<p>備註</p>
</td>
</tr>
<tr >
<td>
<p><input class="easyui-datebox" name="f_1276" type="text" /></p>
</td>
<td><input class="easyui-textbox" maxlength="255" name="f_1277" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1278" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1279" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1280" size="20" type="text" /></td>
<td><input class="easyui-datebox" id="f_1281" name="f_1281" type="text" /><input class="easyui-datebox" id="f_1282" name="f_1282" type="text" onclick="check()" /></td>
<td><select class="easyui-combobox" data-options="valueField:'id',textField:'text',url:'/rap/custom/getStruType?enumtypeId=107',editable:false" multiple="true" name="f_1283" style="width: 200px;"><option>請選擇自定義類型</option></select></td>
<td>
<p><input class="easyui-textbox" multiline="true" name="f_1284" size="1" style="width: 159px; height: 36px;" type="text" /></p>
</td>
</tr>
<tr style="display:none" >
<td>
<p><input class="easyui-datebox" name="f_1276" type="text" /></p>
</td>
<td><input class="easyui-textbox" maxlength="255" name="f_1277" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1278" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1279" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1280" size="20" type="text" /></td>
<td><input class="easyui-datebox" id="f_1281" name="f_1281" type="text" /><input class="easyui-datebox" id="f_1282" name="f_1282" type="text" onclick="check()" /></td>
<td><select class="easyui-combobox" data-options="valueField:'id',textField:'text',url:'/rap/custom/getStruType?enumtypeId=107',editable:false" multiple="true" name="f_1283" style="width: 200px;"><option>請選擇自定義類型</option></select></td>
<td>
<p><input class="easyui-textbox" multiline="true" name="f_1284" size="1" style="width: 159px; height: 36px;" type="text" /></p>
</td>
</tr>
<tr style="display:none" >
<td>
<p><input class="easyui-datebox" name="f_1276" type="text" /></p>
</td>
<td><input class="easyui-textbox" maxlength="255" name="f_1277" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1278" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1279" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1280" size="20" type="text" /></td>
<td><input class="easyui-datebox" id="f_1281" name="f_1281" type="text" /><input class="easyui-datebox" id="f_1282" name="f_1282" type="text" onclick="check()" /></td>
<td><select class="easyui-combobox" data-options="valueField:'id',textField:'text',url:'/rap/custom/getStruType?enumtypeId=107',editable:false" multiple="true" name="f_1283" style="width: 200px;"><option>請選擇自定義類型</option></select></td>
<td>
<p><input class="easyui-textbox" multiline="true" name="f_1284" size="1" style="width: 159px; height: 36px;" type="text" /></p>
</td>
</tr>
<tr style="display:none" >
<td>
<p><input class="easyui-datebox" name="f_1276" type="text" /></p>
</td>
<td><input class="easyui-textbox" maxlength="255" name="f_1277" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1278" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1279" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1280" size="20" type="text" /></td>
<td><input class="easyui-datebox" id="f_1281" name="f_1281" type="text" /><input class="easyui-datebox" id="f_1282" name="f_1282" type="text" onclick="check()" /></td>
<td><select class="easyui-combobox" data-options="valueField:'id',textField:'text',url:'/rap/custom/getStruType?enumtypeId=107',editable:false" multiple="true" name="f_1283" style="width: 200px;"><option>請選擇自定義類型</option></select></td>
<td>
<p><input class="easyui-textbox" multiline="true" name="f_1284" size="1" style="width: 159px; height: 36px;" type="text" /></p>
</td>
</tr>
<tr style="display:none" >
<td>
<p><input class="easyui-datebox" name="f_1276" type="text" /></p>
</td>
<td><input class="easyui-textbox" maxlength="255" name="f_1277" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1278" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1279" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1280" size="20" type="text" /></td>
<td><input class="easyui-datebox" id="f_1281" name="f_1281" type="text" /><input class="easyui-datebox" id="f_1282" name="f_1282" type="text" onclick="check()" /></td>
<td><select class="easyui-combobox" data-options="valueField:'id',textField:'text',url:'/rap/custom/getStruType?enumtypeId=107',editable:false" multiple="true" name="f_1283" style="width: 200px;"><option>請選擇自定義類型</option></select></td>
<td>
<p><input class="easyui-textbox" multiline="true" name="f_1284" size="1" style="width: 159px; height: 36px;" type="text" /></p>
</td>
</tr>
<tr style="display:none" >
<td>
<p><input class="easyui-datebox" name="f_1276" type="text" /></p>
</td>
<td><input class="easyui-textbox" maxlength="255" name="f_1277" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1278" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1279" size="20" type="text" /></td>
<td><input class="easyui-textbox" maxlength="255" name="f_1280" size="20" type="text" /></td>
<td><input class="easyui-datebox" id="f_1281" name="f_1281" type="text" /><input class="easyui-datebox" id="f_1282" name="f_1282" type="text" onclick="check()" /></td>
<td><select class="easyui-combobox" data-options="valueField:'id',textField:'text',url:'/rap/custom/getStruType?enumtypeId=107',editable:false" multiple="true" name="f_1283" style="width: 200px;"><option>請選擇自定義類型</option></select></td>
<td>
<p><input class="easyui-textbox" multiline="true" name="f_1284" size="1" style="width: 159px; height: 36px;" type="text" /></p>
</td>
</tr>
<tr>
<td colspan="8"><button onclick="check()" style="HEIGHT: 30px; WIDTH: 70px" value="增長一行">增長一行</button></td>
</tr>
</tbody>
</table>
</body>
</html>
首先style="display:none" 隱藏tr標籤，而後經過點擊添加一行來顯示資料javascript
相關文章
- 1. js隱藏和顯示table
- 2. JS前端 的隱藏顯示，點擊隱藏或者顯示
- 3. JS 顯示隱藏DIV
- 4. JS顯示和隱藏div
- 5. antd vue 自定義 table顯示隱藏
- 6. 隱藏顯示
- 7. 顯示隱藏
- 8. js控制的動畫，顯示隱藏（元素，動畫，顯示隱藏）
- 9. element el-table 表格列 v-if 顯示 隱藏 亂序問題
- 10. phpmyadmin 顯示被隱藏的表
- 更多相關文章...
- • Thymeleaf顯示Bean的值 - Thymeleaf 教程
- • ADO 顯示 - ADO 教程
- • SpringBoot中properties文件不能自動提示解決方法
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js隱藏和顯示table
- 2. JS前端 的隱藏顯示，點擊隱藏或者顯示
- 3. JS 顯示隱藏DIV
- 4. JS顯示和隱藏div
- 5. antd vue 自定義 table顯示隱藏
- 6. 隱藏顯示
- 7. 顯示隱藏
- 8. js控制的動畫，顯示隱藏（元素，動畫，顯示隱藏）
- 9. element el-table 表格列 v-if 顯示 隱藏 亂序問題
- 10. phpmyadmin 顯示被隱藏的表