Question

screenshot 问题是，如果我选择下拉列表，它必须根据下拉列表过滤数据，这需要模板和应用程序表单。但是javascript有问题。它没有用。无法过滤。搞砸了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＆amp; 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;

Answer 1

我不确定您的代码有什么问题，但在这里我为您编写了一个清晰的代码，它几乎可以完成您的工作！现在继续根据自己的需要进行相应的修改！：P

注意：这是一种不同的方法！它不使用.filter()。你总能做到这一点。试着通过涉及太多事情来使事情变得复杂。始终考虑最简单明了的解决方案！请改用.show()和.hide()。

这是：

	$(document).ready(function() {
		$('select').on('change',function(){
			if (this.value == "") {
				$('tr').show();
			}
			if (this.value == "even") {
				$('tr').show();
				$('tr:nth-child(even)').hide();
			}
			if (this.value == "odd") {
				$('tr').show();
				$('tr:nth-child(odd)').hide();
			}
			if (this.value == "special") {
				$('tr').show();
				$('tr.special').hide();
			}
		});
	});

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>
	<option value=""></option>
	<option value="even">Even</option>
	<option value="odd">Odd</option>
	<option value="special">Special</option>
</select>

<table>
<tr>
	<th>ODD</th>
	<th>ODD</th>
	<th>ODD</th>
</tr>
<tr>
	<td>EVEN</td>
	<td>EVEN</td>
	<td>EVEN</td>
</tr>
<tr>
	<td>ODD</td>
	<td>ODD</td>
	<td>ODD</td>
</tr>
<tr>
	<td>EVEN</td>
	<td>EVEN</td>
	<td>EVEN</td>
</tr>
<tr>
	<td>ODD</td>
	<td>ODD</td>
	<td>ODD</td>
</tr>
<tr class="special">
	<td>SPECIAL BUT STILL EVEN</td>
	<td>SPECIAL BUT STILL EVEN</td>
	<td>SPECIAL BUT STILL EVEN</td>
</tr>
<tr class="special">
	<td>SPECIAL BUT STILL ODD</td>
	<td>SPECIAL BUT STILL ODD</td>
	<td>SPECIAL BUT STILL ODD</td>
</tr>
<tr class="special">
	<td>SPECIAL BUT STILL EVEN</td>
	<td>SPECIAL BUT STILL EVEN</td>
	<td>SPECIAL BUT STILL EVEN</td>
</tr>
</table>

更新：

要将它与数据库一起使用，因此您需要将类添加到属于您的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();
    }
});

使用数据库中的子页面下拉过滤

1 个答案: