2017-09-13 12 views
0

screenshot 問題是,如果我選擇下拉菜單,它必須根據下拉菜單篩選數據,這需要模板和應用程序形式。但有一個問題,javascript.it沒有正常工作。無法過濾。 搞砸了JavaScript和PHP。我無法找到問題。下面是php代碼和javascript。 的JavaScript使用數據庫中的子頁面下拉篩選

$(document).ready(function() { 

    function addRemoveClass(theRows) { 

     theRows.removeClass("odd even"); 
     theRows.filter(":odd").addClass("odd"); 
     theRows.filter(":even").addClass("even"); 
    } 

    var rows = $("table#myTable tr:not(:first-child)"); 

    addRemoveClass(rows); 


    $("#selectField").on("change", function() { 

     var selected = this.value; 

     if (selected != "All") { 

      rows.filter("[position=" + selected + "]").show(); 
      rows.not("[position=" + selected + "]").hide(); 
      var visibleRows = rows.filter("[position=" + selected + "]"); 
      addRemoveClass(visibleRows); 
     } else { 

      rows.show(); 
      addRemoveClass(rows); 

     } 

HTML & PHP

 <select id="selectField"> 
       <option value="All" selected>All</option> 
       <option value="Special">Special Needs Template</option> 
       <option value="Application">Application Form</option> 


      </select> 
<table width="95%" border="0" cellpadding="5" cellspacing="0" id="myTable" class="table_fullwidth"> 
<tr><th width="15.8%">Application</th><th width="6%">Sequence</th><th width="22%">Group</th> 
<th width="18%">Field</th><th width="20%">Description</th><th width="7%">Align</th><th width="6%">Allow Null</th><th width="6%">Edit</th> 
</tr> 





<div id ="table-filter"> 

<?php $i=1; 
while ($myrow1 = DB_fetch_array($result)) { 
if ($i % 2==0) $bkg='td1'; else $bkg='td2'; 
?> 


<tr position="Special" id="trow_<?php echo $i;?>" class="<?php echo $bkg;?> "> 
<td align="center"><input type="hidden" name="cur_id_<?php echo $i;?>" id="cur_id_<?php echo $i;?>" value="<?php echo $myrow1['id'];?>"> 



<input tabindex="<?php echo $i;?>_2" class="sel_long1 required" type="text" name="field1<?php echo $i;?>" id="field1_<?php echo $i;?>" value="<?php echo $myrow1['appd'] ;?>" readonly> </td> 




<td align="center" ><input class="sel_long1 required" type="text" value="<?php echo $myrow1['sequence']; ?>" name="field2<?php echo $i; ?>" id="field2_<?php echo $i; ?>" ></td> 




<td align="center" ><?php 

$sql1 = "SELECT id, descr, lang FROM enr_applicationgroup1 WHERE lang =".$_SESSION['lang']." order by seq"; 
$result1= DB_query($sql1,$db); 
?> 
<select class="sel_long1 required" name="field3<?php echo $i; ?>" id="field3_<?php echo $i; ?>" > 
<?php 
while ($row1 = DB_fetch_array($result1)) {?> 
<option <?php if ($myrow1['groupid']==$row1['id']) {?> selected="selected" <?php } ?> value="<?php echo $row1['id'];?>" ><?php echo $row1['descr'];?><?php }?></option> 

</select></td> 


<td align="center"><?php 

$sql1 = "select * from wiz_dbtags where lang=".$_SESSION['lang']." and hide=0 and dbaseid=2 and rtrim(ltrim(tablename)) in (".$tablename.") order by description asc"; 

$result1= DB_query($sql1,$db); 
?> 

<select class="sel_long1 required" name="field4<?php echo $i; ?>" id="field4_<?php echo $i; ?>" > 
<?php 
while ($row1 = DB_fetch_array($result1)) {?> 
<option <?php if ($myrow1['tagid']==$row1['id']) {?> selected="selected" <?php } ?> value="<?php echo $row1['id'].'_'.$row1['description'];?>" ><?php echo $row1['description'];?><?php }?></option> 

</select></td> 




<td align="center" width="17%"><input class="sel_long1 required" type="text" value="<?php echo $myrow1['description']; ?>" name="field5<?php echo $i; ?>" id="field5_<?php echo $i; ?>" ></td> 

<td align="center" > 
<select class="sel_long1 required" name="field6<?php echo $i; ?>" id="field6_<?php echo $i; ?>" > 
<option <?php if ($myrow1['align']==1) {?> selected="selected" <?php } ?> value="1" > Center</option> 
<option <?php if ($myrow1['align']==2) {?> selected="selected" <?php } ?> value="2" >Left</option> 
<option <?php if ($myrow1['align']==3) {?> selected="selected" <?php } ?> value="3" >Right</option> 

</select></td> 


<td align="center"><input <?php if ($myrow1['oraseq']==1) echo 'disabled'; if ($myrow1['allownull']==1)echo 'checked';?> type="checkbox" name="field7<?php echo $i; ?>" id="field7_<?php echo $i; ?>" > 
</td> 
<td align="center" width="8%"><input <?php if ($myrow1['allowedit']==1)echo 'checked';?> type="checkbox" name="field8<?php echo $i; ?>" id="field8_<?php echo $i; ?>" > 
</td> 




<td align="center"> <img src="<?php echo $site_path;?>images/del.png" width="20" class="cur" title="Delete" onclick="deleteitem('<?php echo $myrow1['id'];?>');"></td> 
</tr> 
<?php 
$i++; 

} 





$breakdown = $_POST['breakdown']+$num_rows; 
$j=$num_rows+1; 
+0

您的代碼是沒有幫助!顯示一些截圖以及展示你的期望和現在正在發生的事情! –

+0

@UmairShahYousafzai [請親切](https://stackoverflow.com/help/be-nice)。該代碼非常有用。讓我們不要嚇跑新用戶:-)我同意,截圖會很好。 –

+0

好的。我把屏幕截圖 – user8602072

回答

0

我不知道什麼是你的代碼錯誤,但在這裏我寫了一個明確的代碼,你將幾乎你在做什麼!現在繼續進行修改,以滿足您的需求! :P

注意:這是一種不同的方法!它不使用.filter()。你總是可以做簡單的方法。儘量不要讓事情變得複雜。始終考慮最簡單明瞭的解決方案!改爲使用.show().hide()

這就是:

\t $(document).ready(function() { 
 
\t \t $('select').on('change',function(){ 
 
\t \t \t if (this.value == "") { 
 
\t \t \t \t $('tr').show(); 
 
\t \t \t } 
 
\t \t \t if (this.value == "even") { 
 
\t \t \t \t $('tr').show(); 
 
\t \t \t \t $('tr:nth-child(even)').hide(); 
 
\t \t \t } 
 
\t \t \t if (this.value == "odd") { 
 
\t \t \t \t $('tr').show(); 
 
\t \t \t \t $('tr:nth-child(odd)').hide(); 
 
\t \t \t } 
 
\t \t \t if (this.value == "special") { 
 
\t \t \t \t $('tr').show(); 
 
\t \t \t \t $('tr.special').hide(); 
 
\t \t \t } 
 
\t \t }); 
 
\t });
table {margin-top:100px;border-collapse: collapse;} 
 
th,td {border: 1px solid gray;padding: 10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
HIDE : <select> 
 
\t <option value=""></option> 
 
\t <option value="even">Even</option> 
 
\t <option value="odd">Odd</option> 
 
\t <option value="special">Special</option> 
 
</select> 
 

 
<table> 
 
<tr> 
 
\t <th>ODD</th> 
 
\t <th>ODD</th> 
 
\t <th>ODD</th> 
 
</tr> 
 
<tr> 
 
\t <td>EVEN</td> 
 
\t <td>EVEN</td> 
 
\t <td>EVEN</td> 
 
</tr> 
 
<tr> 
 
\t <td>ODD</td> 
 
\t <td>ODD</td> 
 
\t <td>ODD</td> 
 
</tr> 
 
<tr> 
 
\t <td>EVEN</td> 
 
\t <td>EVEN</td> 
 
\t <td>EVEN</td> 
 
</tr> 
 
<tr> 
 
\t <td>ODD</td> 
 
\t <td>ODD</td> 
 
\t <td>ODD</td> 
 
</tr> 
 
<tr class="special"> 
 
\t <td>SPECIAL BUT STILL EVEN</td> 
 
\t <td>SPECIAL BUT STILL EVEN</td> 
 
\t <td>SPECIAL BUT STILL EVEN</td> 
 
</tr> 
 
<tr class="special"> 
 
\t <td>SPECIAL BUT STILL ODD</td> 
 
\t <td>SPECIAL BUT STILL ODD</td> 
 
\t <td>SPECIAL BUT STILL ODD</td> 
 
</tr> 
 
<tr class="special"> 
 
\t <td>SPECIAL BUT STILL EVEN</td> 
 
\t <td>SPECIAL BUT STILL EVEN</td> 
 
\t <td>SPECIAL BUT STILL EVEN</td> 
 
</tr> 
 
</table>

UPDATE:

那麼你需要類添加到屬於你的3你的不同的記錄與數據庫中使用它下拉列表的值爲(假設$result以數組格式保存數據庫中的數據)

<?php 
foreach ($result as $record) { 
    if ($record['type'] == "application") { $class = "application"; } 
    if ($record['type'] == "special") { $class = "special"; } 
    echo "<tr class='".$class."'></tr>"; 
} 
?> 

然後你就可以在JS做這樣的方式:

$('select').on('change',function(){ 
    if (this.value == "all") { 
     $('tr').show(); 
    } 
    if (this.value == "application") { 
     $('tr').hide(); 
     $('tr.application').show(); 
    } 
    if (this.value == "special") { 
     $('tr').hide(); 
     $('tr.special').show(); 
    } 
}); 
+0

謝謝,我明白了,但是如何根據數據庫值使用這種技術? – user8602072

+0

@ user8602072:請接受回答以解決這個問題,如果它幫助你。 –

+0

爲C:\ Program Files(x86)\ Apache2.2 \ htdocs \ hr \ setup \ datawizards_sub中的foreach()提供的參數無效。在114行php ..顯示此錯誤。 – user8602072