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

Question

I am developing a webpage where a user can add or delete rows to an HTML table.我正在开发一个网页，用户可以在其中向 HTML 表格添加或删除行。 The process is:过程是：

They will fill up the input widget on the webpage.他们将填写网页上的输入小部件。
After filling up the description, unit, quantity, unit price, and pressing the add button;填写说明、单位、数量、单价后，点击添加按钮； the data will be shown in the table.数据将显示在表格中。 They will be able to add as many items as they want, and they will also be able to delete items whenever they want.他们将能够根据需要添加任意数量的项目，也可以随时删除项目。 Everything works fine up until here.一切正常，直到这里。
Once the user is done filling up the necessary forms, as well as adding the items they need, they will press the 'Save' button.用户填写完必要的表格并添加他们需要的项目后，他们将按下“保存”按钮。
After pressing the 'Save button', I will fetch the values in the input field and the rows in the HTML table using POST method.按下“保存按钮”后，我将使用 POST 方法获取输入字段中的值和 HTML 表中的行。
I will save the data in the database.我将数据保存在数据库中。

The dilemma is I can't fetch the rows in the table.困境是我无法获取表中的行。 I researched some ways to fetch data from HTML tables using PHP, and I found out about file_get_contents function.我研究了一些使用 PHP 从 HTML 表中获取数据的方法，我发现了 file_get_contents 函数。 It works perfectly fine with pre-defined tables, but not in dynamic tables.它适用于预定义的表，但不适用于动态表。 I noticed that file_get_contents function fetches the HTML contents in the webpage, which is empty because the table will be filled when the user is using it, not when the page is created.我注意到 file_get_contents 函数获取网页中的 HTML 内容，它是空的，因为表格将在用户使用时填充，而不是在创建页面时。

Now I feel like I hit the wall, and I do not have an idea for alternatives to achieve what I want.现在我觉得我撞到了墙，我没有替代方案来实现我想要的。 I hope you can give me some advice.我希望你能给我一些建议。 Thank you.谢谢你。

My webpage code:我的网页代码：

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

Some screenshots of the webpage:部分网页截图：

enter image description here在此处输入图片说明

Answer 1

Consider using a database (sqlite, mysql), or if you really want to use files, use CSV .考虑使用数据库（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)

Edit: "5: I will save the data in the database."编辑：“5：我将数据保存在数据库中。”

In that case, you can fetch the records from the database, no need to read from files.在这种情况下，您可以从数据库中获取记录，而无需从文件中读取。

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

问题描述

1 个解决方案

解决方案1
0 2021-11-10 07:34:04

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

问题描述

1 个解决方案

解决方案1 0 2021-11-10 07:34:04

解决方案1
0 2021-11-10 07:34:04