2016-02-05 82 views
0

我需要比較codeigniter視圖頁面中的結果。我添加了獲取動態記錄的代碼。我使用複選框來獲取比較詳細信息的值。問題是,當我取消選中的數據不會被刪除,並且下一個數據在關閉該值時不會出現在前面。請告訴我一些建議來比較細節。與codeigniter中的jquery結果比較

請找到下面的代碼以獲取更多信息。

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" class="table mt10 revelx"> 
<thead> 
<tr> 
<th nowrap="" align="left">Sailing Date</th> 
<th width="18%" align="center"> <b>Inside</b> </th> 
<th width="18%" align="center"> <b>Oceanview</b> </th> 
<th width="18%" align="center"> <b>Balcony</b> </th> 
<th width="18%" align="center"> <b>Suite</b> </th> 
<th align="center">Compare</th> 
<th class="noborder">&nbsp;</th> 
</tr> 
</thead> 
<tbody> 
<tr class="per_month1234"> 
<td id="date_sort"> <a class="loder123" href="#"> 25th March 2016</a> </td> 
<td> <span>714.55USD</span> </td> 
<td> 
<div>796.36USD</div> 
</td> 
<td> 
<div>905.45USD</div> 
</td> 
<td> 
<div>969.09USD</div> 
</td> 
<td align="center"> <input type="checkbox" class="compare_checkbox" id="352905" value="352905" name=""> </td> 
<td align="center"> <a href="#"><input type="submit" class="button loder123" id="select_data352905" value="Select"></a> </td> 
</tr> 
<tr class="per_day1234" style="display: none;"> 
<td id="date_sort"> <a class="loder123" href="#"> 25th March 2016</a> </td> 
<td> <span>238.18USD<br>Per Day</span> </td> 
<td> 
<div>265.45USD<br>Per Day</div> 
</td> 
<td> 
<div>301.82USD<br>Per Day</div> 
</td> 
<td> 
<div>323.03USD<br>Per Day</div> 
</td> 
<td align="center"> <input type="checkbox" class="compare_checkbox" id="352905" value="352905" name=""> </td> 
<td align="center"> <a href="#"><input type="submit" class="button loder123" id="select_data352905" value="Select"></a> </td> 
</tr> 
<tr class="per_month1234"> 
<td id="date_sort"> <a class="loder123" href="#"> 1st April 2016</a> </td> 
<td> <span>605.45USD</span> </td> 
<td> 
<div>678.18USD</div> 
</td> 
<td> 
<div>769.09USD</div> 
</td> 
<td> 
<div>832.73USD</div> 
</td> 
<td align="center"> <input type="checkbox" class="compare_checkbox" id="352887" value="352887" name=""> </td> 
<td align="center"> <a href="#"><input type="submit" class="button loder123" id="select_data352887" value="Select"></a> </td> 
</tr> 
<tr class="per_day1234" style="display: none;"> 
<td id="date_sort"> <a class="loder123" href="#"> 1st April 2016</a> </td> 
<td> <span>201.82USD<br>Per Day</span> </td> 
<td> 
<div>226.06USD<br>Per Day</div> 
</td> 
<td> 
<div>256.36USD<br>Per Day</div> 
</td> 
<td> 
<div>277.58USD<br>Per Day</div> 
</td> 
<td align="center"> <input type="checkbox" class="compare_checkbox" id="352887" value="352887" name=""> </td> 
<td align="center"> <a href="#"><input type="submit" class="button loder123" id="select_data352887" value="Select"></a> </td> 
</tr> 
<tr class="per_month1234"> 
<td id="date_sort"> <a class="loder123" href="#"> 8th April 2016</a> </td> 
<td> <span>605.45USD</span> </td> 
<td> 
<div>678.18USD</div> 
</td> 
<td> 
<div>769.09USD</div> 
</td> 
<td> 
<div>832.73USD</div> 
</td> 
<td align="center"> <input type="checkbox" class="compare_checkbox" id="352894" value="352894" name=""> </td> 
<td align="center"> <a href="#"><input type="submit" class="button loder123" id="select_data352894" value="Select"></a> </td> 
</tr> 
<tr class="per_day1234" style="display: none;"> 
<td id="date_sort"> <a class="loder123" href="#"> 8th April 2016</a> </td> 
<td> <span>201.82USD<br>Per Day</span> </td> 
<td> 
<div>226.06USD<br>Per Day</div> 
</td> 
<td> 
<div>256.36USD<br>Per Day</div> 
</td> 
<td> 
<div>277.58USD<br>Per Day</div> 
</td> 
<td align="center"> <input type="checkbox" class="compare_checkbox" id="352894" value="352894" name=""> </td> 
<td align="center"> <a href="#"><input type="submit" class="button loder123" id="select_data352894" value="Select"></a> </td> 
</tr> 
<tr class="per_month1234"> 
<td id="date_sort"> <a class="loder123" href="#"> 15th April 2016</a> </td> 
<td> <span>605.45USD</span> </td> 
<td> 
<div>678.18USD</div> 
</td> 
<td> 
<div>769.09USD</div> 
</td> 
<td> 
<div>832.73USD</div> 
</td> 
<td align="center"> <input type="checkbox" class="compare_checkbox" id="352878" value="352878" name=""> </td> 
<td align="center"> <a href="#"><input type="submit" class="button loder123" id="select_data352878" value="Select"></a> </td> 
</tr> 
<tr class="per_day1234" style="display: none;"> 
<td id="date_sort"> <a class="loder123" href="#"> 15th April 2016</a> </td> 
<td> <span>201.82USD<br>Per Day</span> </td> 
<td> 
<div>226.06USD<br>Per Day</div> 
</td> 
<td> 
<div>256.36USD<br>Per Day</div> 
</td> 
<td> 
<div>277.58USD<br>Per Day</div> 
</td> 
<td align="center"> <input type="checkbox" class="compare_checkbox" id="352878" value="352878" name=""> </td> 
<td align="center"> <a href="#"><input type="submit" class="button loder123" id="select_data352878" value="Select"></a> </td> 
</tr> 
</tbody> 
<tbody class="max_id" id="max_id" style="display: none;"> </tbody> 
<tbody> </tbody> 
</table> 
</div> 
<div style="" class="relative_div red box"> 
<div class="bg_gray"> 
<div id="dmhd" class=""> 

<div id="data2" class="col-md-2"> </div> 
<div id="data3" class="col-md-2"> </div> 
<form method="POST" action="#"> 
<input type="hidden" id="value1" name="value1" value="352905"> <input type="hidden" id="value2" name="value2" value=""> <input type="hidden" id="value3" name="value3" value=""> 
<div class="col-md-2"> 
<input type="submit" class="button mt10 loder123" name="submit" value="Compare"> 
</div> 
</form> 
</div> 
</div> 
</div> 

,我添加了這樣的腳本

$('input[type="checkbox"]').click(function(){ 
if($(this).prop("checked") == true){ 
}else{ 
} 
var status = this.checked; 
var n = $("input:checkbox:checked").length; 
if(n >= 1){ 
$(".red").show(); 
}else{ 
$(".red").hide(); 
} 
if(n ==1){ 
var status_id = $(this).attr("id"); 

if(status_id !=""){ 
$.ajax({ 
url: "<?php echo base_url();?>search_categories/get_compare", 
type:'POST', 
data:{'status_id':status_id,'n':1} 
}).done(function(data) { 
$('#value1').val(status_id); 
$('#data1').html(data); 
}); 
$.ajax({ 
url: "<?php echo base_url();?>search_categories/get_compare_data", 
type:'POST', 
data:{'status_id':status_id } 
}).done(function(data) { 
$('.data1a').html(data); 
}); 
$("#data1").mouseover(function(){ 
$('.data1a').show(); 
$('.data2a').hide(); 
$('.data3a').hide(); 
}); 
} 
}else if(n ==2){ 
var status_id = $(this).attr("id"); 

if(status_id !=""){ 
$.ajax({ 
url: "<?php echo base_url();?>search_categories/get_compare", 
type:'POST', 
data:{'status_id':status_id,'n':2} 
}).done(function(data) { 


$('#value2').val(status_id); 
$('#data2').html(data); 
}); 
$.ajax({ 
url: "<?php echo base_url();?>search_categories/get_compare_data", 
type:'POST', 
data:{'status_id':status_id} 
}).done(function(data) { 



$('.data2a').html(data); 
}); 
$("#data2").mouseover(function(){ 
$('.data1a').hide(); 
$('.data2a').show(); 
$('.data3a').hide(); 
}); 
} 
}else if(n ==3){ 
var status_id = $(this).attr("id"); 

if(status_id !=""){ 
$.ajax({ 
url: "<?php echo base_url();?>search_categories/get_compare", 
type:'POST', 
data:{'status_id':status_id,'n':3} 
}).done(function(data) { 

$('#value3').val(status_id); 
$('#data3').html(data); 
}); 
$.ajax({ 
url: "<?php echo base_url();?>search_categories/get_compare_data", 
type:'POST', 
data:{'status_id':status_id} 
}).done(function(data) { 

$('.data3a').html(data); 

}); 
$("#data3").mouseover(function(){ 
$('.data1a').hide(); 
$('.data2a').hide(); 
$('.data3a').show(); 

}); 
} 
} 


}); 

回答

0

例如:

var day = document.getElementById('checkboxId'); 
if(day.checked == true){ // when checked 
    write your code here.. 
} 
if(day.checked == false){ 
    // reset all the value 
    write your code after unchecked 
}