Javascript 或 php 调用同一页内的 load/edit html table 行数据

Question

我创建了 html table 从 SQL 到 PHP 的阅读记录，并设法执行添加、编辑和删除操作。无论如何，我的编辑脚本会加载一个空白页面，而我宁愿在 sama 页面中进行。当然可以尝试 CRUD，但这似乎是我的知识技能，所以我喜欢使用 Java 以页面中已经显示的形式传递它们（我用它来添加新数据）。我想出了至少两种方法：

标记单个 html td 内容并使用 java 以
从 php 回调操作并将它们加载到表单中

为了避免 PHP/SQL 可能更慢的调用，我更喜欢第一个选项。所以创建了一个这样的 table 结构，并尝试使用变量 $row['id_contact'] 匹配来自 SQL table 的唯一 ID 在编辑按钮中的方式：

while($row = mysqli_fetch_array($result))   {

echo "<tr>";
echo "<td><span id='rubricaCONTACTid_contact" . $row['id_contact'] . "'>" . $row['id_contact'] . "</span></td>";
echo "<td><span id='rubricaCONTACTname" . $row['id_contact'] . "'>" . $row['name'] . "</span></td>";
echo "<td><span id='rubricaCONTACTsurname" . $row['id_contact'] . "'>" . $row['surname'] . "</span></td>";
echo "<td><span id='rubricaCONTACTtel1" . $row['id_contact'] . "'>" . $row['tel1'] . "</span></td>";
echo "<td><span id='rubricaCONTACTtel2" . $row['id_contact'] . "'>" . $row['tel2']. "</span></td>";
echo "<td><span id='rubricaCONTACTmail" . $row['id_contact'] . "'>" . $row['mail'] . "</span></td>";
echo "<td><span id='rubricaCONTACTorganization" . $row['id_contact'] . "'>" . $row['organization'] . "</span></td>";
echo "<td> <button onclick='loadDATAtoCHANGE(" . $row['id_contact'] . ");'>edit</button></td>";
echo "<td> <a href=DELETEcontact/removeCONTACT.php?id=" . $row['id_contact'] . " \">&#9746;</a></td></td>";
echo "</tr>";


}

尽管我的尝试没有成功使 Java脚本识别行值。

总之能够调用静态数据加载 - 例如将其设置为等于第 10 行内容，即值='"+document.getElementById('rubricaCONTACTname10').innerHTML+"'

function loadDATAtoCHANGE()
{
document.getElementById("rubricaCONTACTname").innerHTML = 
"<div class='tooltipLEFT'>&#x1F6C8;<span class='tooltiptext'>nome</span></div><input type='text' name='save1' id='enteringCONTACTname' placeholder='name' onkeyup='updateCONTACTname()' value='"+document.getElementById('rubricaCONTACTname10').innerHTML+"' /></br>";
}

事实上仍然不明白如何在 java 调用参数中传递 $row['id_contact'] 以使其动态选择行。基本上我认为它应该简单地放在函数参数 () 中，但如果是这样，我的语法就不行了。有人有什么建议可以实现吗？

如果您找到任何其他解决方案，无论如何都会给它机会；）

Answer 1

您必须将您的 onclick 语句更改为：

echo "<td> <button onclick='loadDATAtoCHANGE(\'" . $row['id_contact'] . "\')'>

因为如果您错过了 PHP var 周围的引号，JavaScript 会像 var 而不是像 string 那样读取值。

在你必须使用的函数中

function loadDATAtoCHANGE(id) {
    let dataToChange = "rubricaCONTACTname"+id;
    document.getElementById(dataToChange).innerHTML = 
    "<div class='tooltipLEFT'>&#x1F6C8;<span class='tooltiptext'>nome</span></div><input type='text' name='save1' id='enteringCONTACTname' placeholder='name' onkeyup='updateCONTACTname(id)' value='"+document.getElementById(dataToChange).innerHTML+"' /></br>";
}

Answer 2

其他方法将在你的函数中传递 this，其中 this 指的是当前按钮，它是 click 然后使用 .closest("tr").querySelectorAll("span[id*=rubricaCONTACT]").forEach... 循环遍历你的 tr 中的所有 span 标签然后在内部循环中将新输入附加到某个变量中，然后将它们添加到 form 标记中。

您可以在 php 代码中进行更改 :

while($row = mysqli_fetch_array($result))   {
//you can give any name inside data-name..it will label and name="" for input
echo "<tr>";
echo "<td><span id='rubricaCONTACTid_contact" . $row['id_contact'] . "' data-name='id'>" . $row['id_contact'] . "</span></td>";
echo "<td><span id='rubricaCONTACTname" . $row['id_contact'] . "' data-name='name'>" . $row['name'] . "</span></td>";
echo "<td><span id='rubricaCONTACTsurname" . $row['id_contact'] . "' data-name='surname'>" . $row['surname'] . "</span></td>";
echo "<td><span id='rubricaCONTACTtel1" . $row['id_contact'] . "' data-name='tel1'>" . $row['tel1'] . "</span></td>";
echo "<td><span id='rubricaCONTACTtel2" . $row['id_contact'] . "' data-name='tel2' >" . $row['tel2']. "</span></td>";
echo "<td><span id='rubricaCONTACTmail" . $row['id_contact'] . "' data-name='email'>" . $row['mail'] . "</span></td>";
echo "<td><span id='rubricaCONTACTorganization" . $row['id_contact'] . "' data-name='organization'>" . $row['organization'] . "</span></td>";
echo "<td> <button onclick='loadDATAtoCHANGE(this);'>edit</button></td>";
echo "<td> <a href=DELETEcontact/removeCONTACT.php?id=" . $row['id_contact'] . " \">&#9746;</a></td></td>";
echo "</tr>";


}

演示代码 :

function loadDATAtoCHANGE(selector) {
  var htmls = "";
  //loop through spans...
  selector.closest("tr").querySelectorAll("span[id*=rubricaCONTACT]").forEach(function(el) {
    //append new inputs ...
    htmls += `<div class="form-group"><label>${el.getAttribute("data-name").toUpperCase()}</label><input type="text" name="${el.getAttribute("data-name")}" class="form-control" value="${el.textContent}"> </div>`
  })
  htmls += `<button type="submit" class="btn btn-primary">Submit</button>`
  document.getElementById("forms").innerHTML = htmls //add them inside form..
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table">
  <tr>
    <td><span id='rubricaCONTACTid_contact1' data-name="id">1</span></td>
    <td><span id='rubricaCONTACTname1' data-name="name">abc</span></td>
    <td><span id='rubricaCONTACTsurname1' data-name="surname">xyz</span></td>
    <td><span id='rubricaCONTACTtel11' data-name="tel1">kokok</span></td>
    <td><span id='rubricaCONTACTtel21' data-name="tel2">1345</span></td>
    <td><span id='rubricaCONTACTmail1' data-name="email">abc@gmail.com</span></td>
    <td><span id='rubricaCONTACTorganization1' data-name="org">somthinsghjk</span></td>
    <td> <button onclick='loadDATAtoCHANGE(this);'>edit</button></td>
    <td> <a href="DELETEcontact/removeCONTACT.php?id=1">&#9746;</a></td>
  </tr>
  <tr>
    <td><span id='rubricaCONTACTid_contact2' data-name="id">2</span></td>
    <td><span id='rubricaCONTACTname2' data-name="name">abc2</span></td>
    <td><span id='rubricaCONTACTsurname2' data-name="surname">xyz2</span></td>
    <td><span id='rubricaCONTACTtel12' data-name="tel1">kokok</span></td>
    <td><span id='rubricaCONTACTtel22' data-name="tel2">1345</span></td>
    <td><span id='rubricaCONTACTmail2' data-name="email">abc@gmail2.com</span></td>
    <td><span id='rubricaCONTACTorganization2' data-name="org">somthinsghjk</span></td>
    <td> <button onclick='loadDATAtoCHANGE(this);'>edit</button></td>
    <td> <a href="DELETEcontact/removeCONTACT.php?id=1">&#9746;</a></td>
  </tr>

</table>

<form id="forms">
  <!--data will come here-->
</form>

Javascript 或 php 调用同一页内的 load/edit html table 行数据

Javascript or php call to load/edit html table row data inside same page

javascript

php

html-table