Question

我正在尝试获取包含id的td的值这是我的JavaScript代码：

function Functiontd() {
    var variable = document.getElementsByTagName("td")[0].innerHTML;
    document.getElementById("content").innerHTML = variable;
}

HTML代码：

<table>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>Option</th>
    </tr>

    <tr>
        <td>1</td>
        <td>Mark </td>
        <td><input type="submit" onclick="Functiontd()" ;></td>
    </tr>

    <tr>
        <td>45</td>
        <td>Francis </td>
        <td><input type="submit" onclick="Functiontd()" ;></td>
    </tr>

</table>

<div id="content"></div>

在调用onclick时，仅向我显示第一个td的值1 如果我按第二行的按钮，则不会出现45，只有1

每次按下按钮时如何显示该行ID的td值？然后将该JavaScript值带到php变量？

Answer 1

这样，您将始终恢复第一个td

 var variable=document.getElementsByTagName("td")[0].innerHTML;

您应该单击并恢复该特定元素，然后进入节点层次结构

使用innerText代替innerHtml

我的示例基于与服务器进行交互的XMLHttpRequest对象。您可以随意使用任何服务来使请求与服务器异步。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>Option</th>
      </tr>

      <tr>
        <td>1</td>
        <td>Mark</td>
        <td><button type="button" onclick="getId(this)">GetId</button></td>
      </tr>

      <tr>
        <td>45</td>
        <td>Francis</td>
        <td><button type="button" onclick="getId(this)">GetId</button></td>
      </tr>
    </table>

    <script>
      function getId(element) {
        const currentTr = element.parentElement.parentElement;
        const id = parseInt(currentTr.children[0].innerText);

        goToServer(id);
      }

      function goToServer(id) {
        const xmlhttp = new XMLHttpRequest();
        xmlhttp.open('POST', './queryUser.php', true);
        //Send the proper header information along with the request
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

        xmlhttp.onreadystatechange = function() {
            if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                alert(this.responseText);
            }
        };

        // Data to send
        xmlhttp.send(`id=${id}`);
      }
    </script>
  </body>
enter code here

QueryUser.php

<?php
$id = $_POST["id"];

echo 'Response: '. $id;

该示例非常基本，但可以帮助您学习。

有用的资源

Answer 2

正如D. Smania提到的那样，您的问题包括两个问题。要解决第一个如何获取正确ID的问题，您可以尝试以下

const inputs = document.querySelectorAll('input');

inputs.forEach(input => input.addEventListener('click', handleClick));
        
function handleClick(event) {
  const id = this.closest('tr').children[0].textContent;
  
  document.querySelector('#content').textContent = id;
}

<table>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>Option</th>
    </tr>

    <tr>
        <td>1</td>
        <td>Mark </td>
        <td><input type="submit"></td>
    </tr>

    <tr>
        <td>45</td>
        <td>Francis </td>
        <td><input type="submit"></td>
    </tr>

</table>

<div id="content"></div>

关于第二个问题，回答起来有点复杂，因为您没有提到上下文，但是可以有两个选择，将输入中获得的ID保存在隐藏中，然后将其发送到表单中。另一个选择可能是，此先前的过程是通过一些ajax调用完成的

如何获取Td的数据并将其转换为变量php？

2 个答案: