在 php 中单击时，如何使表格在 javascript 中做出反应？

Question

<?php>
if (isset($_POST['search']))
{
    $startDate = $_POST['start'];
    $startDate = str_replace('/', '-', $startDate ); 
    $startDate = date("Y-m-d", strtotime($startDate));
    echo $startDate;
    
    $endDate = $_POST['end'];
    $endDate = str_replace('/', '-', $endDate ); 
    $endDate = date("Y-m-d", strtotime($endDate));
    echo $endDate;

    $model = $_POST['model'];
    echo $model;

    $dates = getDatesStartToLast($startDate, $endDate);



    for ($i=0; $i < count($dates); $i++){
        echo "<tr>";
        echo "<td><text class = 'dateselect'>$dates[$i]</text></td>";
        
        $query = mysqli_query($conn, "SELECT * from electec_db where DateInputTime >= '$dates[$i]' and DateInputTime <= '$dates[$i] 23:59:59' and Model = '$model'");
        $count = mysqli_num_rows($query);
        // echo $count;
        echo "<td>$count</td>";

        $arrays = array("Result = 'NG'", "Species = 'Burr'", "Species = 'Dirt'", "Species = 'Scratch'", "Species = 'Cracked'", "Species = 'Gas'" );
        for ($j=0; $j < count($arrays); $j ++){
            $query = mysqli_query($conn, "SELECT * from electec_db where DateInputTime >= '$dates[$i]' and DateInputTime <= '$dates[$i] 23:59:59' and Model = '$model' and $arrays[$j]");
            $count = mysqli_num_rows($query);
            echo "<td>$count</td>";

// And this is jsp code
<script>
$('.dateselect').click(function() { 
    var dateSelect = $(this).text();
    alert(dataSelect)

}
</script>

This is php code and javascript code. When I click echo "$dates[$i]"; part, I want to make react in script like alert dateSelect variable. But it doesn't make any reaction. How to make a table react in javascript when clicked in php?

Answer 1

Do you have jQuery installed in your project? That's what the $ indicates.. Not sure what the jsp comment is about.

In straight javascript you could do something like this:

 document.querySelectorAll('.dateSelect').forEach(item => { item.addEventListener('click', event => { alert(event.target.innerHTML) }) })

 <p class="dateSelect">thing1</p> <p class="dateSelect">thing2</p> <p class="dateSelect">thing3</p>