how to take the data of a td and transform it into variable php?












0















I'm trying to take the values of the td that contains id
this is my JavaScript code:



function Functiontd() {

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

    document.getElementById("content").innerHTML = variable;

}


HTML code:



<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>


At the time of calling the onclick only shows me the value 1 of the first td
if I press the button of the second row does not appear the 45 only the 1



How could I make each time I press the button show me the value of the td of the id of that row? and then bring that JavaScript value to a php variable?






javascript html html-table







share|improve this question

























  • For the first goal, get the firts td value of the row where the click event occurs, you will need to pass this as the argument of Functiontd(). Then, the logic will be to use this, and get his parent node, then get the first child of this parent. For the second goal, you should remenber that javascript runs on client side, and php on server side, to pass a value from javascript to php you will have to make a POST call, or something like that.

    – Shidersz
    Nov 26 '18 at 3:19
















0















I'm trying to take the values of the td that contains id
this is my JavaScript code:



function Functiontd() {

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

    document.getElementById("content").innerHTML = variable;

}


HTML code:



<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>


At the time of calling the onclick only shows me the value 1 of the first td
if I press the button of the second row does not appear the 45 only the 1



How could I make each time I press the button show me the value of the td of the id of that row? and then bring that JavaScript value to a php variable?






javascript html html-table







share|improve this question

























  • For the first goal, get the firts td value of the row where the click event occurs, you will need to pass this as the argument of Functiontd(). Then, the logic will be to use this, and get his parent node, then get the first child of this parent. For the second goal, you should remenber that javascript runs on client side, and php on server side, to pass a value from javascript to php you will have to make a POST call, or something like that.

    – Shidersz
    Nov 26 '18 at 3:19














0












0








0








I'm trying to take the values of the td that contains id
this is my JavaScript code:



function Functiontd() {

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

    document.getElementById("content").innerHTML = variable;

}


HTML code:



<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>


At the time of calling the onclick only shows me the value 1 of the first td
if I press the button of the second row does not appear the 45 only the 1



How could I make each time I press the button show me the value of the td of the id of that row? and then bring that JavaScript value to a php variable?






javascript html html-table







share|improve this question
















I'm trying to take the values of the td that contains id
this is my JavaScript code:



function Functiontd() {

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

    document.getElementById("content").innerHTML = variable;

}


HTML code:



<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>


At the time of calling the onclick only shows me the value 1 of the first td
if I press the button of the second row does not appear the 45 only the 1



How could I make each time I press the button show me the value of the td of the id of that row? and then bring that JavaScript value to a php variable?






javascript html html-table




javascript html html-table






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 4:01









Funk Forty Niner

1




1










asked Nov 26 '18 at 3:07









SandorSandor

123




123













  • For the first goal, get the firts td value of the row where the click event occurs, you will need to pass this as the argument of Functiontd(). Then, the logic will be to use this, and get his parent node, then get the first child of this parent. For the second goal, you should remenber that javascript runs on client side, and php on server side, to pass a value from javascript to php you will have to make a POST call, or something like that.

    – Shidersz
    Nov 26 '18 at 3:19



















  • For the first goal, get the firts td value of the row where the click event occurs, you will need to pass this as the argument of Functiontd(). Then, the logic will be to use this, and get his parent node, then get the first child of this parent. For the second goal, you should remenber that javascript runs on client side, and php on server side, to pass a value from javascript to php you will have to make a POST call, or something like that.

    – Shidersz
    Nov 26 '18 at 3:19

















For the first goal, get the firts td value of the row where the click event occurs, you will need to pass this as the argument of Functiontd(). Then, the logic will be to use this, and get his parent node, then get the first child of this parent. For the second goal, you should remenber that javascript runs on client side, and php on server side, to pass a value from javascript to php you will have to make a POST call, or something like that.

– Shidersz
Nov 26 '18 at 3:19





For the first goal, get the firts td value of the row where the click event occurs, you will need to pass this as the argument of Functiontd(). Then, the logic will be to use this, and get his parent node, then get the first child of this parent. For the second goal, you should remenber that javascript runs on client side, and php on server side, to pass a value from javascript to php you will have to make a POST call, or something like that.

– Shidersz
Nov 26 '18 at 3:19












2 Answers
2






active

oldest

votes


















0














This way you are always recovering the first td



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


You should click and recover that particular element and go up in the hierarchy of nodes



Use innerText instead of innerHtml



My example is based on the XMLHttpRequest object to interact with server. You are free to use any service to make the request asynchronous to the server.



<!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;


The example is quite basic but it helps you in your learning.



Useful resources




  • Fetch API


  • XMLHttpRequest

  • $_POST






share|improve this answer


























  • I have never used ajax, I did a little research and I was using this but it does not work : function getId(element) { var currentTr = element.parentElement.parentElement; var id = parseInt(currentTr.children[0].innerText); $.ajax({ url: './queryuser.php', type: "POST", dataType:'text', data: {'id': id}, }); }

    – Sandor
    Nov 26 '18 at 18:49













  • Ok, modified my answer with an example using ajax.

    – GonzaH
    Nov 27 '18 at 6:05



















0














As D. Smania mentions your question consists of two questions. To solve the first one how to get the correct id you can try the following






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>





About the second one, is a bit more complex to answer because you do not mention the context, but a couple of options could be, save the id obtained in an input:hidden and send it in a form post. Another option could be that this previous process is done with some ajax call






share|improve this answer
























  • the context is that I need that id to send it in an sql SELECT query in a second button that opens a modal with all user data

    – Sandor
    Nov 26 '18 at 3:55











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474297%2fhow-to-take-the-data-of-a-td-and-transform-it-into-variable-php%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














This way you are always recovering the first td



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


You should click and recover that particular element and go up in the hierarchy of nodes



Use innerText instead of innerHtml



My example is based on the XMLHttpRequest object to interact with server. You are free to use any service to make the request asynchronous to the server.



<!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;


The example is quite basic but it helps you in your learning.



Useful resources




  • Fetch API


  • XMLHttpRequest

  • $_POST






share|improve this answer


























  • I have never used ajax, I did a little research and I was using this but it does not work : function getId(element) { var currentTr = element.parentElement.parentElement; var id = parseInt(currentTr.children[0].innerText); $.ajax({ url: './queryuser.php', type: "POST", dataType:'text', data: {'id': id}, }); }

    – Sandor
    Nov 26 '18 at 18:49













  • Ok, modified my answer with an example using ajax.

    – GonzaH
    Nov 27 '18 at 6:05
















0














This way you are always recovering the first td



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


You should click and recover that particular element and go up in the hierarchy of nodes



Use innerText instead of innerHtml



My example is based on the XMLHttpRequest object to interact with server. You are free to use any service to make the request asynchronous to the server.



<!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;


The example is quite basic but it helps you in your learning.



Useful resources




  • Fetch API


  • XMLHttpRequest

  • $_POST






share|improve this answer


























  • I have never used ajax, I did a little research and I was using this but it does not work : function getId(element) { var currentTr = element.parentElement.parentElement; var id = parseInt(currentTr.children[0].innerText); $.ajax({ url: './queryuser.php', type: "POST", dataType:'text', data: {'id': id}, }); }

    – Sandor
    Nov 26 '18 at 18:49













  • Ok, modified my answer with an example using ajax.

    – GonzaH
    Nov 27 '18 at 6:05














0












0








0







This way you are always recovering the first td



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


You should click and recover that particular element and go up in the hierarchy of nodes



Use innerText instead of innerHtml



My example is based on the XMLHttpRequest object to interact with server. You are free to use any service to make the request asynchronous to the server.



<!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;


The example is quite basic but it helps you in your learning.



Useful resources




  • Fetch API


  • XMLHttpRequest

  • $_POST






share|improve this answer















This way you are always recovering the first td



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


You should click and recover that particular element and go up in the hierarchy of nodes



Use innerText instead of innerHtml



My example is based on the XMLHttpRequest object to interact with server. You are free to use any service to make the request asynchronous to the server.



<!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;


The example is quite basic but it helps you in your learning.



Useful resources




  • Fetch API


  • XMLHttpRequest

  • $_POST







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 27 '18 at 6:09

























answered Nov 26 '18 at 3:35









GonzaHGonzaH

1417




1417













  • I have never used ajax, I did a little research and I was using this but it does not work : function getId(element) { var currentTr = element.parentElement.parentElement; var id = parseInt(currentTr.children[0].innerText); $.ajax({ url: './queryuser.php', type: "POST", dataType:'text', data: {'id': id}, }); }

    – Sandor
    Nov 26 '18 at 18:49













  • Ok, modified my answer with an example using ajax.

    – GonzaH
    Nov 27 '18 at 6:05



















  • I have never used ajax, I did a little research and I was using this but it does not work : function getId(element) { var currentTr = element.parentElement.parentElement; var id = parseInt(currentTr.children[0].innerText); $.ajax({ url: './queryuser.php', type: "POST", dataType:'text', data: {'id': id}, }); }

    – Sandor
    Nov 26 '18 at 18:49













  • Ok, modified my answer with an example using ajax.

    – GonzaH
    Nov 27 '18 at 6:05

















I have never used ajax, I did a little research and I was using this but it does not work : function getId(element) { var currentTr = element.parentElement.parentElement; var id = parseInt(currentTr.children[0].innerText); $.ajax({ url: './queryuser.php', type: "POST", dataType:'text', data: {'id': id}, }); }

– Sandor
Nov 26 '18 at 18:49







I have never used ajax, I did a little research and I was using this but it does not work : function getId(element) { var currentTr = element.parentElement.parentElement; var id = parseInt(currentTr.children[0].innerText); $.ajax({ url: './queryuser.php', type: "POST", dataType:'text', data: {'id': id}, }); }

– Sandor
Nov 26 '18 at 18:49















Ok, modified my answer with an example using ajax.

– GonzaH
Nov 27 '18 at 6:05





Ok, modified my answer with an example using ajax.

– GonzaH
Nov 27 '18 at 6:05













0














As D. Smania mentions your question consists of two questions. To solve the first one how to get the correct id you can try the following






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>





About the second one, is a bit more complex to answer because you do not mention the context, but a couple of options could be, save the id obtained in an input:hidden and send it in a form post. Another option could be that this previous process is done with some ajax call






share|improve this answer
























  • the context is that I need that id to send it in an sql SELECT query in a second button that opens a modal with all user data

    – Sandor
    Nov 26 '18 at 3:55
















0














As D. Smania mentions your question consists of two questions. To solve the first one how to get the correct id you can try the following






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>





About the second one, is a bit more complex to answer because you do not mention the context, but a couple of options could be, save the id obtained in an input:hidden and send it in a form post. Another option could be that this previous process is done with some ajax call






share|improve this answer
























  • the context is that I need that id to send it in an sql SELECT query in a second button that opens a modal with all user data

    – Sandor
    Nov 26 '18 at 3:55














0












0








0







As D. Smania mentions your question consists of two questions. To solve the first one how to get the correct id you can try the following






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>





About the second one, is a bit more complex to answer because you do not mention the context, but a couple of options could be, save the id obtained in an input:hidden and send it in a form post. Another option could be that this previous process is done with some ajax call






share|improve this answer













As D. Smania mentions your question consists of two questions. To solve the first one how to get the correct id you can try the following






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>





About the second one, is a bit more complex to answer because you do not mention the context, but a couple of options could be, save the id obtained in an input:hidden and send it in a form post. Another option could be that this previous process is done with some ajax call






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>





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>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 26 '18 at 3:43









user615274user615274

1,47811221




1,47811221













  • the context is that I need that id to send it in an sql SELECT query in a second button that opens a modal with all user data

    – Sandor
    Nov 26 '18 at 3:55



















  • the context is that I need that id to send it in an sql SELECT query in a second button that opens a modal with all user data

    – Sandor
    Nov 26 '18 at 3:55

















the context is that I need that id to send it in an sql SELECT query in a second button that opens a modal with all user data

– Sandor
Nov 26 '18 at 3:55





the context is that I need that id to send it in an sql SELECT query in a second button that opens a modal with all user data

– Sandor
Nov 26 '18 at 3:55


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474297%2fhow-to-take-the-data-of-a-td-and-transform-it-into-variable-php%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Lallio

Image
Coordenadas: 45° 40' N 9° 38' E Lallio      Comuna    Lallio Localização de Lallio na Itália Coordenadas 45° 40' N 9° 38' E Região Lombardia Província Bérgamo Área - Total 2 km² Altitude 216 m População  - Total 3 826     • Densidade 1 913 hab./km² Outros dados Comunas limítrofes Bergamo, Dalmine, Stezzano, Treviolo Código ISTAT 016123 Código cadastral E422 Código postal 24040 Prefixo telefônico 035 Website www.comune.lallio.bg.it Lallio é uma comuna italiana da região da Lombardia, província de Bérgamo, com cerca de 3.826 habitantes. Estende-se por uma área de 2 km², tendo uma densidade populacional de 1913 hab/km². Faz fronteira com Bergamo, Dalmine, Stezzano, Treviolo. [ 1 ] [ 2 ] [ 3 ] Demografia | Variação demográfica do município entre 1861 e 2011 [ 3 ] Fonte : Istituto Nazionale di Statistica (ISTAT) - Elabor...
Read more

Futebolista

Image
Ronaldo primeiro jogador a ser eleito por três vezes o melhor jogador do mundo pela FIFA. Ronaldinho Gaúcho atuando pelo Barcelona onde foi duas vezes eleito o melhor jogador do mundo pela FIFA. Kaká atuando pelo Milan onde foi eleito em 2007 o melhor jogador do mundo pela FIFA. Lothar Matthäus primeiro jogador a ser eleito o melhor jogador do mundo pela FIFA em 1991 pela Inter de Milão. Neymar durante partida contra a Escócia, em 27 de março de 2011. Crianças praticando futebol. Robinho, futebolista brasileiro, em 15 de novembro de 2006. Atletas do Chelsea, da Inglaterra. A venda de camisas com nome e número dos jogadores é uma grande fonte de arrecadação. Jürgen Klinsmann atuou como jogador e foi treinador da Alemanha. Estádio de futebol, principal local onde laboram os jogadores. O jogador de futebol , ou Futebolista , é um atleta profissional de futebol, e cuja prática do desporto coletivo é fundamental. Estes trabalhadores sã...
Read more

Jornalista

Image
Uma repórter de televisão segurando um microfone na frente de um cinegrafista. Fotojornalistas no Campeonato Mundial de Atletismo 2013 Uma repórter entrevistando Boris Johnson, Prefeito de Londres. Jornalista é o profissional formado em Jornalismo. É a pessoa responsável pela apuração, investigação e apresentação de notícias, reportagens, entrevistas ou distribuição de notícias ou outra informação de interesse coletivo. O trabalho do jornalista é chamado jornalismo. Um jornalista pode trabalhar com questões gerais ou especializar-se em determinadas áreas. No entanto, a maioria dos jornalistas tendem a se especializar, e cooperando com outros jornalistas, produzir publicações que abrangem muitos tópicos. [ 1 ] Por exemplo, um jornalista esportivo cobre notícias dentro do mundo dos esportes, mas este jornalista pode ser uma parte de um jornal que cobre diversos temas. O exercício do Jornalismo é privativo de jornalista. Entre as áreas em que o jornalista trabalha estão o...
Read more