Как получить данные с полей html(php mysql) в js

173

05 мая 2019, 10:20

Можно ли как то корректно получить данные с таблицы строки которой выводятся циклом php из mysql?

что бы при нажатии на кнопку в столбце выводились значения (из этой строки)

index.php

<? 
echo "<table>";
$sqlusers = 'SELECT * FROM users';
foreach ($conn->query($sqlusers) as $rowusers) {
    echo "<tr>
              <td><span id='name' name='name'>".$rowusers['name']."</span></td>
              <td><span id='id' name='id'>".$rowusers['id']."</span></td>
              <td><span id='email' name='email'>".$rowusers['email']."</span></td>
              <td><input type='button' value='getValues' onclick='getvalues()'></td>
         </tr>";
}
echo "</table>";
?>
<script type="text/javascript">
    function getValues(){ 
    alert(id);
    alert(name);
    alert(email);
}
</script>

вывод например в алерты, мне только логика получения не понятна

пробовал так, результат тот что надо но думаю это костыли, и так не правильно

<? echo "<table>";
$sqlusers = 'SELECT * FROM users';
foreach ($conn->query($sqlusers) as $rowusers) {
                        echo "
                            <tr>
                                <td><span id='name' name='sfname".$rowusers['id']."'>".$rowusers['name']."</span></td>
                                <td><span id='id' name='sfid".$rowusers['id']."'>".$rowusers['id']."</span></td>
                                <td><span id='email' name='sfemail".$rowusers['id']."'>".$rowusers['email']."</span></td>
                                <td><input type='button' value='getValues' onclick='getValues(".$rowusers['id'].")'></td>
                            </tr>
                        ";
}
echo "</table>";
?>
<script type="text/javascript">
function getValues(vak) {
    var name = document.getElementsByName('sfname'+vak)[0].value;
    var id = document.getElementsByName('sfid'+vak)[0].value;
    var email = document.getElementsByName('sfemail'+vak)[0].value;
    alert(id);
    alert(name);
    alert(email);
}
</script>

Answer 1

Можно вытащить текущую нажатую кнопку через event.target;

Посмотрите пример.

Но у него есть минус - сильная зависимость от структуры html.

function getValue(event) { 
  const button = event.target; 
  const [val1, val2] = [...button.parentElement.parentElement.children].map(m => m.innerText); 
  console.log(val1, val2); 
}

<table> 
  <tr> 
    <td>11</td> 
    <td>12</td> 
    <td><button onclick='getValue(event)'>get</button></td> 
  </tr> 
  <tr> 
    <td>21</td> 
    <td>22</td> 
    <td><button onclick='getValue(event)'>get</button></td> 
  </tr> 
  <tr> 
    <td>31</td> 
    <td>32</td> 
    <td><button onclick='getValue(event)'>get</button></td> 
  </tr> 
</table>

Лучше использовать уникальный id.

function getValue(id) { 
  const row = document.querySelector(`.myTable tr[id="${id}"]`); 
  const [val1, val2] = [...row.children].map(m => m.innerText); 
  console.log(val1, val2); 
}

<table class='myTable'> 
  <tr id='1'> 
    <td>11</td> 
    <td>12</td> 
    <td><button onclick='getValue(1)'>get</button></td> 
  </tr> 
  <tr id='2'> 
    <td>21</td> 
    <td>22</td> 
    <td><button onclick='getValue(2)'>get</button></td> 
  </tr> 
  <tr id='3'> 
    <td>31</td> 
    <td>32</td> 
    <td><button onclick='getValue(3)'>get</button></td> 
  </tr> 
</table>

Answer 2

ID - уникальный аттрибут для элемента и лучше отталкиваться либо от его уникального значения, либо использовать другие способы для получения нужных данных.

Можно попробовать так:

<table border="1"> 
<tr> 
  <td class="id">10</td> 
  <td class="name">John Smith</td> 
  <td class="email">john@smith.com</td> 
  <td><input type="button" value="show data" onclick="showData(this);" /></td> 
</tr> 
<tr> 
  <td class="id">20</td> 
  <td class="name">Adams Bar</td> 
  <td class="email">adams@bar.com</td> 
  <td><input type="button" value="show data" onclick="showData(this);" /></td> 
</tr> 
</table> 
<script type="text/javascript"> 
<!-- 
 
function showData(el){ 
  var parentTR = findAncestor(el, 'tr'); 
  alert( 
  	findTextOfChildElByClassName(parentTR, 'id') + " " + 
  	findTextOfChildElByClassName(parentTR, 'name') + " " + 
        findTextOfChildElByClassName(parentTR, 'email') 
  ); 
} 
 
function findAncestor (el, sel) { 
    while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel.toLowerCase()))); 
    return el; 
} 
 
function findTextOfChildElByClassName(el, className){ 
  var childEl = null; 
   
  for (var i = 0; i < el.childNodes.length; i++) { 
      if (el.childNodes[i].className == className.toLowerCase()) { 
        childEl = el.childNodes[i]; 
        break; 
      }         
  } 
   
  return childEl.innerText; 
} 
//--> 
</script>

В данном случае привязку делал к аттрибуту class.