如何使用洗掉按鈕洗掉具有各自動態ID的動態創建表的行-有解無憂

請使用運行代碼片段按鈕查看結果，您必須在輸入中輸入行名稱，然后單擊添加按鈕，該按鈕將動態創建表格行，每行包含第五列中的洗掉按鈕。行和按鈕都將具有動態id，使用下面提到的代碼var tn=0增加每一行和每個洗掉按鈕 id我創建了洗掉按鈕 onclick 函式，如：1tn DelButton.onclick = function (){}; 如何撰寫一個函式，如果用戶單擊該行上的洗掉按鈕，而不是僅單擊該行及其所有元素（包括該按鈕洗掉），同樣，如果有人使用輸入和添加按鈕創建了更多行，則單擊洗掉按鈕將僅洗掉其各自的行。此外，它在洗掉第二行后會引發錯誤，我知道由于動態 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>

uj5u.com熱心網友回復：

您必須識別事件按下的按鈕才能知道要洗掉哪一行。為此，您可以使用event.target（=> 這是您的按鈕元素）。當您訪問時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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/480279.html

標籤：javascript html 功能 dom

上一篇：在嵌套回應中設定狀態

下一篇：TailwindCSS安裝在M1Mac上不起作用