javascript - 使用克隆节点如何更改子 onclick 参数的属性?
问题描述
我的问题是关于 javascript 克隆节点。我克隆了一个表格行。在该行中,我有一个输入文本元素。
我在那个有几个参数的元素上分配了一个 OnClick 事件。我的问题是克隆该行后,如何更改子节点中元素的属性?
换句话说,在下面的代码中,如果我克隆rowToClone
我如何动态更改子节点中的DESKRIPLACE_ID_1001 ?
<script type="text/javascript">
var iXcounter = 1000;
function cloneRow() {
iXcounter +=1;
var row = document.getElementById("rowToClone"); // find row to copy
var table = document.getElementById("tableToModify"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "TROW" + iXcounter; // change id or other attributes/contents
clone.style.display = "";
clone.querySelectorAll('[id="FORMIFILD_KALLA"]')[0].name = "KALAS_ARRAYE[" + iXcounter + "][KALA_KOODE]";
clone.querySelectorAll('[id="FORMIFILD_TEDAD"]')[0].name = "KALAS_ARRAYE[" + iXcounter + "][KALA_TEDAD]";
clone.querySelectorAll('[id="FORMIFILD_KALLA"]')[0].id = "ELM_KALLA_ID_" + iXcounter;
clone.querySelectorAll('[id="FORMIFILD_TEDAD"]')[0].id = "ELM_TEDAD_ID_" + iXcounter;
clone.querySelectorAll('[id="targetdesc"]')[0].id = "DESKRIPLACE_ID_" + iXcounter;
clone.querySelectorAll('[id="kala_putix"]')[0].id = "KALAZI_ID_" + iXcounter;
clone.querySelectorAll('[id="targettrid"]')[0].innerHTML = "delete";
table.appendChild(clone); // add new row to end of table
}
function deleterix(target_rowx){
if(target_rowx!="rowToClone"){
var row = document.getElementById(target_rowx);
row.parentNode.removeChild(row);
}}
// type="text" value="<?php print($_POST["$ajaxtext_elements_name"]); ?>" dir="rtl" class="form_elmnts with_250_pxl <?php print("$error_class"); ?>" tabindex="" size="40" maxlength="" style="vertical-align:; text-align:;"
</script>
<input type="button" onclick="cloneRow()" value="Clone Row"/>
<table>
<tbody id="tableToModify">
<tr>
<td width=150>تخفیف</td>
<td width=150>کالا</td>
<td width=150>مقدار</td>
<td width=150>حذف</td>
<td width=500 id=''></td>
</tr>
<tr id="rowToClone" style="display:none;">
<td width=150>
<input size='10' id="kala_putix" name="<?php print("$ajaxtext_elements_name"); ?>" onfocus="AJAX0AJOXSELEKT('DESKRIPLACE_ID_1001','<?php print("$target_place_div"); ?>','<?php @print("$relativx_script_path"); ?>','responcediv_kala_putix',this.id,this.value,'<?php @print("$targetjax_table"); ?>')" >
</td>
<div class="AjaxText_Style_relative" id="<?php print("$target_place_div"); ?>">
<div class="AjaxText_Style_absolute" id="responcediv_kala_putix"></div>
</div>
<td width=150><input size='10' type='text' id='FORMIFILD_KALLA'></td>
<td width=150><input size='10' type='text' id='FORMIFILD_TEDAD'></td>
<td width=150 id='targettrid' onClick="deleterix(this.parentNode.id);"></td>
<td width=500 id='targetdesc'></td>
</tr>
</tbody>
</table>
解决方案
一个简单的解决方案是在您的输入中使用数据属性:
<input size='10' data-deskriplace-id='DESKRIPLACE_ID_1001' ...
然后,将 onfocus 调用中的 id 替换为“this”:
onfocus="AJAX0AJOXSELEKT(this, '<?php ...
最后,在函数中添加目标属性:
function AJAX0AJOXSELEKT(target, ....) {
var deskriplace_id = target.dataset.deskriplace; // <- here you have the ID you want
}
之后,您需要更新克隆中的数据属性,但不需要更改 onfocus 事件。不能将事件更改为字符串,您必须像在此答案中那样进行操作。使用上面的方法,你不需要那个。
推荐阅读
- google-chrome - Google Chrome 和 Chromium 是否等同于网页设计/开发?
- javascript - 下拉多个位置,应显示相应的营业时间和营业时间
- python - 如何使用for循环从两个数组中查找坐标?
- arrays - 如何使用 Nokogiri 和 Ruby 解析数据并将其存储到变量中
- android - 如何将磁场矢量从传感器坐标空间转换为相机坐标空间?
- laravel - Laravel,验证后捕获错误
- asp.net-core - 如何以编程方式确定运行 asp.net 核心的端口
- excel - 当我在工作表中写入时,Apache poi 将编码放入 hiperlink
- chilkat - chilkat SetSslCertRequirement 服务器验证
- c# - Windows 10 物联网键盘楔