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

【问题标题】：Using PHP to call JS to change HTML table cell values使用PHP调用JS更改HTML表格单元格值
【发布时间】：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>

【问题讨论】：

标签： javascript php mysql xampp

【解决方案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 版本，并发现它更容易阅读代码。