【问题标题】:How can I populate HTML table numbered rows based on whether they match row number?如何根据它们是否匹配行号来填充 HTML 表格编号的行?
【发布时间】:2012-10-24 13:40:05
【问题描述】:

所以,本周早些时候我询问了this question@newfurniturey 帮助了我,但现在我遇到了一个新问题:我希望能够将设备更多地放在那个范围内超过一个 U(因此,设备 db 表中的 usize 列) - 一些设备可以跨越半个机柜。另外,我希望能够将设备标记为位于机柜的前部或后部,但这应该很简单,我可以弄清楚。

这是仅适用于 1U 设备的工作代码(请参阅数据库设置的旧问题):

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
    function clickHandler(e)
    {
        var targetId, srcElement, targetElement;
        if (window.event) e = window.event; 
        srcElement = e.srcElement? e.srcElement: e.target;
        if (srcElement.className == "Outline")
        {
                targetId = srcElement.id + "d";
                targetElement = document.getElementById(targetId);

            if (targetElement.style.display == "none")
                {
                        targetElement.style.display = "";
                        srcElement.src = "images/minus.gif";
                    } 
            else
                {
                    targetElement.style.display = "none";
                    srcElement.src = "images/plus.gif";
                }
        }
    }
    document.onclick = clickHandler;
-->
</SCRIPT>
<noscript>You need Javascript enabled for this page to work correctly</noscript>
<?
function sql_conn()
{
    $username="root";
    $password="root";
    $database="racks";
    $server="localhost";

    @mysql_connect($server,$username,$password) or die("<h2 align=\"center\" class=\"red\">[<img src=\"images/critical.gif\" border=\"0\">] Unable to connect to $server [<img src=\"images/critical.gif\" border=\"0\">]</h2>");
    @mysql_select_db($database) or die("<h2 align=\"center\" class=\"red\">[<img src=\"images/critical.gif\" border=\"0\">] Unable to select $database as a database [<img src=\"images/critical.gif\" border=\"0\">]</h2>");
}

sql_conn();
$sql_datacenters="SELECT * FROM `datacenters`";
$result_datacenters=mysql_query($sql_datacenters);
$j=0;
echo "<table border='1' style='float:left;'>";
while ($datacenters_sqlrow=mysql_fetch_array($result_datacenters))
{
    echo "<tr><td>";
    echo "<h2 class='black' align='left'>";
    echo "<IMG SRC='images/plus.gif' ID='Out" . $j . "' CLASS='Outline' STYLE='cursor:hand;cursor:pointer'>"; // fancy icon for expanding-collapsing section
    echo " " . $datacenters_sqlrow['rack'] . ": " . $datacenters_sqlrow['cagenum'] . "</h2>"; // datacenter name and cage number
    echo "<div id=\"Out" . $j . "d\" style=\"display:none\">"; // opening of div box for section that is to be expanded-collapsed
    echo $datacenters_sqlrow['notes'] . "<br /><br />"; // datacenter notes
    $sql_cabinets="SELECT * FROM `cabinets` WHERE `datacenter` = '$datacenters_sqlrow[0]' ORDER BY `cabinetnumber` ASC";
    $result_cabinets=mysql_query($sql_cabinets);
    while ($cabinets_sqlrow=mysql_fetch_array($result_cabinets))
    {
        $sql_devices="SELECT * FROM `devices` WHERE `datacenter` = '$datacenters_sqlrow[0]' AND `cabinet` = '$cabinets_sqlrow[1]' ORDER BY `ustartlocation` ASC";
        $result_devices=mysql_query($sql_devices);
        echo "<table border='1' style='float:left;'>"; // opening of table for all cabinets in datacenter
        echo "<tr><td colspan='2' align='middle'>" . $cabinets_sqlrow[1] . "</td></tr>"; // cabinet number, spans U column and device name column
        $devices = array();
        while($row = mysql_fetch_array($result_devices)) {
            $devices[$row['ustartlocation']] = $row['devicename'];
        }
        for ($i = 0; $i < $cabinets_sqlrow[2]; $i++) // iterates through number of U in cabinet     
        {   
            $u = $cabinets_sqlrow[2] - $i; // subtracts current $i value from number of U in cabinet since cabinets start their numbers from the bottom up
            echo "<tr>";
            echo "<td width='15px' align='right'>$u</td>"; // U number
            echo (isset($devices[$u]) ? "<td width='150px' align='middle'>$devices[$u]</td>" : "<td width='150px' align='middle'>empty</td>");
            echo "</tr>";
        }
        echo "</table>"; // closes table opened earlier
    }
    echo "</td></tr>";
    echo "</div>"; // close for div box that needs expanding-collapsing by fancy java
    $j++; // iteration for the fancy java expand-collapse
}
echo "</table>";
mysql_close();
?>

【问题讨论】:

    标签: php html mysql sysadmin


    【解决方案1】:

    根据您之前的问题,每个ustartlocation 都是唯一的(因此您可以将它用作$devices 数组中的索引)。使用相同的概念,您可以将$devices 数组从“ustartlocation”填充到(ustartlocation + (usize - 1))

    $devices = array();
    while($row = mysql_fetch_array($result_devices)) {
        $endLocation = ($row['ustartlocation'] + ($row['usize'] - 1));
        for ($location = $row['ustartlocation']; $location <= $endLocation; $location++) {
            $devices[$location] = $row['devicename'];
        }
    }
    

    因为您的显示循环已经遍历每个U 并显示分配的设备,所以您不需要修改任何其他部分。但是,需要注意的是,设备名称将 重复 为每个 U 而不是 span 它。为了跨越它,我们需要做更多的工作。

    首先,我们可以将usize 存储在$devices 数组中,而不是填充每个单独的位置。此外,为了防止以后进行大量额外的工作/计算,我们还将为每个额外的位置存储一个“占位符”设备。

    while($row = mysql_fetch_array($result_devices)) {
        // get the "top" location for the current device
        $topLocation = ($row['ustartlocation'] + $row['usize'] - 1);
    
        // populate the real position
        $devices[$topLocation] = $row;
    
        // generate a list of "placeholder" positions
        for ($location = ($topLocation - 1); $location >= $row['ustartlocation']; $location--) {
            $devices[$location] = 'placeholder';
        }
    }
    

    接下来,在您的显示循环中,您将检查当前位置是否为占位符(如果是,则仅显示 U 并对设备不执行任何操作;如果不是,则显示设备,或“空”)。为了实现每个设备的“跨度”效果,我们将单元格的rowspan 设置为等于设备的usize。如果是1,则为单个单元格; 2,它将跨越 2 行等(这就是为什么占位符行上的设备“什么都不做”会起作用):

    for ($i = 0; $i < $cabinets_sqlrow[2]; $i++) {   
        $u = $cabinets_sqlrow[2] - $i;
        echo "<tr>";
        echo '<td width="15px" align="right">' . $u . '</td>';
        if (isset($devices[$u])) {
            // we have a "device" here; if it's a "placeholder", do nothing!
            if ($devices[$u] != 'placeholder') {
                echo '<td width="150px" align="middle" rowspan="' . $devices[$u]['usize'] . '">' . $devices[$u]['devicename'] . '</td>';
            }
        } else {
            echo '<td width="150px" align="middle">empty</td>';
        }
        echo "</tr>";
    }
    

    因此,可以看出 - 上面的 first 方法简单地为它所跨越的每个 U 重复设备要简单得多。但是,第二种方法将呈现更加用户友好的显示。您希望使用哪种方法以及您认为哪种方法将来更易于维护,这是您的偏好。

    更新(代码修复和多方向跨越)
    我没有意识到您的表格是按降序构建的,所以我将ustartlocation 作为“顶部位置”,这会导致错误的行/单元格移位。我已经修复了上面的代码,以便根据 ustartlocationusize 为将解决该问题的每个设备正确设置“顶部位置”。

    或者,由于方向可能很重要,也可能不重要,我自定义了$devices-populating 循环(如下),以支持创建一个完全向上或向下的行跨度取决于您指定的标志。您需要更改的唯一代码(如果您已经从上面自定义了显示循环)将是填充 $deviceswhile 循环:

    $spanDevicesUpwards = true;
    while($row = mysql_fetch_array($result_devices)) {
        if ($row['usize'] == 1) {
            $devices[$row['ustartlocation']] = $row;
        } else {
            $topLocation = ($spanDevicesUpwards ? ($row['ustartlocation'] + $row['usize'] - 1) : $row['ustartlocation']);
            $bottomLocation = ($spanDevicesUpwards ? $row['ustartlocation'] : ($row['ustartlocation'] - $row['usize'] + 1));
    
            $devices[$topLocation] = $row;
            for ($location = ($topLocation - 1); $location >= $bottomLocation; $location--) {
                $devices[$location] = 'placeholder';
            }
        }
    }
    

    如果usize 的跨度大于 1,则此新代码块将确定当前设备的“顶部单元格”和“底部单元格”。如果您正在跨越向上,则顶部单元格为ustartlocation + usize - 1;如果您是向下,它只是ustartlocation。底部位置也是这样确定的。

    【讨论】:

    • 我实施了您在相关部分中建议的后一种更改(因为这是我的目标 - 让设备跨越 html 中的行,而不是简单地复制它覆盖的多个单元格);但是,似乎有些事情不正常 - 跨区服务器之前的单元格出现在跨区服务器旁边(参见此处:imgur.com/vg75g)。想法?
    • @eclipsed450 我已经调查过了,发现了问题;我更新了代码的错误部分(在生成$deviceswhile-loop 中)。另外,我添加了一个新的代码块,允许您自定义“设备”跨越表格的方向(向上或向下)。
    【解决方案2】:

    希望这对您有用........对于前置/后置,您可以将设备命名为 SERVER3/front 或 SERVER3/rear:

    <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
        <!--
            function clickHandler(e)
            {
                var targetId, srcElement, targetElement;
                if (window.event) e = window.event; 
                srcElement = e.srcElement? e.srcElement: e.target;
                if (srcElement.className == "Outline")
                {
                        targetId = srcElement.id + "d";
                        targetElement = document.getElementById(targetId);
    
                    if (targetElement.style.display == "none")
                        {
                                targetElement.style.display = "";
                                srcElement.src = "images/minus.gif";
                            } 
                    else
                        {
                            targetElement.style.display = "none";
                            srcElement.src = "images/plus.gif";
                        }
                }
            }
            document.onclick = clickHandler;
        -->
        </SCRIPT>
        <noscript>You need Javascript enabled for this page to work correctly</noscript>
        <?
        function sql_conn()
        {
            $username="root";
            $password="root";
            $database="racks";
            $server="localhost";
    
            @mysql_connect($server,$username,$password) or die("<h2 align=\"center\" class=\"red\">[<img src=\"images/critical.gif\" border=\"0\">] Unable to connect to $server [<img src=\"images/critical.gif\" border=\"0\">]</h2>");
            @mysql_select_db($database) or die("<h2 align=\"center\" class=\"red\">[<img src=\"images/critical.gif\" border=\"0\">] Unable to select $database as a database [<img src=\"images/critical.gif\" border=\"0\">]</h2>");
        }
    
        sql_conn();
        $sql_datacenters="SELECT * FROM `datacenters`";
        $result_datacenters=mysql_query($sql_datacenters);
        $j=0;
        echo "<table border='1' style='float:left;'>";
        while ($datacenters_sqlrow=mysql_fetch_array($result_datacenters))
        {
            echo "<tr><td>";
            echo "<h2 class='black' align='left'>";
            echo "<IMG SRC='images/plus.gif' ID='Out" . $j . "' CLASS='Outline' STYLE='cursor:hand;cursor:pointer'>"; // fancy icon for expanding-collapsing section
            echo " " . $datacenters_sqlrow['rack'] . ": " . $datacenters_sqlrow['cagenum'] . "</h2>"; // datacenter name and cage number
            echo "<div id=\"Out" . $j . "d\" style=\"display:none\">"; // opening of div box for section that is to be expanded-collapsed
            echo $datacenters_sqlrow['notes'] . "<br /><br />"; // datacenter notes
            $sql_cabinets="SELECT * FROM `cabinets` WHERE `datacenter` = '$datacenters_sqlrow[0]' ORDER BY `cabinetnumber` ASC";
            $result_cabinets=mysql_query($sql_cabinets);
            while ($cabinets_sqlrow=mysql_fetch_array($result_cabinets))
            {
                $sql_devices="SELECT * FROM `devices` WHERE `datacenter` = '$datacenters_sqlrow[0]' AND `cabinet` = '$cabinets_sqlrow[1]' ORDER BY `ustartlocation` ASC";
                $result_devices=mysql_query($sql_devices);
                echo "<table border='1' style='float:left;'>"; // opening of table for all cabinets in datacenter
                echo "<tr><td colspan='2' align='middle'>" . $cabinets_sqlrow[1] . "</td></tr>"; // cabinet number, spans U column and device name column
                $devices = array();
                $devices_size=array();
                while($row = mysql_fetch_array($result_devices)) {
                    $devices[$row['ustartlocation']] = $row['devicename'];
                    //$devices_size[$row['ustartlocation']+$row['usize']-1] = $row['usize'];
                      $devices_size[$row['ustartlocation']] = $row['usize']; 
                }
                $start="";
                $new="";
                for ($i = 0; $i < $cabinets_sqlrow[2]; $i++) // iterates through number of U in cabinet     
                {   
                    $u = $cabinets_sqlrow[2] - $i; // subtracts current $i value from number of U in cabinet since cabinets start their numbers from the bottom up
    
    
                    echo "<tr>";
                    echo "<td width='15px' align='right'>$u</td>"; // U number
    
                    $rowspan=$devices_size[$u];
    
                    //$rowspan1=$
                    if($rowspan>1)
                    {
                          $start=$u;   
                          $new=$u-$rowspan+1;
                    echo (isset($devices[$u]) ? "<td width='150px' align='middle' rowspan='".$rowspan."'>$devices[$u]</td>" : "<td width='150px' align='middle' rowspan='".$rowspan."'>$devices[$new]</td>");
    
    
                    }
                    else{
                       if($u<=$start && $u>=$new)
                       {
    
                       }
                       else
                       {
    
                    echo (isset($devices[$u]) ? "<td width='150px' align='middle' >$devices[$u]</td>" : "<td width='150px' align='middle'>empty".$row."".$u."</td>");
                    }
    
                    }
    
    
                    echo "</tr>";
                }
                echo "</table>"; // closes table opened earlier
            }
            echo "</td></tr>";
            echo "</div>"; // close for div box that needs expanding-collapsing by fancy java
            $j++; // iteration for the fancy java expand-collapse
        }
        echo "</table>";
        mysql_close();
        ?>
    

    【讨论】:

    • 误报 - 它有效,除了跨越向上,而不是向下。我的方法是它会向下跨越,但如果这不可能,那也没关系。
    • 非常感谢您的帮助!
    猜你喜欢
    • 1970-01-01
    • 2021-06-13
    • 2021-08-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-30
    • 1970-01-01
    相关资源
    最近更新 更多