如何在sql生成的表中隐藏列?(php+jquery）

How to hide a column in sql generated table? (php+jquery)

本文关键字：隐藏 php+jquery sql      更新时间：2023-09-26

查看了各种解决方案，但无法解决。到目前为止，我已经实现的内容，只有第一行被隐藏，而列的 id 始终保持不变。你能告诉我需要改变什么吗？

JAVASCRIPT： 

<script>
$(document).on("pagecreate","#pageone",function(){
  $("button").click(function(){
    var theID = $(this).attr('id');  
    $("#"+theID).slideToggle("slow");
    $("table, tr,th#"+theID).slideToggle("slow");
    $("table, tr,td#"+theID).slideToggle("slow");
  });
/*  
  $("button").click(function(){
    var theID = $(this).attr('id');  
    $("#"+theID).slideDown("slow");
    $("td.#"+theID).slideDown("slow");
  });
  */
});
</script>

表查询

$query = "select * from $table_select";
$result = mysql_query($query);
echo "<table id = 'table-1'>";
$num_columns = mysql_num_fields($result);
echo "<tr>";
for ($i = 0; $i < $num_columns; $i++) 
    {
        echo "<th id='".$i."'>";
        $meta = mysql_field_name($result, $i);
        if($i == 0) {
            $arg1 = $meta;
        }
        $field_name[] = $meta;
        echo "$meta</th>";
    }
$k = 0;
while($table = mysql_fetch_array($result)) {
    $v[] = $table[0];
    echo "<tr class = 'hid_tr'>";
    for ($i = 0; $i < $num_columns; $i++) {
        echo "<td id='".$field_name[$i]."'>{$table[$i]}</td>";
        if($i == $num_columns-1) {
            echo '<td><form action="'.$_SERVER['PHP_SELF'].'" method="post"> <input type="hidden" id="quoteid" name="quoteid" value='.$v[$k].' /><input type="hidden" id="db" name="db" value='.$db_select.' /> <input type="hidden" id="table" name="t" value='.$table_select.' /> <input type="hidden" id="field" name="field" value='.$arg1.' /> <input type="submit" name="formDelete" id"formDelete" value="" style="background-color:#f00;color:#fff;"/></form></td>';
        }
    }
    echo "</tr>";
    $k += 1; 
}
    echo '<tr>';
    for ($i = 0; $i < $num_columns; $i++) {
        //echo '<a href="" id="'.$field_name[$i].'">Slide up</a>';
        echo '<td><button id="'.$field_name[$i].'">Toggle '.$field_name[$i].'</button></td>';
    }
    echo '</tr>';
    /*
    echo '<tr>';
    for ($i = 0; $i < $num_columns; $i++) {
        //echo '<a href="" id="'.$field_name[$i].'">Slide Down</a>';
        echo '<td><button id="'.$field_name[$i].'">Slide down</button></td>';
    }
    echo '</tr>';
    */
echo "</table>";

切换按钮

echo '<tr>';
for ($i = 0; $i < $num_columns; $i++) {
    //echo '<a href="" id="'.$field_name[$i].'">Slide up</a>';
    echo '<td><button id="'.$field_name[$i].'">Toggle '.$field_name[$i].'</button></td>';
}
echo '</tr>';

谢谢！

如果您的意思是您希望在有人单击顶行第 3 个 td 中的按钮时隐藏所有行的第 3 个 td，那么您需要执行以下操作：

创建标头

echo '<tr>';
for ($i = 0; $i < $num_columns; $i++) {
    //The button calls a function with the proper position
    echo '<td id="hideableHeader' . $i . '"><button onclick="hide(' . $i . ');">Toggle '.$field_name[$i].' </button></td>';
}
echo '</tr>';

使用数据创建列

在这里，您为每个TD提供一个id，该id组合其行和列索引，如下所示：

'<td id="hideable_' . $rowNum . '_' . $colNum . '">datahere</td>';

并跟踪总行数。

隐藏（这是一个javascript函数）

function hide(colNum)
{
    //This is the header which will store its state for toggling
    var header = document.getElementById( "hideableHeader" + colNum );
    //Hide all of these tds starting after the first header row
    for ( var row = 0; row < totalRows; row++ )
    {
        for ( var col = 0; col < totalCols; col++ )
        {
            var column = document.getElementById( "hideable_" + row + "_" + col );
            //Is hidden, show it
            if ( header.isHidden === true ) column.style.visibility = "visible";
            //Hide it
            else column.style.visibility = "hidden";
        }
    }
}
相关文章：