как взять данные тд и преобразовать их в переменную php? - PullRequest
Новая
       13

как взять данные тд и преобразовать их в переменную php?

0 голосов
/ 26 ноября 2018

Я пытаюсь принять значения 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 показывает только значение 1 первого тд, если я нажимаю кнопку, во втором ряду не появляется 45, только 1

Как я могу сделать, чтобы каждый раз, когда я нажимаю кнопку, показывало значениетд id этого ряда?а затем перенести это значение JavaScript в переменную php?

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Как упоминает Д. Смания, ваш вопрос состоит из двух вопросов.Чтобы решить первый, как получить правильный идентификатор, вы можете попробовать следующее 

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>

О втором вопросе ответить немного сложнее, потому что вы не упоминаете контекст, но может быть несколько вариантов, сохранить полученный идентификаторво входе: скрытый и отправьте его в виде поста.Другой вариант может заключаться в том, что этот предыдущий процесс выполняется с помощью некоторого вызова ajax

0 голосов
/ 26 ноября 2018

Таким образом, вы всегда восстанавливаете первый тд 

 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;

Пример довольно простой, но онпоможет вам в обучении.

Полезные ресурсы

...