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

时间:2017-06-29 15:20:49

标签: javascript php mysql xampp

我试图使用我使用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>

2 个答案:

答案 0 :(得分:0)

  

echo "</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>

答案 1 :(得分:0)

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

站在后面,休息休息一下心灵&amp;眼睛,我已经带着新鲜的眼睛回来了,现在已经解决了这个问题,我通过使用javascript进入php混乱了代码,如果有人要解码或阅读,这只会增加一些混乱。

所以代码的作用是使用PHP从SQL数据库读取值,读取bednumber(Location(y))和pileNumber(location(x)) 然后它使用for循环I for Rows和J for Columns创建表, 然后每个列增量您需要更新使用新单元位置$ i&amp;发送回的SQL查询。 $ j在床上和桩号值。 我将发布现在有效的代码,但感谢任何建议或更正。

<?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>