如何在sql生成的表中隱藏列？ （php + jquery）

Question

瀏覽了各種解決方案，但無法解決。 到目前為止，我已經實現了，只有第一行被隱藏了，而列的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>';

謝謝！

Answer 1

如果您的意思是當某人單擊第一行第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，將其行和列索引結合在一起，如下所示：

'<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";
        }
    }
}