Javascript 将记录集发布到表中，然后选择一行并发布到另一页

我最近遇到了一个问题，我不太确定如何解决。在这里分享，以防对其他人有所帮助

用例：用户在PHP页面的搜索框中输入字符串。提交时，页面查询数据库，然后将结果发布到同一页面上的表中。然后，用户用单选按钮选择一条记录，只需将该记录发布到不同的PHP页面。第二个页面没有访问数据库的权限

我选择了实际页面，并创建了一个示例页面，以便于清晰和测试，因为原始页面大约有15个表列

<div class="container">
    <div class="row" style="margin-top: 1rem;">
        <div class="col-sm">                         
            <form action="" method="post">                    
                <table class="fit" id="entry">
                    <tr>
                        <td class="fit"><label for="start">Planet (try <strong>Caprica</strong> or <strong>Picon</strong>): </label></td>                            
                    </tr>
                    <tr>                            
                        <td class="fit"><input type="test" id="planet" name="planet" required autofocus /></td>
                    </tr>                        
                </table>                        
                <input class="btn btn-primary" type="submit" value="Get Characters" />
            </form>
        </div>
    </div>
</div>  

<div class="container" style="margin-top: 2rem;">
    <div class="row">
        <div class="col-sm">               
            <?php
            require_once('./resources/pdo.php');

            if ( isset($_POST['planet']) ) {

                $planet = strtolower($_POST['planet']);      
                $pdo = new myPDO('phppostpost');

                try {
                    $stmt = $pdo->prepare('CALL devCharacters(?)');
                    $stmt->bindParam(1, $planet, PDO::PARAM_STR);                    
                    $stmt->execute();                        
                    $stmt->setFetchMode(PDO::FETCH_ASSOC);
                } catch (PDOException $e) {
                    die("Error occurred: " . $e->getMessage());
                }
                ?>

                <div class="table-responsive">

                    <table class="table table-striped table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th class="fit">Select</th>                                           
                                <th class="fit" scope="col">Customer First</th>
                                <th class="fit" scope="col">Customer Last</th>
                                <th class="fit" scope="col">Planet</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php while ($r = $stmt->fetch()): ?>                             
                            <tr>                                    
                                <?php echo "<td class='fit'><input type='radio' id='cust-" . $r['customer_id'] ."' name='cust-id' value='". $r['customer_id'] . "' </td>"; ?>
                                <?php echo "<td class='fit'>" . $r['first_name'] . "</td>"; ?>
                                <?php echo "<td class='fit'>" . $r['last_name'] . "</td>"; ?>
                                <?php echo "<td class='fit'>" . $r['origin_planet'] . "</td>"; ?>
                            </tr>
                        <?php endwhile; ?>
                        </tbody>
                    </table>
                </div>
                <input class="btn btn-primary" onclick="getSelectedRowData();" type="submit" value="Send" />
            <?php } ?>
        </div>
    </div>
</div> 

行星（试试卡布里卡或皮孔）：
挑选
顾客至上
顾客最后
行星

作为一名相对较新的开发人员，我不知道如何（1）仅获取所选行，以及（2）仅从该行而不是从原始搜索表单提交数据

经过大量的谷歌搜索，以及堆栈溢出用户提醒我需要实际上研究超过20分钟（谢谢！），我终于解决了这个问题

---

我将在下面为遇到类似问题的其他人发布答案。

为了解决这个问题，我使用JavaScript获取所选行。为了有效地获取正确的记录，我更新了每个TD元素，使其具有唯一的、动态生成的ID：

<?php echo "<td class='fit' id='fname-" . $r['customer_id'] ."'>" . $r['first_name'] . "</td>"; ?>
<?php echo "<td class='fit' id='lname-" . $r['customer_id'] ."'>" . $r['last_name'] . "</td>"; ?>
<?php echo "<td class='fit' id='planet-" . $r['customer_id'] ."'>" . $r['origin_planet'] . "</td>"; ?>

这对我来说很有效，但我相信有更好的方法。希望这（1）有助于其他人，（2）发布了一个更好的解决方案

这是一个有效的演示：

完整资料来源：

<tbody id="results-body">

function getSelectedRowData() {             
    const tableRowArray = Array.from([document.getElementById('results-body')][0].rows);

    let custFirst;
    let custLast;
    let custPlanet;

    tableRowArray.forEach((tableRow, i) => {                
        cellButton = tableRow.getElementsByTagName('input');
        if (cellButton[0].checked == true ) {                                                          
            const rowID = cellButton[0].id.split('-').pop();
            custFirst = document.getElementById('fname-' + rowID).innerHTML;
            custLast = document.getElementById('lname-' + rowID).innerHTML;
            custPlanet = document.getElementById('planet-' + rowID).innerHTML;
        }
    });

    /* Build a hidden form solution to prep for post.
       Source: https://stackoverflow.com/questions/26133808/javascript-post-to-php-page */
    let hiddenForm = document.createElement('form');

    hiddenForm.setAttribute('method', 'post');
    hiddenForm.setAttribute('action', 'newpage.php');
    hiddenForm.setAttribute('target', 'view');

    const fieldCustFirst = document.createElement('input');
    const fieldCustLast = document.createElement('input');
    const fieldCustPlanet = document.createElement('input');

    fieldCustFirst.setAttribute('type', 'hidden');
    fieldCustFirst.setAttribute('name', 'custFirst');
    fieldCustFirst.setAttribute('value', custFirst);

    fieldCustLast.setAttribute('type', 'hidden');
    fieldCustLast.setAttribute('name', 'custLast');
    fieldCustLast.setAttribute('value', custLast);

    fieldCustPlanet.setAttribute('type', 'hidden');
    fieldCustPlanet.setAttribute('name', 'custPlanet');
    fieldCustPlanet.setAttribute('value', custPlanet);

    hiddenForm.appendChild(fieldCustFirst);
    hiddenForm.appendChild(fieldCustLast);
    hiddenForm.appendChild(fieldCustPlanet);

    document.body.appendChild(hiddenForm);

    // Post
    window.open('', 'view');
    hiddenForm.submit();
}