如何将PHP回显按钮的文本拖入Javascript,其值将用于另一个PHP Sql查询?

I have a PHP sql query that returns a table.

while($row = $result->fetch_assoc()) {
                echo "<tr><td id=\"cst\"><button type=\"submit\" id=\"click\" onClick=sendData(this)>".$row["Name"]</button></td></tr>";

The table is output correctly. My next step is using vanilla Javascript to pull the HTML text value associated with $row["Name"] from the button in the output table (when the button is clicked). I call the function onClick=sendData(this)

Now, in Javascript I'm attempting to access the text value like so:

function sendData(name) {
    var text = name.innerText;
}

However, this isn't working. Can anyone explain why?

The yet another variant is to improve formatting of your HTML output by taking advantage of HEREDOC syntax that suits well for complex formatting

while($row = $result->fetch_assoc()) {
    echo <<<HTML
      <tr>
          <td class="cst"> <!-- class instead `id` -->
              <button
                  type="button" <!-- `button` type instead of `submit` -->
                  class="btn-click" <!-- class instead `id` -->
                  data-name="{$row["Name"]}">
                     {$row["Name"]}
              </button>
          </td>
      </tr>
HTML;

And using vanilla JS it is possible to make smth. similar to the result snippet below.

document.addEventListener('click', function(event) {
  var target = event.target;

  // If the clicked element doesn't have the right selector, bail
  if (!target.matches('.btn-click')) {
    return;
  }

  var name = target.getAttribute('data-name');
  
  alert('Button `data-name` is "' + name + '"');

  // sendData logic goes further ...
}, false);
<tr>
  <td class="cst">
    <button type="submit" class="btn-click" data-name="Coockaracha">Reveal my name</button>
  </td>
</tr>

The approach of using global click listener is called event delegation and has some advantages. You can read about it here.

Also keep in mind that id should be unique across the page, so it is not correct to iterate using id. class attribute suits nicely and allows multiples.

</div>

There are multiple problem with how you are using both PHP and JavaScript here to solve this problem. Let me break them down, and how best we can solve them.

  1. Your ID's are the same : When you're iterating through the rows in your table, you're not setting a unique id for them. This means if you try to reference them later on in any capacity via JavaScript you won't be able to. Instead, you can change this to something like, <td id=\"cst_$row['row_id']\".
  2. Your PHP is prone to SQL Injection : The method you're using to query your database is most likely prone to SQL Injection based on how I see you are returning your values. You'd be best to read up on Prepared Statements and PDO.
  3. You don't have quotation marks around your onclick : because you haven't wrapped your function in quotation marks, it actually won't even be sending correctly. However, there is a better solution anyway. Remove the on-click from your button, and add an event listener.
  4. Your button type is of submit : because you've set your button type to submit, the default behavior is to refresh the page. If you want to keep this, you'd have to specify not to use the default behavior, or simply change the button type, to button.

To solve all of these issues (except SQL Injection because this would require more information than was provided), your code could be changed to the following :

PHP :

while($row = $result->fetch_assoc()) {
                echo "<tr><td id=\"cst_$row['row_id']\"><button class=\"test_buttons\"type=\"button\" id=\"btn_$row['row_id']\"".$row["Name"]</button></td></tr>";

In the above example, "row_id" is your unique identifier in your database table. Change this to "id" or whatever you have called it in your table.

JavaScript :

window.onload = function() {
  let buttons = document.getElementsByClassName("test_buttons"); // Get all buttons you want to search for
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(event) { // On click of these buttons
      event.preventDefault(); // This is required only if you want to keep the button type of submit
      let text = this.textContent;
      alert(text);
    });
  }
}
<td><button type="button" class="test_buttons">Test 1</button></td>
<td><button type="button" class="test_buttons">Test 2</button></td>

</div>