当前位置： 文江博客话题详情

如何使用删除按钮删除具有各自动态ID的动态创建表的行

发布于 2025-01-31 13:53:00 字数 3769 浏览 3 评论 0原文

请使用运行代码段按钮查看结果 您必须在输入中输入行名，然后单击“添加”按钮，该按钮将动态创建表行每行包含第五列中的删除按钮。行和按钮都将具有动态id，var tn = 0使用1使用来增加每一行，每个删除按钮ID TN ++在下面提到的代码中，我创建了删除按钮onclick函数，例如：delbutton.onclick = function（）{}; 如何编写一个函数，如果用户单击行上的删除按钮，而不是仅使用其所有元素（包括该按钮删除）的行，同样，如果有人使用输入和添加按钮创建了更多的行，则单击删除按钮只会删除其各自的行。此外，它在删除第二行后会引发错误，我知道，由于我想知道如何编写函数以删除包含动态ID的动态元素的动态ID，并使用动态创建的按钮包含动态ID，其中包含动态ID， 。请使用以下代码进行指南：

var tn = 0;

function addTermrows() {
  tn++;

  let TermNameInput = document.getElementById("TermNameValue");
  TNIValue = TermNameInput.value;

  const MainTbody = document.getElementById("mainTBody");

  const CreateTR = document.createElement('tr');
  CreateTR.id = "CreateTR" + tn;

  const tdOne = document.createElement('td');
  tdOne.id = "tdOne" + tn;
  tdOne.className = 'one ps-3';

  const pOne = document.createElement('p');
  pOne.id = "pOne" + tn;
  pOne.className = 'mb-0';
  pOne.innerText = "0" + tn;

  const tdTwo = document.createElement('td');
  tdTwo.id = "tdTwo" + tn;
  tdTwo.className = 'two';

  const pTwo = document.createElement('p');
  pTwo.id = "pTwo" + tn;
  pTwo.className = 'mb-0';
  pTwo.innerText = TNIValue;

  const tdThree = document.createElement('td');
  tdThree.id = "tdThree" + tn;
  tdThree.className = 'three';

  const tdFour = document.createElement('td');
  tdFour.id = "tdFour" + tn;
  tdFour.className = 'four';

  const tdFive = document.createElement('td');
  tdFive.id = "tdFive" + tn;
  tdFive.className = 'text-end pe-3 five';

  const DelButton = document.createElement('button');
  DelButton.id = "DelButton" + tn;
  DelButton.setAttribute("type", "button");
  DelButton.setAttribute("cursor", "pointer");
  DelButton.setAttribute("runat", "server");
  //DelButton.setAttribute("onclick", "DelRow");
  DelButton.className = 'btn btn-sm btn-del-action fw-bold text-danger';
  DelButton.innerText = "Delete";
  DelButton.onclick = function() {
    var delRow = document.getElementById("CreateTR" + tn);
    delRow.remove(); //this works for only one row but if Add multiple rows one by one using add button then delete button doesn't work proper
  };

  tdOne.appendChild(pOne);
  tdTwo.appendChild(pTwo);
  tdFive.appendChild(DelButton);
  CreateTR.appendChild(tdOne);
  CreateTR.appendChild(tdTwo);
  CreateTR.appendChild(tdThree);
  CreateTR.appendChild(tdFour);
  CreateTR.appendChild(tdFive);
  MainTbody.appendChild(CreateTR);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/js/bootstrap.bundle.min.js"></script>

<div class="col-4">
  <input class="form-control bgTN ps-4 pe-4 pt-2 pb-2 mb-2" placeholder="Enter Here" id="TermNameValue" type="text" name="grade" />
</div>
<button class="btn btn-primary text-white ps-3 pe-4" id="btnToaddTermRows" onclick="addTermrows()">Add</button>

<table class="table table-hover table-responsive spacing-table">
  <thead class="rounded-3">
    <tr>
      <th scope="col" class="col-1 ps-3">S No/</th>
      <th scope="col" class="col-2">Input Value</th>
      <th scope="col" class="col-7"></th>
      <th scope="col" class="col-1"></th>
      <th scope="col" class="col-1 pe-5 text-end">Action</th>
    </tr>
  </thead>
  <tbody id="mainTBody">

  </tbody>

原文

Please see the result by using Run Code Snippet Button
Where you have to enter Row Name in the input and click on add button which will dynamically create table rows each row contains delete button in the fifth column. Both the Rows and Buttons will have dynamic id, var tn=0 is incrementing each row and each delete button id with 1 using tn++ in the code mentioned below I have created delete button onclick function like : DelButton.onclick = function (){};
How to write a function where if user click on delete button on the row than only that row with all of its elements including that button delete, Similarly, if someone have created more rows using input and add button then clicking on delete button will delete only its own respective row. Also it throws an error after deleting the second row and I know that because of the dynamic Id that is what I want to know how to write a function to delete a dynamic element containing dynamic id with increment using dynamically created button containing dynamic id with increment. Please guide using the code below:

var tn = 0;

function addTermrows() {
  tn++;

  let TermNameInput = document.getElementById("TermNameValue");
  TNIValue = TermNameInput.value;

  const MainTbody = document.getElementById("mainTBody");

  const CreateTR = document.createElement('tr');
  CreateTR.id = "CreateTR" + tn;

  const tdOne = document.createElement('td');
  tdOne.id = "tdOne" + tn;
  tdOne.className = 'one ps-3';

  const pOne = document.createElement('p');
  pOne.id = "pOne" + tn;
  pOne.className = 'mb-0';
  pOne.innerText = "0" + tn;

  const tdTwo = document.createElement('td');
  tdTwo.id = "tdTwo" + tn;
  tdTwo.className = 'two';

  const pTwo = document.createElement('p');
  pTwo.id = "pTwo" + tn;
  pTwo.className = 'mb-0';
  pTwo.innerText = TNIValue;

  const tdThree = document.createElement('td');
  tdThree.id = "tdThree" + tn;
  tdThree.className = 'three';

  const tdFour = document.createElement('td');
  tdFour.id = "tdFour" + tn;
  tdFour.className = 'four';

  const tdFive = document.createElement('td');
  tdFive.id = "tdFive" + tn;
  tdFive.className = 'text-end pe-3 five';

  const DelButton = document.createElement('button');
  DelButton.id = "DelButton" + tn;
  DelButton.setAttribute("type", "button");
  DelButton.setAttribute("cursor", "pointer");
  DelButton.setAttribute("runat", "server");
  //DelButton.setAttribute("onclick", "DelRow");
  DelButton.className = 'btn btn-sm btn-del-action fw-bold text-danger';
  DelButton.innerText = "Delete";
  DelButton.onclick = function() {
    var delRow = document.getElementById("CreateTR" + tn);
    delRow.remove(); //this works for only one row but if Add multiple rows one by one using add button then delete button doesn't work proper
  };

  tdOne.appendChild(pOne);
  tdTwo.appendChild(pTwo);
  tdFive.appendChild(DelButton);
  CreateTR.appendChild(tdOne);
  CreateTR.appendChild(tdTwo);
  CreateTR.appendChild(tdThree);
  CreateTR.appendChild(tdFour);
  CreateTR.appendChild(tdFive);
  MainTbody.appendChild(CreateTR);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/js/bootstrap.bundle.min.js"></script>

<div class="col-4">
  <input class="form-control bgTN ps-4 pe-4 pt-2 pb-2 mb-2" placeholder="Enter Here" id="TermNameValue" type="text" name="grade" />
</div>
<button class="btn btn-primary text-white ps-3 pe-4" id="btnToaddTermRows" onclick="addTermrows()">Add</button>

<table class="table table-hover table-responsive spacing-table">
  <thead class="rounded-3">
    <tr>
      <th scope="col" class="col-1 ps-3">S No/</th>
      <th scope="col" class="col-2">Input Value</th>
      <th scope="col" class="col-7"></th>
      <th scope="col" class="col-1"></th>
      <th scope="col" class="col-1 pe-5 text-end">Action</th>
    </tr>
  </thead>
  <tbody id="mainTBody">

  </tbody>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

木落 2025-02-07 13:53:00

您必须识别事件按下您按下的按钮，以了解要删除哪一行。为此，您可以使用event.target（=＆gt;这是您的按钮元素）。当您访问event.target.id时，您只需分析即可找到匹配行。

var tn = 0;

function addTermrows() {
  tn++;

  let TermNameInput = document.getElementById("TermNameValue");
  TNIValue = TermNameInput.value;

  const MainTbody = document.getElementById("mainTBody");

  const CreateTR = document.createElement('tr');
  CreateTR.id = "CreateTR" + tn;

  const tdOne = document.createElement('td');
  tdOne.id = "tdOne" + tn;
  tdOne.className = 'one ps-3';

  const pOne = document.createElement('p');
  pOne.id = "pOne" + tn;
  pOne.className = 'mb-0';
  pOne.innerText = "0" + tn;

  const tdTwo = document.createElement('td');
  tdTwo.id = "tdTwo" + tn;
  tdTwo.className = 'two';

  const pTwo = document.createElement('p');
  pTwo.id = "pTwo" + tn;
  pTwo.className = 'mb-0';
  pTwo.innerText = TNIValue;

  const tdThree = document.createElement('td');
  tdThree.id = "tdThree" + tn;
  tdThree.className = 'three';

  const tdFour = document.createElement('td');
  tdFour.id = "tdFour" + tn;
  tdFour.className = 'four';

  const tdFive = document.createElement('td');
  tdFive.id = "tdFive" + tn;
  tdFive.className = 'text-end pe-3 five';

  const DelButton = document.createElement('button');
  DelButton.id = "DelButton" + tn;
  DelButton.setAttribute("type", "button");
  DelButton.setAttribute("cursor", "pointer");
  DelButton.setAttribute("runat", "server");
  //DelButton.setAttribute("onclick", "DelRow");
  DelButton.className = 'btn btn-sm btn-del-action fw-bold text-danger';
  DelButton.innerText = "Delete";
  DelButton.onclick = function(event) {
    //parse the id of the row from the id
    var rowNr = event.target.id.substr("DelButton".length, event.target.id.length);
    //get the actual row element
    var delRow = document.getElementById("CreateTR" + rowNr);
    delRow.remove(); 
  };

  tdOne.appendChild(pOne);
  tdTwo.appendChild(pTwo);
  tdFive.appendChild(DelButton);
  CreateTR.appendChild(tdOne);
  CreateTR.appendChild(tdTwo);
  CreateTR.appendChild(tdThree);
  CreateTR.appendChild(tdFour);
  CreateTR.appendChild(tdFive);
  MainTbody.appendChild(CreateTR);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/js/bootstrap.bundle.min.js"></script>

<div class="col-4">
  <input class="form-control bgTN ps-4 pe-4 pt-2 pb-2 mb-2" placeholder="Enter Here" id="TermNameValue" type="text" name="grade" />
</div>
<button class="btn btn-primary text-white ps-3 pe-4" id="btnToaddTermRows" onclick="addTermrows()">Add</button>

<table class="table table-hover table-responsive spacing-table">
  <thead class="rounded-3">
    <tr>
      <th scope="col" class="col-1 ps-3">S No/</th>
      <th scope="col" class="col-2">Input Value</th>
      <th scope="col" class="col-7"></th>
      <th scope="col" class="col-1"></th>
      <th scope="col" class="col-1 pe-5 text-end">Action</th>
    </tr>
  </thead>
  <tbody id="mainTBody">

  </tbody>

You have to identify the button you pressed by the event to know which row to delete. To do that, you can use event.target (=> this is your button element). When you access the event.target.id, you can simply parse it to find the matching row.

var tn = 0;

function addTermrows() {
  tn++;

  let TermNameInput = document.getElementById("TermNameValue");
  TNIValue = TermNameInput.value;

  const MainTbody = document.getElementById("mainTBody");

  const CreateTR = document.createElement('tr');
  CreateTR.id = "CreateTR" + tn;

  const tdOne = document.createElement('td');
  tdOne.id = "tdOne" + tn;
  tdOne.className = 'one ps-3';

  const pOne = document.createElement('p');
  pOne.id = "pOne" + tn;
  pOne.className = 'mb-0';
  pOne.innerText = "0" + tn;

  const tdTwo = document.createElement('td');
  tdTwo.id = "tdTwo" + tn;
  tdTwo.className = 'two';

  const pTwo = document.createElement('p');
  pTwo.id = "pTwo" + tn;
  pTwo.className = 'mb-0';
  pTwo.innerText = TNIValue;

  const tdThree = document.createElement('td');
  tdThree.id = "tdThree" + tn;
  tdThree.className = 'three';

  const tdFour = document.createElement('td');
  tdFour.id = "tdFour" + tn;
  tdFour.className = 'four';

  const tdFive = document.createElement('td');
  tdFive.id = "tdFive" + tn;
  tdFive.className = 'text-end pe-3 five';

  const DelButton = document.createElement('button');
  DelButton.id = "DelButton" + tn;
  DelButton.setAttribute("type", "button");
  DelButton.setAttribute("cursor", "pointer");
  DelButton.setAttribute("runat", "server");
  //DelButton.setAttribute("onclick", "DelRow");
  DelButton.className = 'btn btn-sm btn-del-action fw-bold text-danger';
  DelButton.innerText = "Delete";
  DelButton.onclick = function(event) {
    //parse the id of the row from the id
    var rowNr = event.target.id.substr("DelButton".length, event.target.id.length);
    //get the actual row element
    var delRow = document.getElementById("CreateTR" + rowNr);
    delRow.remove(); 
  };

  tdOne.appendChild(pOne);
  tdTwo.appendChild(pTwo);
  tdFive.appendChild(DelButton);
  CreateTR.appendChild(tdOne);
  CreateTR.appendChild(tdTwo);
  CreateTR.appendChild(tdThree);
  CreateTR.appendChild(tdFour);
  CreateTR.appendChild(tdFive);
  MainTbody.appendChild(CreateTR);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/js/bootstrap.bundle.min.js"></script>

<div class="col-4">
  <input class="form-control bgTN ps-4 pe-4 pt-2 pb-2 mb-2" placeholder="Enter Here" id="TermNameValue" type="text" name="grade" />
</div>
<button class="btn btn-primary text-white ps-3 pe-4" id="btnToaddTermRows" onclick="addTermrows()">Add</button>

<table class="table table-hover table-responsive spacing-table">
  <thead class="rounded-3">
    <tr>
      <th scope="col" class="col-1 ps-3">S No/</th>
      <th scope="col" class="col-2">Input Value</th>
      <th scope="col" class="col-7"></th>
      <th scope="col" class="col-1"></th>
      <th scope="col" class="col-1 pe-5 text-end">Action</th>
    </tr>
  </thead>
  <tbody id="mainTBody">

  </tbody>

回复 原文
~没有更多了~

关于作者

谈场末日恋爱

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

佚名

文章 0 评论 0

今天

文章 0 评论 0

゛时过境迁

文章 0 评论 0

达拉崩吧

文章 0 评论 0

呆萌少年

文章 0 评论 0

孤者何惧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文