需要表格TD在选择值时折叠。
当我点击第一行的第三个值时，我想使用Jquery Ajax为其对应的值附加一个新行。
这里我使用的是jquery $（document）.ready（function（）{用于获取加载值。
当我点击第3页时，页面正在刷新，第2行的附加值被隐藏并且只获得默认页面。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page import="bean.TestCaseBean,dao.TestCaseDao,java.util.ArrayList,java.util.Iterator"%>
<%
TestCaseDao upd=new TestCaseDao();
// arl=new TestCaseBean();
// ArrayList<TestCaseBean> arl=upd.modulecount();
/* ArrayList<TestCaseBean> arl1=upd.moduleTDopen(); */
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<meta charset="UTF-8">
<title>BTG</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- style page -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/jquery.dataTables.min.css">
<script src="../jQuery/jQuery-2.2.0.min.js"></script>
<script src="../jQuery/jquery.dataTables.min.js"></script>
<script>
/*
Please consider that the JS part isn't production ready at all, I just code it to show the concept of merging filters and titles together !
*/
$(document).ready(function() {
$('.filterable .btn-filter').click(function() {
var $panel = $(this).parents('.filterable'),
$filters = $panel.find('.filters input'),
$tbody = $panel.find('.table tbody');
if ($filters.prop('disabled') == true) {
$filters.prop('disabled', false);
$filters.first().focus();
} else {
$filters.val('').prop('disabled', true);
$tbody.find('.no-result').remove();
$tbody.find('tr').show();
}
});
$('.filterable .filters input').keyup(function(e) {
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9') return;
/* Useful DOM data and selectors */
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
/* Dirtiest filter function ever ;) */
var $filteredRows = $rows.filter(function() {
var value = $(this).find('td').eq(column).text().toLowerCase();
return value.indexOf(inputContent) === -1;
});
/* Clean previous no-result if exist */
$table.find('tbody .no-result').remove();
/* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
$rows.show();
$filteredRows.hide();
/* Prepend no-result row if all rows are filtered */
if ($filteredRows.length === $rows.length) {
$table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="' + $table.find('.filters th').length + '">No result found</td></tr>'));
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnhome").click(function() {
location.href = "BTMHomePage.jsp";
});
$("#btnback").click(function() {
window.history.back();
});
$('#example').DataTable({
"dom": '<"top"i>rt<"bottom"flp><"clear">'
});
});
</script>
<style>
.filterable {
margin-top: 15px;
}
.filterable .panel-heading .pull-right {
margin-top: -20px;
}
.filterable .filters input[disabled] {
background-color: transparent;
border: none;
cursor: auto;
box-shadow: none;
padding: 0;
height: auto;
}
.body {
font-family: arial;
font-size: 11px;
line-height: 1.42857143;
color: #333;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
color: #333;
}
.filterable .filters input[disabled]::-moz-placeholder {
color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
color: #333;
}
.panel-primary>.panel-heading {
color: #fff;
background-color: #bbc3cb;
border-color: #bbc3cb;
}
.panel-title {
font-size: 12px;
}
.panel-heading {
padding: 8px;
}
.form-control {
font-size: 11px;
width: 80%;
height: 25px;
}
body {
font-size: 10px;
font-family: calibri;
}
.panel-primary {
border-color: rgba(18, 18, 19, 0.22);
}
.modal-footer {
text-align: center;
border-top: 0;
padding: 25px;
padding-right: 208px;
}
</style>
<!-- <script type="text/javascript">
$(document).ready(function(){
alert("hieeee");
$("#rowfirst").hide();
/* $('#desc01').append('<tr class="filters" id="desc01 tr"><td>' + "MODULE" +'</td> </tr>'); */
if($("#count1").attr('id')=="count1"){
alert($("#count1").attr('id'));
$("#count1").click(function(){
alert($(this).attr('id'));
$.ajax({
url : "moduleTDopen",
dataType : 'json',
//contentType : 'application/json',
type : 'POST',
async : true,
success : function(res) {
//alert("hiiiijj"+trList);
var b=JSON.parse(res.coremodule);
console.log(b);
$("#rowfirst").show();
//$(".cd tr").remove();
if(b.length=="0") {
$('#rowfirst').append('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td> No Data Found </td><td></td><td></td></tr>');
}
else{
for ( var i = 0; i < b.length; i++) {
alert("fds"+b[i].application);
//$('#desc01').append('<tr class="filters cd" ><td ><span class="glyphicon glyphicon-plus" onclick="return fnclick('+b[i].Glcode+');"> </span> </td> <td> '+b[i].Glcode+' </td> <td><a href="">'+b[i].Gldesc+'</a></td></tr>');
/* $('#rowfirst').append('<tr class="filters cd" ><td> '+b[i].count+' </td> </tr>'); */
$('#rowfirst').append('<tr class="filters cd" ><td></td> <td></td> <td> '+b[i].count+' </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>');
}
}
}
});
});
}
});
</script> -->
<script type="text/javascript">
/* function fnclick1(a){
alert(a);
$.ajax({
url : "moduleTDopen",
dataType : 'json',
//contentType : 'application/json',
type : 'POST',
async : true,
success : function(res) {
//alert("hiiiijj"+trList);
var b=JSON.parse(res.coremodule);
console.log(b);
var j=1;
for ( var i = 0; i < 3; i++) {
$('#data').append('<tr ><td>'+j+'</td><td>'+b[i].application+'</td> <td onclick="fnclick1('+j+');"><a href="">'+b[i].count+' </a></td> <td> '+b[i].count1+' </td> <td>'+b[i].count2+'</td> <td>'+b[i].count3+'</td> <td></td> <td></td> <td></td> </tr>');
alert("dsjh");
if(j==2){
for ( var i = 0; i < b.length; i++) {
$('#data').append('<tr><td></td> <td></td> <td> '+b[i].module+' </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>');
}
}
j++;
}
}
});
} */
$(document).ready(function() {
alert("hieeee");
alert($("#data > tbody > tr").length);
$('#data').append('<tr><td>1</td><td>APPLICATION</td> <td name="rows" id=1 onclick=fn1(26);><a href="">26 </a></td> <td> 156 </td> <td>3679</td> <td>3680</td> <td></td> <td></td> <td></td> </tr>');
$('#data').append('<tr><td>3</td><td>APPLICATION</td> <td name="rows" id=2 ><a href="">32 </a></td> <td> 256 </td> <td>4679</td> <td>4680</td> <td></td> <td></td> <td></td> </tr>');
/*
if($("#data > tbody > tr").length=="0"){
$.ajax({
url : "modulecount",
dataType : 'json',
//contentType : 'application/json',
type : 'POST',
async : true,
success : function(res) {
//alert("hiiiijj"+trList);
alert("ajax success");
var b=JSON.parse(res.modulecount);
console.log(b);
//$("#rowfirst").show();
var j = 1;
for ( var i = 0; i < b.length; i++) {
$('#data').append('<tr ><td>'+j+'</td><td>'+b[i].application+'</td> <td name="rows" id='+j+' onclick=fn1('+b[i].count+');><a href="">'+b[i].count+' </a></td> <td> '+b[i].count1+' </td> <td>'+b[i].count2+'</td> <td>'+b[i].count3+'</td> <td></td> <td></td> <td></td> </tr>');
j++;
}
}
});
//$("input[name ='rows']").click(function()
} */
/* $("input[name ='rows']").click(function(){
$('#data').append('<tr><td>3</td><td>APPLICATION2</td> <td name="rows" id=2 onclick=fn1(32);><a href="">32 </a></td> <td> 256 </td> <td>4679</td> <td>4680</td> <td></td> <td></td> <td></td> </tr>');
}); */
});
</script>
<script>
function fn1(a) {
alert("chk" + a);
$('#data').append('<tr><td>2</td><td>chk</td> <td name="rows" id=3 onclick=fn1(3);><a href="">3 </a></td> <td> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>');
return false;
}
</script>
<body>
<div class="container">
<div class="row">
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title" style="color:#1f1f21;"><b>SUMMARY OF TEST CASE</b></h3>
<div class="pull-right">
<button class="btn btn-default btn-xs btn-filter" style="margin-left: -5px;margin-bottom: -17px;"><span class="glyphicon glyphicon-filter"></span>Filter</button>
<label class=" col-sm-offset-3 control-label" style="color: #337ab7;">Function
<select class="form-horizontal" name="function" id="function">
<option value="O">SELECT</option>
<option value="AL">ALL</option>
<option value="AP">APPROVED</option>
<option value="DR">DROPPED</option>
<option value="DL">DELETED</option>
<option value="DC">DISCARDED</option>
<option value="NP">NOT APPLICABLE</option>
</select></label>
</div>
</div>
<table class="table table-hover" id="desc01">
<thead>
<tr class="filters">
<th><input type="text" class="form-control" placeholder="SRLNO" disabled></th>
<th><input type="text" class="form-control" placeholder="APPLICATION" disabled></th>
<th><input type="text" class="form-control" placeholder="MODULE" disabled></th>
<th><input type="text" class="form-control" placeholder="SUB-MODULE " disabled></th>
<th><input type="text" class="form-control" placeholder="BUSINESS SCENARIOS" disabled></th>
<th><input type="text" class="form-control" placeholder="OPERATION" disabled></th>
<th><input type="text" class="form-control" placeholder="NOS" disabled></th>
<th><input type="text" class="form-control" placeholder="STATUS" disabled></th>
<th>SELECT</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-xs btn-primary" id="btnhome">Home</button>
<button type="button" class="btn btn-xs btn-primary" value="back" id="btnback">Back</button>
</div>
</div>
</body>
</html>