// * Removes a specific record, and decrements all records after by 1
function removeRecord(evt) {
let button = evt.currentTarget;
let value = parseInt(button.value);
let row = button.parentElement.parentElement.parentElement;
removedRecords.push(row.seqNum);
if (recordCount == 1) {
resetRecords(true, true);
return;
}
row.remove();
for (let i = value + 1; i <= recordCount; i++) {
let btn = document.getElementById("removeRecordBtn" + i);
let currRow = btn.parentElement.parentElement.parentElement;
// * Decrements all records after by 1:
btn.id = "removeRecordBtn" + (i - 1);
btn.value = i - 1;
currRow.querySelector("#recordCount").innerHTML = i - 1;
currRow.id = "recordRow" + (i - 1);
let selectTkt = document
.getElementById("tktBody")
.querySelector(".selected")
.querySelector("#tktNum").innerHTML; // * the selected ticket
let selectSeqNum = document
.getElementById("tktBody")
.querySelector(".selected")
.querySelector("#tktNumSeqNum").innerHTML; // * the selected ticket seqNum
console.log(selectSeqNum);
if (btn.clicked == true) {
// * ---Delete Row from DB if the minus button is click on a row-----
// prettier-ignore
callDB(
"DELETE FROM TABLE WHERE (TICKET_NUM = '" + selectTkt + "' AND SEQ_NUM = '" + selectSeqNum + "';)"
);
}
}
recordCount--;
}<!-- * Main Record Table *-->
<div id="steptablecontainer">
<div id="steptable_wrapper" class="dataTables_wrapper no-footer">
<table id="steptable" class="compact cell-border no-footer dataTable row-border"
role="grid">
<thead id="recordTableHead">
<tr role="row">
<!-- * Names For Each Container *-->
<th class="noncomponentswidth sorting_disabled" tabindex="0"
aria-controls="steptable" rowspan="1" colspan="1" aria-label=""
style="width: 25px; max-width: 25px;"></th>
<th class="noncomponentswidth sorting_disabled" tabindex="0"
aria-controls="steptable" rowspan="1" colspan="1" aria-label=""
style="width: 50px; background-image: none; max-width: 25px;">Record</th>
<th class="componentellipsis sorting_disabled" tabindex="0"
aria-controls="steptable" rowspan="1" colspan="1" aria-label="Component"
style="width: 200px; max-width: 50px;">Type</th>
<th class="noncomponentswidth sorting_disabled" tabindex="0"
aria-controls="steptable" rowspan="1" colspan="1" aria-label="Type"
style="width: 125px;">Name</th>
<th class="noncomponentswidth sorting_disabled" tabindex="0"
aria-controls="steptable" rowspan="1" colspan="1" aria-label="Test"
style="width: 100px; max-width: 50px;">Business</th>
<th class="noncomponentswidth sorting_disabled" tabindex="0"
aria-controls="steptable" rowspan="1" colspan="1" aria-label="Dev"
style="width: 200px; max-width: 50px;">Project</th>
<th class="noncomponentswidth sorting_disabled" tabindex="0"
aria-controls="steptable" rowspan="1" colspan="1" aria-label="Type"
style="width: 150px; max-width: 125px;">Deployer Candidate</th>
<th class="noncomponentswidth sorting_disabled" tabindex="0"
aria-controls="steptable" rowspan="1" colspan="1" aria-label="Type"
style="width: 400px; max-width: 200px; overflow: hidden;">Description
</th>
</tr>
</thead>
<!-- * Sample Record (Cloned then changed) *-->
<tbody id="recordRow0" style="display: none; border: 10px;" class="recordRow">
<tr role="row" class="" data-true-step="1">
<td class="noncomponentswidth">
<button class="readyonlyhidden" id="removeRecordBtn0" title="Remove Record"
value="0">
<span><i style="font-size:18px;" class="fa fa-minus-circle"></i></span>
</button>
</td>
<!-- * Record intializing *-->
<td class="noncomponentswidth" id="recordCount">1</td>
<!-- * Drop down for the obj_type *-->
<div id="container">
<td class="componentellipsis" id="recordTypeWrapper">
<select id="OBJ_TYPE" class="vcheck">
<option value="TP">TP</option>
<option value="Workflow">Workflow</option>
<option value="Package">Package</option>
</select>
</td>
</div>
<!-- * Container for Obj Name *-->
<td class="noncomponentswidth" id="recordObjName">
<p>
<!-- * Input for Obj Name *-->
<input type="text" id="OBJ_NAME" name="Object Name" placeholder=""
class="vcheck" required minlength="8">
</p>
</td>
<!-- * Deployer Business *-->
<td class="noncomponentswidth" id="recordDevName">
<input type="text" id="DEPLOYER_BUSINESS" name="Business Name"
placeholder="" style="display: none;">
<select id="DEPLOYER_BUSINESS" class="vcheck">
<!-- * Picklist for TP *-->
<option value="APPM">APPM</option>
<option value="Asia">Asia</option>
<option value="CorporateAP">CorporateAP</option>
<option value="CorporateCredit">CorporateCredit</option>
<option value="CorporateEHS">CorporateEHS</option>
<option value="CorporateFinance">CorporateFinance</option>
<option value="CorporateFinancialServices">
CorporateFinancialServices
</option>
<option value="CorporateHR">CorporateHR</option>
<option value="CorporateIT">CorporateIT</option>
<option value="CorporateLegal">CorporateLegal</option>
<option value="CorporateLogistics">CorporateLogistics</option>
<option value="CorporateTax">CorporateTax</option>
<option value="EMEAPackaging">EMEAPackaging</option>
<option value="EMEAPapers">EMEAPapers</option>
<option value="GCF">GCF</option>
<option value="MillManufacturing">MillManufacturing</option>
<option value="MillSupport">MillSupport</option>
<option value="NAIPGContainer">NAIPGContainer</option>
<option value="NAIPGContainerboard">NAIPGContainerboard</option>
<option value="NAIPGRecycling">NAIPGRecycling</option>
<option value="NAP">NAP</option>
<option value="SouthAmerica">SouthAmerica</option>
<option value="zConnectivity">zConnectivity</option>
<option value="zSylvamo">zSylvamo</option>
</select>
</td>
<!-- * Input for Deployer Project *-->
<td class="noncomponentswidth" id="recordProjectName">
<input type="text" id="DEPLOYER_PROJECT" name="Project Name" class="vcheck"
placeholder="">
</td>
<!-- * Deployer_Candidate *-->
<td class="noncomponentswidth" id="titleDeployerCandidate">
<select id="DEPLOYER_CANDIDATE" class="vcheck">
<!-- * Picklist for TP *-->
<option value="PRODJ (wm53a/b/c 10000)">PRODJ (wm53a/b/c 10000)
</option>
<option value="PRODR (wm53a/b/c 12000)">PRODR (wm53a/b/c 12000)
</option>
<option value="PRODXA (wm54a/b/c 21000)">PRODXA (wm54a/b/c
21000)
</option>
<option value="PRODXS (wm54a/b/c 20000)">PRODXS (wm54a/b/c
20000)
</option>
<option value="PRODXE (wm53a/b/c 11000)">PRODXE (wm53a/b/c
11000)
</option>
<option value="-------------------">-------------------</option>
<option value="PRODAD1 (wm54a/b/c 60000)">PRODAD1 (wm54a/b/c 60000)
</option>
<option value="PRODAD2 (wm54a/b/c 61000)">PRODAD2 (wm54a/b/c 61000)
</option>
<option value="-------------------">-------------------</option>
<option value="MAPGRP1 (wm52a/b/c 40k/41k/42k)">MAPGRP1
(wm52a/b/c
40k/41k/42k)</option>
</select>
</td>
<!-- * Input for Description *-->
<td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
<input type="text" id="DESCRIPTION" name="Description" placeholder=""
class="vcheck" style="resize: vertical; width: 100%; height: 4.5em;"
</td>
</tr>
</tbody>
</table>
<!-- * Add & Remove buttons *-->
<div class="btn-group2">
<div id="addRemoveButons" class="dt-buttons" style="visibility:hidden">
<button class="readonlyhidden" tabindex="0" aria-controls="steptable" type="button"
id="recordAddBtn2" title="Add new record" style="display: inline-block;">
<span><i class="fa fa-plus-circle"></i></span>
</button>
<button class="readonlyhidden" tabindex="0" aria-controls="steptable" type="button"
id="recordAddBtn" title="Add new record">
<span><i class="fa fa-plus-square"></i></span>
</button>
<button class="readonlyhidden" tabindex="0" aria-controls="steptable" type="button"
id="recordRemoveBtn" title="Remove last record" style="display: none">
<span><i class="fas fa-trash-alt"></i></span>
</button>
</div>
</div>
</div>
</div>因此，我有一个表，你可以添加或减去行取决于按钮点击。我想从数据库中删除的按钮，如果减号按钮是点击例如行。我有按钮，以增加自己与每一个额外的行被添加。我怎么会得到的功能工作，所以如果用户点击第2行的减号按钮，其余的脚本被执行。如何使用按钮单击在表中设置if条件？
1条答案
按热度按时间bq3bfh9z1#
要在触发单击事件时执行函数，请将以下内容添加到按钮的属性中：
现在，
onclick和其他事件属性已经不再使用了。EventTarget.addEventListener()正在使用。然而，对于您遇到的问题，我会说onclick是一个更好的解决方案。https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener