文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用JavaScript querySelector()编辑表行？

问如何使用JavaScript querySelector()编辑表行？
EN

Stack Overflow用户

提问于 2021-07-18 14:13:24

回答 2查看 342关注 0票数 0

我正在尝试编辑表中的数据。当按下“编辑”按钮时，它将弹出一个输入字段来编辑所选行中的新值，我尝试使用下面的代码，但按下“编辑”按钮时没有任何变化。

这是我的代码：

const editRow = (index = "x") => {
  const tdTable = document.querySelectorAll("table > tbody > tr");

  const newRow = `
    <tr>
      <td>
        <input type="text" name="name" />
      </td>
      <td>
        <input type="text" name="umur" />
      </td>
      <td>
        <input type="text" name="address" />
      </td>
      <td colspan = 2>
        <span class="btn btn-info" onClick="saveData()">Save</span>
      </td>
    </tr>`;

  tdTable.innerHTML = newRow;
};

以下是当我按下编辑按钮时，浏览器中的表的样子。

javascript

html

Stack Overflow用户

回答已采纳

发布于 2021-07-18 15:44:39

您需要做一些事情才能将输入值返回到原始的<td>中。下面我准备了一个MCVE (最小的、完整的和可行的示例)，展示了如何实现它：

const tb=document.querySelector("tbody"), edidel="<button>Edit</button> <button>Delete</button>";
// prepare the page first (fill in some sample data):
tb.innerHTML= [[1,"jansen",35,"medan"],
               [2,"Alfa",31,"jakarta"],
               [3,"joko",10,"solo"],
               [4,"eko cahyonto",20,"NTB"]].map(r=>
  "<tr><td>"+r.join("</td><td>")+"</td><td>"+edidel+"</td></tr>" ).join("\n");
  
tb.onclick=ev=>{
  [...ev.target.closest("tr").children].forEach((td,i)=>{ const btn=ev.target.textContent;
    if (btn==="Edit") 
      td.innerHTML=i<4?'<input type="text" value="'+td.textContent+'" data-orig="'+td.textContent+'">'
                      :'<button>Save</button> <button>Cancel</button>';
    else if (["Save","Cancel"].includes(btn))
      td.innerHTML=i<4?(btn==="Save"?td.children[0].value:td.children[0].dataset.orig)
                      :edidel;    
  })
}

input {width:50px}

<table>
<thead><tr><th>No</th><th>Nama</th><th>Umur</th><th>Alamat</th><th>CRUD</th></thead>
<tbody></tbody>
</table>

前7行代码简单地准备了一个我们可以工作的小表。然后，实际脚本从页面的第一个<tbody>元素(碰巧是我们的测试表)上的“委托单击事件附件”开始。这意味着，我们可以添加或删除表记录，不必再担心将事件附加到新创建的buton元素。

只有当单击元素的´.textContent`为“编辑”、“保存”或“取消”(“删除”按钮的操作尚未定义，但可以轻松添加)时，才会发生操作。

根据实际单击的按钮，在执行按钮之前直接对<TD>元素执行一些操作：

当进入“编辑”-mode时，每个<td>的td.textContent被复制到一个新创建的<input type="text">元素中，并保存在它的data-orig属性中，以防我们以后单击"Cancel“。
"Save“将每个<td>的第一个子元素( <input>元素)的<input>复制回其父td.innerHTML属性。
如果单击"Cancel“，<input>的.dataset.orig值将返回到td.innerHTML属性中。

票数 1

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68429919

复制

相似问题

问如何使用JavaScript querySelector()编辑表行？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript querySelector()编辑表行？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript querySelector()编辑表行？
EN