基于JavaScript实现跨输入框联动与表格填充：功能异常求助

Let's walk through the issues in your code and get those two features working properly. Here's what was going wrong, plus the corrected code:

Key Issues in Your Original Code #

• Unclosed HTML Tags: The top input fields for avg_total_price and evalresults weren't closed with > — this breaks the DOM structure and prevents JavaScript from targeting them correctly.
• Incorrect <tbody> Placement: You were generating a new <tbody> for every table row inside your PHP loop. Tables should have a single <tbody> wrapping all data rows to maintain valid structure.
• Closure Problem in Loop: Using var in your row click loop caused all click handlers to reference the last row instead of the current one. Switching to a more reliable method (like querySelectorAll + forEach) fixes this.
• String vs. Numeric Comparison: The evaluation input value is a string by default, so comparing it directly to 0 (e.g., currenteval > 0) gives unexpected results. We need to convert it to a number first.

Corrected Full Code #

<body>
    <?php 
    $sql = $stmt = $dbo->prepare("SELECT avg_total_price, evaluation FROM view_evm ");
    $stmt->execute(); 
    ?>
    <h1>EVM Details</h1>

    <!-- Top Input Section: Fixed closed input tags -->
    <TABLE class="data-table">
        <caption class="title">Calculations </caption>
        <thead>
            <TR>
                <TH>Avg Total Price</th>
                <TH><input type="text" name="avg_price" id="avg_total_price"></TH>
                <TH></TH>
            </TR>
            <tr>
                <TH>Evaluation</TH>
                <th><input type="text" name="evaluation" id="evaluation" onkeyup="updateRecommendation(event)"></th>
                <th><input type="text" name="evalresults" id="evalresults"></th>
            </tr>
        </thead>
    </table>

    <!-- Results Table: Fixed tbody placement -->
    <table id="table_results" class="data-table">
        <caption class="title"></caption>
        <thead>
            <tr>
                <TH>Avg Total Price</TH>
                <th>Evaluation</th>
            </tr>
        </thead>
        <tbody>
            <?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { ?>
                <TR>
                    <Td><?php echo $row['avg_total_price']; ?></Td>
                    <Td><?php echo $row['evaluation']; ?></Td>
                </TR>
            <?php } ?>
        </tbody>
    </table>

    <script>
        // Fix row click handler: Target tbody rows directly to avoid header conflicts
        const tableRows = document.querySelectorAll('#table_results tbody tr');
        tableRows.forEach(row => {
            row.addEventListener('click', function() {
                // Trim whitespace to clean up PHP output
                document.getElementById("avg_total_price").value = this.cells[0].textContent.trim();
                document.getElementById("evaluation").value = this.cells[1].textContent.trim();
                // Auto-update recommendation when row is clicked
                updateRecommendation({ target: document.getElementById("evaluation") });
            });
        });

        function updateRecommendation(event) {
            // Convert input value to a floating-point number
            const currenteval = parseFloat(event.target.value);
            // Handle invalid number inputs
            if (isNaN(currenteval)) {
                document.getElementById("evalresults").value = "";
                return;
            }
            // Set recommendation based on numeric value
            document.getElementById("evalresults").value = currenteval > 0 ? "Sell" : "Buy";
        };
    </script>
</body>
</html>

Additional Improvements #

• Added .trim() when fetching cell content to remove any extra whitespace from your PHP output.
• Triggered updateRecommendation automatically when clicking a row, so the recommendation updates immediately without needing to manually type in the input.
• Added handling for invalid numbers in the evaluation input to clear the result if the value isn't a valid number.

内容的提问来源于stack exchange，提问作者cstewart28