css代码:
<div class="tnds">
<div style="text-align: left;float: left;">版本管理</div>
<div style="margin-top: -5px">
<!-- <label>系统类型:</label> -->
<span>
<select id = "" style="width: 150px;height: 36px;font-size: 25px;color: red" οnclick="">
<option value ="1" selected="selected" >安卓版本</option>
<option value ="2" >ios版本</option>
</select>
</span>
<span>
<input id="addbtn" type="button" class = "button" οnclick="addapk()" value="添加版本">
</span>
</div>
</div>
<table class="tab" >
<!-- 表头-->
<thead>
<tr align="center" >
<td style="width: 10%;font-size: 15px">ID</td>
<td style="width: 8%;font-size: 15px">版本类型</td>
<td style="width: 8%;font-size: 15px">版本号</td>
<td style="width: 20%;font-size: 15px">标识码</td>
<td style="width: 30%;font-size: 15px">下载链接</td>
<td style="width: 8%;font-size: 15px">更新状态</td>
<td style="width: 6%;font-size: 15px">上传时间</td>
<td style="width: 10%;font-size: 15px">操作</td>
</tr>
</thead>
<!--显示数据列表 -->
<tr id = "tr2" style="display: none">
<td>自动生成</td>
<td>
<select id = "systype1" style="width: 100px;height: 30px;font-size: 15px;color: red">
<option value ="1">安卓版本</option>
<option value ="2"> ios 版本</option>
</select>
</td>
<td><input type="text" id = "" style="height: 30px;width: 100px"></td>
<td><input type="text" id = "" style="height: 30px;width: 300px"></td>
<td><input type="text" id = "" style="height: 30px;width: 460px"></td>
<!-- <td><input type="text" id = "" style="height: 30px;width: 100px"></td> -->
<td>
<select id = "dfsdg" style="width: 100px;height: 30px;font-size: 15px;color: red">
<option value ="1">选择更新</option>
<option value ="0">强制更新</option>
</select>
</td>
<td>自动生成</td>
<td><input class="button1" type="button" id = "sgsge" value="提交版本" οnclick=""></td>
</tr>
<tbody id="TableData" style="color:black;font-size: 5px ">
</tbody>
</table>
js代码:
function addapk(){
var btn = document.getElementById('addbtn').value;
if(btn == '添加版本'){
// var display = document.getElementById('tr2').style.display;
document.getElementById('tr2').style.display = '';
document.getElementById('addbtn').value = '取消添加'
}else{
// var display = document.getElementById('tr2').style.display;
document.getElementById('tr2').style.display = 'none';
document.getElementById('addbtn').value = '添加版本'
}
}
也就是说增加一行tr标签,默认为tr的style中设置属性display:none,这一行tr就不会显示。
通过判断按钮的值来确定是否需要添加数据,从而来设置tr是否需要隐藏。
动态展示下类型数据(onclick传参):
function loadData(fefge,pageNo,pageSize){
$.ajax({
url:"/访问路径",
type:"post",
data:{参数1:参数1,参数2:参数2},
success:function(data){
var json = eval('('+data + ')');
console.log(data);
var html="";
// var reportlisthtml='';
var maojungang = json.data;
// var message = json.message;
var totalCount = json.total;
pages = Math.ceil(totalCount/pageSize);
// alert(message);
for(var i in maojungang){
html=html+"<tr>"+
"<td>"+maojungang[i].id+" </td>";
if(maojungang[i].sdf == 1){
html = html+"<td>安卓系统</td>";
}else if(maojungang[i].sdf == 2){
html = html+"<td>ios 系统</td>";
}
html = html+
"<td>"+maojungang[i].dfg+" </td>"+
"<td>"+maojungang[i].hdf+" </td>"+
"<td>"+maojungang[i].hdfhg+" </td>";
if(maojungang[i].gr== 0){
html = html+"<td>强制更新</td>";
}else if(maojungang[i].gr == 1){
html = html+"<td>选择更新</td>";
}
html = html+
"<td>"+maojungang[i].date+" </td>"+
"<td><input class='button2' type='button' value='删除' οnclick='delapk(\"" + maojungang[i].id + "\")' /></td>"+
"<tr/>";
}
$("#TableData").html(html);
var newText = "共" + totalCount + "条," + "第" + pageNo + "页," + "共" + pages + "页";
$("#summary").text(newText);
}
});
}
出于安全考虑,部分代码做过修改!