PHP file_get_contents 获取使用 JavaScript 生成的动态 html td 值答案

【问题标题】：PHP file_get_contents fetch dynamic html td values generated using JavaScriptPHP file_get_contents 获取使用 JavaScript 生成的动态 html td 值
【发布时间】：2021-11-10 15:34:04
【问题描述】：

我正在开发一个网页，用户可以在其中向 HTML 表格添加或删除行。流程是：

他们将填满网页上的输入小部件。
填写描述、单位、数量、单价后，点击添加按钮；数据将显示在表格中。他们将能够添加任意数量的项目，并且他们还可以随时删除项目。到目前为止一切正常。
一旦用户填写完必要的表格并添加了他们需要的项目，他们将按下“保存”按钮。
按下“保存按钮”后，我将使用 POST 方法获取输入字段中的值和 HTML 表中的行。
我会将数据保存在数据库中。

困境是我无法获取表中的行。我研究了一些使用 PHP 从 HTML 表中获取数据的方法，并发现了 file_get_contents 函数。它适用于预定义表，但不适用于动态表。我注意到 file_get_contents 函数获取网页中的 HTML 内容，该内容是空的，因为该表将在用户使用它时填充，而不是在创建页面时。

现在我觉得我碰壁了，我不知道有什么替代方案来实现我想要的。我希望你能给我一些建议。谢谢。

我的网页代码：

<?php
session_start();
if (!isset($_SESSION['loggedIn']) ) {
    header('Location: index.php');
}

if (isset($_POST['jo_save'])) {
    $pageContents = file_get_contents('job_order_form.php');
    $dom = new DOMDocument();

    $tableData = $dom->getElementsByTagName('td');

    $ctr1 = 0;
    $ctr2 = 0;

    foreach ($tableData as $node) {
        $contents[$j][] = trim($node->textCotent);
        $i++;
        $j = $j % 5 == 0? $j++ : $j;
    }

    

}


?>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   
    <?php require('navbar.php');?>

    <div class="container">
        <h3 class="display-4">Job Order</h3>
        <form action="<?php echo $path_parts['basename'];?>" method="POST" id="jo_information">
            <div class="form-row">
                <div class="form-group col-md-8">
                    <label for="jo_clientName">Client Name </label>
                    <input class="form-control" id="jo_clientName" name="jo_clientName" />
                </div>
                <div class="form-group col-md-4">
                    <label for="jo_date">Date(mm/dd/yyyy) </label>
                    <input class="form-control" id="jo_date" name="jo_date" value="<?php echo date('m/d/Y');?>" readonly/>
                </div>
                <div class="form-group col-md-8">
                    <label for="jo_representative">Representative</label>
                    <input class="form-control" id="jo_representative" name="jo_representative" />
                </div>
                <div class="form-group col-md-4">
                    <label for="jo_tin">TIN#</label>
                    <input class="form-control" id="jo_tin" name="jo_tin" />
                </div>
                <div class="form-group col-md-12">
                    <label for="jo_address">Address</label>
                    <input class="form-control" id="jo_address" name="jo_address" />
                </div>
                <div class="form-group col-md-12">
                    <label for="jo_location">Project Location</label>
                    <input class="form-control" id="jo_location" name="jo_location" />
                </div>
            </div>
            <hr />
            
            <div class="form-row">
                <div class="form-group col-sm-12 col-md-4">
                    <label for="jo_creator">Created By:</label>
                    <input class="form-control" id="jo_creator" name="jo_creator" value="<?php echo $_SESSION['employee_fName']." ".$_SESSION['employee_mName']." ".$_SESSION['employee_lName']?>" readonly />
                </div>
                <div class="form-group col-sm-12 col-md-4">
                    <label for="jo_mobilization">Mobilization</label>
                    <input class="form-control" id="jo_mobilization" name="jo_mobilization" />
                </div>
                <div class="form-group col-sm-12 col-md-4">
                    <label for="jo_totalPayment">Total Payment</label>
                    <input type="number" class="form-control" id="jo_totalPayment" name="jo_totalPayment" readonly/>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-3">
                    <button type="submit" class="form-control btn btn-primary" id="jo_save" name="jo_save">Save</button>
                </div>
                <div class="form-group col-md-3">
                    <a href="projects.php" type="button" class="form-control btn btn-danger" id="jo_cancel" name="jo_cancel">Cancel</a>
                </div>
            </div>
        </form>
        
        <form action="<?php echo $path_parts['basename'];?>" method="POST" id="jo_items">
            <div class="form-row">
                <div class="form-group col-md-5">
                    <label for="jo_description">Description</label>
                    <input class="form-control" id="jo_description" name="jo_description" />
                </div>
                <div class="form-group col-md-2 col-sm-6">
                    <label for="jo_unit">Unit</label>
                    <input class="form-control" id="jo_unit" name="jo_unit" />
                </div>
                <div class="form-group col-md-2 col-sm-6">
                    <label for="jo_quantity">Qty.</label>
                    <input type="number" class="form-control" id="jo_quantity" name="jo_quantity"/>
                </div>
                <div class="form-group col-md-2">
                    <label for="jo_unitPrice">Unit Price</label>
                    <input type="number" class="form-control" id="jo_unitPrice" name="jo_unitPrice" />
                </div>
                <div class="form-group col-md-1">
                    <label for="jo_add">&nbsp</label>
                    <button type="button" class="form-control btn btn-primary" id="jo_add" name="jo_add">Add</button>
                </div>
            </div>
            <table class="table table-striped table-sm" id="jo_item_table">
                <thead class="thead-dark">
                    <tr>
                    <th scope="col">Description</th>
                    <th scope="col">Unit</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Unit Price</th>
                    <th scope="col">Amount</th>
                    <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <hr />
        </form>
            
            
        
        
        
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {
            $("#jo_add").on('click', function() {
                item_amount = parseFloat($('#jo_quantity').val()*$('#jo_unitPrice').val());
                new_row = "<tr> \
                            <td>"+$('#jo_description').val()+"</td> \
                            <td>"+$('#jo_unit').val()+"</td> \
                            <td>"+$('#jo_quantity').val()+"</td> \
                            <td>"+$('#jo_unitPrice').val()+"</td> \
                            <td>"+item_amount+"</td> \
                            <td><button type='button' class='btn btn-outline-danger btn-sm' onClick='deleteRow(this)'>Delete</button></td>";
                            

                jo_items_tbl = $('table tbody');
                jo_items_tbl.append(new_row);
                $('#jo_totalPayment').val(computeTotal);
                $('#jo_description').val("");
                $('#jo_unit').val("");
                $('#jo_quantity').val("");
                $('#jo_unitPrice').val("");
                
            });
        });

        function deleteRow(cell){
            var row = $(cell).parents('tr');
            var rIndex = row[0].rowIndex;
            document.getElementById('jo_item_table').deleteRow(rIndex);
        }

        function computeTotal(){
            
            var totalAmount = 0.0;
            var tbl = document.getElementById('jo_item_table');
            
            for(var row=1, n=tbl.rows.length; row<n; row++){
                totalAmount += parseFloat(tbl.rows[row].cells[4].innerHTML);
            }

            return totalAmount;

        }

    </script>
  </body>
</html>

部分网页截图：

enter image description here

【问题讨论】：

然后不要将数据放入普通表格单元格中，将它们放入 输入字段 - 然后您可以简单地提交整个表格所在的表格，以获取数据发送到服务器。如果用户不应该更改其中包含的值，您可以将输入字段设为readonly。（例如，他们仍然可以使用开发工具更改它们，因此如果这些计算的结果很重要并且需要防止被操纵，那么您将不得不再次在服务器端进行计算.)
如果你想让数据显示看起来像输入字段无法实现的某种方式，那么你当然也可以将普通文本放入表格单元格中，并添加 hidden 用于传输实际数据的输入字段。
您必须使用 JavaScript 执行此操作并将新行发送到 php，您可以在此处阅读以查看示例代码 stackoverflow.com/questions/51780109/…
请修剪您的代码，以便更容易找到您的问题。请按照以下指南创建minimal reproducible example。

标签： javascript php html dom dynamic

【解决方案1】：

考虑使用数据库（sqlite、mysql），或者如果你真的想使用文件，使用CSV。

$file_name = "file.csv";

if (($handle = fopen($file_name, "r")) !== FALSE) {
    while (($data = fgetcsv($handle, 0, ",")) !== FALSE) {
        echo $data[0] . $data[1] . $data[2];
    }
    fclose($handle);
}
$fp = fopen($file_name, 'a');
// data to write
$infos = ["abc", "123"];
foreach ($infos as $info) {
    fputcsv($fp, array($info));
}
fclose($fp)

编辑：“5：我将数据保存在数据库中。”

在这种情况下，您可以从数据库中获取记录，而无需从文件中读取。

【讨论】：

感谢您的回复。我已经为网页设置了数据库。我遇到的问题是我需要从表中获取值，然后将这些值保存到数据库中。我不知道如何从 html 表中获取值并将它们保存到 PHP 变量或数组中。
我相信你的方法可能有点错误；由于您没有更新服务器上的 html 文件，因此 file_get_contents() 将不起作用；
但是，您可以在按下“添加”时将表单数据保存在 javascript 数组中，并在按下提交时调用一个函数，通过 $ 将所有这些数据发送到 php 脚本_POST，您将在那里接收数据并将其发送到数据库