使用單選按鈕和複選框過濾HTML表格

我不知道這是否甚至可能，儘管我確信它只是超出了我的能力。使用單選按鈕和複選框過濾HTML表格

我想過濾使用瀏覽器中的設置按鈕從SQL查詢生成的表格，例如，如果任務已完成或沒有複選框，以及時間範圍的單選按鈕（例如，最後24小時，至今爲止的一週日期範圍等）。所有這些都不經常刷新頁面。

有人能指引我正確的方向，我不是要求某人爲我做，但我是自學成才，需要一些指導。任何幫助讚賞。

這些過濾器我想用：

 <form id="filters"> 
      <input type="checkbox" id="live" name="filter_live" value="Live" /> <label for="live">Outstanding</label> 
      <input type="checkbox" id="completed" name="filter_completed" value="completed" /> <label for="completed">Complete</label> 
      | 
      <input type="radio" id="last24" name="filter_radio" checked="checked" onchange="return hide_range(this.checked);"/><label for="last24">Last 24hrs</label> 
      <input type="radio" id="WTD" name="filter_radio" onchange="return hide_range(this.checked);"/><label for="WTD">WTD</label> 
      <input type="radio" id="last_week" name="filter_radio" onchange="return hide_range(this.checked);"/><label for="last_week">Last Week</label> 
      <input type="radio" id="range" name="filter_radio" onchange="return show_range(this.checked);" /><label for="range">Range</label> 
       <div id="date_range" style="display: none;"> 
        <br /> 
      <label for="from">From: </label><input type="text" id="from" name="from"/> 
      <label for="to">To: </label><input type="text" id="to" name="to" /> 
      <input type="button" value="Go" /> 

       </div> 
     </form>

我想使用它們下面的表中：

<table class="general"> 
     <tr> 
      <th colspan='8'>Current Tasks</th> 
     </tr> 
      <tr> 
       <th>Created</th> 
       <th>Updated</th> 
       <th>Location</th> 
       <th>Task</th> 
       <th>Priority</th> 
       <th>Status</th> 
       <th>Completed</th> 
       <th>Action</th> 
      </tr> 
<?php 
    while($row = mysql_fetch_array($eng_result)) : ?> 

      <tr> 
<form action="Eng_update.php" method="post"> 

<td><?php if($row['Created'] == NULL){echo "";}else{ echo date("d/m/y", $row['created_ts']);} ?></td> 
<td><?php if($row['LastModified']==NULL){echo "";} else {echo date("d/m/y", $row['Last_Modified_ts']);} ?></td> 
<td><?php echo $row['Location'] ?><input type="hidden" name ="eng_loc[]" value="<?php echo $row['Location']; ?>" /></td> 
<td><?php echo $row['Task'] ?><input type="hidden" name="eng_task[]" value="<?php echo $row['Task']; ?>" /></td> 
<td><?php echo $row['Priority'] ?><input type="hidden" name="eng_priority[]" value="<?php echo $row['Priority']; ?>"</td> 
<td><?php echo $row['Status'] ?><input type="hidden" name="eng_status[]" value="<?php echo $row['Status']; ?>"</td> 
<td> 
    <?php if($row['Completed']==1){echo "yes";} else {echo "no";}?> 
    <input type="hidden" name="eng_task_complete[]" value="<?php echo $row['Completed'];?>" 
</td> 
    <td> 
     <input type="hidden" name="update_id[]" value="<?php echo $row['ID']; ?>" /> 
     <input type="submit" value="Update" onClick="return checkAction('Do you wish to update the status of this task?')"/> 

    </td> 
</form> 
      </tr> 
<?php endwhile; ?> 

    </table>

感謝您抽出時間來看看:)

來源

2012-12-18 xgstr

隨時隨地沒有刷新頁面，你必須看看AJAX或Javascript。 –

我會建議看看jQuery。您可以使用$（'＃id'）。on（'click'，..），$（'＃id'）。on（'changed'，..）和$'（'tr'）。（）和類似的東西：{$（this）.hide（）}）;或$'（'tr'）。each（function（）{$（this）.show（）}）; – Adder

有時候最好是提供一個簡化版本的代碼，例如：只需添加一個表，不需要添加您的PHP代碼，也不需要添加所有您期望的選項，但只需添加一個，您應該可以完成剩下的一次你會得到一個答案。 – Pablo

有一個名爲DataTables的jquery插件（如果你熟悉JQuery，這將是一件輕而易舉的事情）：http://datatables.net/

它有很多功能可以對數據進行排序/過濾，甚至可以動態加載數據（通過AJAX）。

我想你想這樣的功能：http://datatables.net/release-datatables/examples/api/multi_filter.html

編輯：日期範圍，創建一個自定義的排序功能，類似的問題在這裏得到解答：您希望將新信息添加到http://www.datatables.net/forums/discussion/7218/sort-column-by-numerical-range/p1

來源

2012-12-18 14:23:14 andrei

+1一個很好的建議 –

使用單選按鈕和複選框過濾HTML表格

回答

相關問題