当我单击
addasp.net :-
<div class="added_legs">
</div>
<div class="adjconditionadd">
</div>
<input class="btn btn-dark" id="btnaddlegs" onclick="AddLegs()" type="button" value="+ ADD">
jQuery :-
function AddLegs() {
BindAlgoStrategyBuilderTable("Data", "B", "C", "2024-01-01", "234", "11", "34455", "2");
}
function BindAlgoStrategyBuilderTable(txtsymbol, buysell, drpInstrument, txtExpDate, txtstrikeprice, txtqty, txtstockprices, first) {
var data = "";
var adjcondata = "";
data = `<div class="add-leg-form addlegform">
<div class="leg-head-mob">
<span class="icon-arrow"> <i class="fa fa-angle-down"></i></span>
<span class="text-green">${buysell}</span><span>${txtstrikeprice}</span><span>${drpInstrument}</span><span>${txtExpDate}</span>
</div>
<table class="table addLegs addLegstbl">
<tbody class="bg-gray">
<tr>
<td data-label="Action">
<div class="drpbox ">
<select class="form-control input_bg_white t-green t-bold pr:30">
${bysl}
</select>
<i class="fa fa-angle-down"></i>
</div>
</td>
<td data-label="Strike">
<div class="drpbox">
<select class="form-control input_bg_white t-bold pr:30">
${strikeprice}
</select>
<i class="fa fa-angle-down"></i>
</div>
</td>
<td data-label="Instrument">
<div class="drpbox">
<select class="form-control input_bg_white t-bold pr:30">
${inst}
</select>
<i class="fa fa-angle-down"></i>
</div>
</td>
<td data-label="Expiry">
<div class="drpbox">
<select class="form-control input_bg_white pr:30">
${expdate}
</select>
<i class="fa fa-angle-down"></i>
</div>
</td>
<td data-label="Qty" class="add-qt">
<div class="drpbox ">
<em class="fa-solid fa-minus"></em>
<input type="number" class="form-control input_bg_white t-light m-w:120 pr:30 pl:30" autocomplete="off" value="${txtqty}" step="${txtqty}" min="${txtqty}">
<em class="fa-solid fa-plus"></em>
</div>
</td>
<td data-label="Price">
<div class="drpbox">
<label class="form-control input_label text-center" for="" readonly="">
${txtstockprices}
</label>
</div>
</td>
<td data-label="Delete">
<div class="drpbox del_icon" onclick="deleteleg(this)">
<i class="fa-solid fa-xmark"></i>
</div>
</td>
</tr>
</tbody>
</table>
</div>`;
adjcondata = `<div class="row mt-2 addadjcondform">
<table class="addadjcondLegs addadjcondLegstbl">
<tbody>
<tr>
<td class="col-lg-12 col-md-12 col-xl-3">
<div class="form-inline c-inline">
<div class="inline-wrap text-16 align-content-stretch flex-wrap">
<div class="inline text-green adj-icon">
<span class="icon-arrow">
<i class="fa fa-angle-down"></i>
</span>
</div>
<div class="inline text-green">${buysell}</div>
<div class="inline">${txtstrikeprice}</div>
<div class="inline">${drpInstrument}</div>
<div class="inline">${txtExpDate}</div>
<span class="iconDel">
<div class="drpbox del_icon">
<i class="fa-solid fa-xmark"></i>
</div>
</span>
</div>
</div>
</td>
<td class="col-lg-12 col-md-12 col-xl-9">
<div class="adjst-wrap d-flex" style="width: fit-content">
<div class="body-adjust">
<div class="form-inline">
<div class="label-text">
<span class="mob-not">Adjustment</span>
<div class="drpbox">
<select class="form-control input_bg_white pr:30"
style="width: 210px;">
<option value="Add_Condition">Add Condition</option>
<option value="Sell">Sq Off Leg</option>
<option value="Sell">Sq Off Strategy</option>
<option value="Sell">Target/Stop Loss</option>
<option value="Sell">Future Pts</option>
</select>
<i class="fa fa-angle-down"></i>
</div>
</div>
<div class="label-text inline">
<div class="drpbox m-l-15 inline">
<span>No. of Times</span>
<input type="number" maxlength="15"
class="form-control input_bg_white " style="width: 80px;">
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>`;
$(".added_legs").append(data);
$(".adjconditionadd").append(adjcondata);
}
从两个表中并行删除行
代码：-
function deleteleg(t) {
var rowIdx = $(t).closest("tr").index();
$(t).closest('tr').remove();
removeRowFromTable_del($(".addadjcondform > .addadjcondlegstbl tbody"), rowIdx);
}
function removeRowFromTable_del(table, rowIdx) {
alert("dfsfsddf");
console.log("table ==>" + table + " :- " + rowIdx);
table.find("tr").eq(rowIdx).remove();
}
通过使用上面的代码，第一个表行可以正确删除
addLegstbladdadjcondLegstbl我对 jQuery 很陌生。
建议我哪里犯了错误以及如何实现这一点。
感谢您对我的耐心。
生成表时，将唯一属性
data-my-id示例：
var unique_id = 0
var table1 = document.querySelector(".table-1 tbody")
var table2 = document.querySelector(".table-2 tbody")
function genID() {
return "id" + ++unique_id
}
function addLegs(data1, data2) {
var id = genID()
var str1 = `<tr data-my-id="${id}"><td>${data1}</td><td><button class="rmv">remove</button></tr>`
var str2 = `<tr data-my-id="${id}"><td>${data2}</td><td><button class="rmv">remove</button></tr>`
$(table1).append($(str1))
$(table2).append($(str2))
$(table1).find(".rmv").click(removeLegs)
$(table2).find(".rmv").click(removeLegs)
}
function removeLegs(ev) {
var tr = ev.target.closest("tr")
var id = tr.getAttribute("data-my-id")
$("[data-my-id=" + id + "]").remove()
}
document.querySelector(".addLegs").addEventListener('click', function(ev) {
addLegs(Math.random(), Math.random())
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div style="display: flex">
<table class="table-1" style="border:1px solid red">
<tbody></tbody>
</table>
<table class="table-2" style="border:1px solid red">
<tbody></tbody>
</table>
</div>
<button class="addLegs">add legs</button>