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>