使用PHP调用JS更改HTML表格单元格值

Posted 2023-02-25

技术标签:

【中文标题】使用PHP调用JS更改HTML表格单元格值【英文标题】：Using PHP to call JS to change HTML table cell values 【发布时间】：2017-12-03 09:26:51 【问题描述】：

我正在尝试使用我使用 php 提取的 SQL 数据库中的数据值来操作我的 html 表。

我尝试了很多不同的方法，但我认为最好的方法是我现在的方法，通过使用循环分配与该数组的矩阵值相对应的 ID 标签号。

（例如：11、12、13、21、22、23 等）

然后我调用一个 javascript 函数来查找具有该特定 ID 的元素，并将该值替换为 PHP 代码取出的 SQL 数据。

我检查了 Chrome 上的元素，可以看到数据进入函数，但表中的值保持空白并且没有设置为来自 mysql 的值。

任何帮助或建议将不胜感激。

<?php

    $sql = "SELECT * FROM `stock` WHERE 1"; 
    $tableHeader = "<body><center><div><table id=\"infoTable\" class=\"myTable \"><tr><th></th><th> 1 </th><th> 2 </th><th> 3 </th></tr>";  
    $r_query = mysql_query($sql); 


    //To Table Details

    //prints StackerReclaimer_StatusTable;
    include("SR_TableStatus.php");
    // output data of each row
    echo $tableHeader;
    for ($i=1;$i<5;$i++) //Rows
        $row = mysql_fetch_array($r_query);
        if($i == 2 || $i==4)
            echo"<tr><td> </td></tr>";
        echo"<tr><td class = \"leftCol\"> Bed ".($i)."</td>";

        for ($j=1;$j<4;$j++) //Cols
            echo"<td bgcolor=\"#E9E6E5\" id =\"$i$j\"></td>";
        /***************************************/
        $data = strtoupper($row["sortcode"])." (".(($row["stock"])/1000)."k)";
        if( $row["bednumber"] == $i && $row["pilenumber"] == $j )
        //  echo"<td bgcolor=\"#E9E6E5\" id = $i$j>".strtoupper($row["sortcode"])." (".(($row["stock"])/1000)."k)</td>";
        echo "<script>swapValue($i$j, ".$data.");</script>";
        
        /***************************************/                           
        

    echo"</tr>";
     
    echo "</table></div></body></center>";      
?>
<!-- This script allows user to click on table rows to direct user to More info for that Coal -->
<script>

    function swapValue(var location, var data)
        var s = document.getElementById(location);
        s.value = data;
       

    var table = document.getElementById("infoTable");
    if (table != null) 
        for (var i = 1; i < table.rows.length; i++) 
            for (var j = 1; j < table.rows[i].cells.length; j++)
            table.rows[i].cells[j].onclick = function () 
                tableText(this);
                myFunc();
                ;
        
    

    function tableText(tableCell) 
        //alert(tableCell.innerHTML);
        var Val = tableCell.innerHTML;
        Val = Val.substring(0,7);
        document.getElementById("searchBox").value = Val;
        document.getElementById("searchButton").click();
    
</script>

【问题讨论】：

【参考方案1】：

我找到了获得所需结果的方法。

后退一步休息一下，让头脑和眼睛休息一下，我回来了，眼睛焕然一新，现在已经解决了这个问题，我通过在 php 中使用 javascript 来弄乱代码，这只会增加一团糟如果有人要解码或阅读。

所以代码所做的是使用 PHP 从 SQL 数据库中读取值，读取 bednumber(Location(y)) 和 pileNumber(location(x)) 然后它使用 for 循环 I 用于行和 J 用于列，然后每列增量，您需要使用新的单元格位置 $i 和 $j 更新发送回的 SQL 查询，这些单元格位置保存在床和桩号值中。我将发布现在可以使用的代码，但非常感谢任何建议或更正。

<?php
    $tableHeader = "<body><center><div><table id=\"infoTable\" class=\"myTable \"><tr><th></th><th> 1 </th><th> 2 </th><th> 3 </th></tr>";  
    //prints StackerReclaimer_StatusTable;
    include("SR_TableStatus.php");
    // output data of each row
    echo $tableHeader;
        /*####################################*/
        for ($i=1;$i<5;$i++)
            //$row = mysql_fetch_array($r_query);
            if($i == 2 || $i==4)
                echo"<tr><td> </td></tr>";
            echo"<tr><td class = \"leftCol\"> Bed ".($i)."</td>";
            for ($j=1;$j<4;$j++)
            $sql = "SELECT * FROM `stock` WHERE `bednumber` = $i AND `pilenumber` = $j";
            $r_query = mysql_query($sql); 
            $row = mysql_fetch_array($r_query);  //Creates a loop to loop through results
                if( $row["bednumber"] == $i && $row["pilenumber"] == $j )
                    echo"<td bgcolor=\"#E9E6E5\">".strtoupper($row["sortcode"])." (".(($row["stock"])/1000)."k)</td>";
                
                else 
                    echo"<td bgcolor=\"#E9E6E5\"> --- </td>";
            
        echo"</tr>";
         /*################################*/
    echo "</table></div></center></body>";  
?>
<!-- This script allows user to click on table rows to direct user to More info for that Coal -->

    <script>
        var table = document.getElementById("infoTable");
        if (table != null) 
            for (var i = 1; i < table.rows.length; i++) 
                for (var j = 1; j < table.rows[i].cells.length; j++)
                table.rows[i].cells[j].onclick = function () 
                    tableText(this);
                ;
            
        

        function tableText(tableCell) 
            //alert(tableCell.innerHTML);
            var Val = tableCell.innerHTML;
            Val = Val.substring(0,7);
            document.getElementById("searchBox").value = Val;
            document.getElementById("searchButton").click();
        
    </script>

【讨论】：

【参考方案2】：

回显"</table></div></body></center>"

首先你没有正确结束标签。你脱离了身体其次，您的块甚至不在主体块内

所以我建议你这样重写

<body>
<div>
<table id="infoTable" class="myTable">
<tr><th></th><th> 1 </th><th> 2 </th><th> 3 </th></tr>
<?php

    $sql = "SELECT * FROM `stock` WHERE 1"; 
    $r_query = mysql_query($sql); 


    //To Table Details

    //prints StackerReclaimer_StatusTable;
    include("SR_TableStatus.php");
    // output data of each row

    for ($i=1;$i<5;$i++) //Rows
        $row = mysql_fetch_array($r_query);
        if($i == 2 || $i==4)
            echo"<tr><td> </td></tr>";
        echo"<tr><td class = \"leftCol\"> Bed ".($i)."</td>";

        for ($j=1;$j<4;$j++) //Cols
            echo"<td bgcolor=\"#E9E6E5\" id =\"$i$j\"></td>";
        /***************************************/
        $data = strtoupper($row["sortcode"])." (".(($row["stock"])/1000)."k)";
        if( $row["bednumber"] == $i && $row["pilenumber"] == $j )
        //  echo"<td bgcolor=\"#E9E6E5\" id = $i$j>".strtoupper($row["sortcode"])." (".(($row["stock"])/1000)."k)</td>";
        echo "<script>swapValue($i$j, ".$data.");</script>";
        
        /***************************************/                           
        

    echo"</tr>";
     

?>
 </table>
 </div>

    <!-- This script allows user to click on table rows to direct user to More info for that Coal -->
<script>

    function swapValue(var location, var data)
        var s = document.getElementById(location);
        s.value = data;
       

    var table = document.getElementById("infoTable");
    if (table != null) 
        for (var i = 1; i < table.rows.length; i++) 
            for (var j = 1; j < table.rows[i].cells.length; j++)
            table.rows[i].cells[j].onclick = function () 
                tableText(this);
                myFunc();
                ;
        
    

    function tableText(tableCell) 
        //alert(tableCell.innerHTML);
        var Val = tableCell.innerHTML;
        Val = Val.substring(0,7);
        document.getElementById("searchBox").value = Val;
        document.getElementById("searchButton").click();
    
</script>
</body>

【讨论】：

是的，我以前从来没有写过 html，所以我敢肯定我的语法很糟糕，但我很欣赏格式，谢谢，知道为什么 JavaScript 没有插入单元格值吗？ Aaron，您的脚本在 body 标签之外，这就是它永远不会执行的原因。看看我上面格式化的代码。你会看到我把你的脚本块放回正文块。我已将 html 块更改为正确的顺序，但代码仍无法正常执行。相反，我退回到具有安全结果的 PHP 版本，并发现它更容易阅读代码。

以上是关于使用PHP调用JS更改HTML表格单元格值的主要内容，如果未能解决你的问题，请参考以下文章

JS更改内部html表格单元格

根据每个表格行中的单元格值更改按钮文本 - Jquery

如何通过 JavaScript 获取 html 表格 td 单元格值？

根据 Python HTML 电子邮件中的单元格值将 HTML 表格单元格从“低到高颜色阴影”着色

jquery实现的统计table表格指定列的单元格值的和

如何在数据表中获取选定的表格单元格值