使用克隆节点如何更改子 onclick 参数的属性？

Question

我的问题是关于 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>

Answer 1

一个简单的解决方案是在您的输入中使用data attribute：

<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 事件。该事件不能作为字符串更改，您必须像this answer 中那样进行更改。使用上述方法，您就不需要了。