javascript - 如何隐藏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

如果您的意思是当有人单击顶行第三个 td 中的按钮时，您希望隐藏所有行的第三个 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";
        }
    }
}