with clone node how to change attribute of child onclick argument?

Question

My problem is about javascript clone node. I clone a table row. in that row I have an input text element.

I assign an OnClick event on that element that have a few argument. My question is after cloning that row, how I can change attribute of element in child node?

In other word in the following code if I clone rowToClone how I can change DESKRIPLACE_ID_1001 in child node dynamically?

<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

A simple solution is using a data attribute in your input:

<input size='10' data-deskriplace-id='DESKRIPLACE_ID_1001' ...

Then, replace that id in the onfocus call with "this":

onfocus="AJAX0AJOXSELEKT(this, '<?php ...

Finally, add the target attribute in your function:

function AJAX0AJOXSELEKT(target, ....) {
    var deskriplace_id = target.dataset.deskriplace; // <- here you have the ID you want
}

After that you need to update the data attribute in your clone, but you do not need to change the onfocus event. The event cannot be changed as a string, you have to do it like in this answer. With the approach above you do not need that.