Javascript 或 php 调用以加载/编辑同一页面内的 html 表行数据

Question

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

• 标记单个 html td 内容并使用 java 以表格形式读取它们
• 从 php 回调操作并以表格形式加载它们

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

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


}

尽管我的尝试没有成功让 Javascript 识别行值。

无论如何都能够调用static 数据加载 - 例如将其设置为等于第 10 行内容，即 value='"+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'] 以使其动态地选择行。 基本上我认为它应该简单地放在 function 参数 () 中，但如果是这样，我的语法没有成功。 有人有一些建议来实现它吗？

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

Answer 1

您必须将 onclick 语句更改为：

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

因为如果您错过 PHP var 周围的引号，JavaScript 会读取类似 var 而不是字符串的值。

在 function 你必须使用

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

其他方式将在您的 function 中传递this ， this指的是当前按钮，即单击，然后使用.closest("tr").querySelectorAll("span[id*=rubricaCONTACT]").forEach...循环所有span 标签在您的 tr 内，然后在循环内 append 在某个变量中新输入，然后将它们添加到您的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>