с узлом клона, как изменить атрибут дочернего аргумента onclick? - PullRequest
Новая
       54

с узлом клона, как изменить атрибут дочернего аргумента onclick?

0 голосов
/ 07 апреля 2020

Моя проблема связана с 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>

1 Ответ

1 голос
/ 07 апреля 2020

Простое решение заключается в использовании атрибута данных во вводе: 

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

Затем замените этот идентификатор в вызове onfocus на "this": 

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

Наконец, добавьте целевой атрибут в вашу функцию: 

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

После этого вам нужно обновить атрибут данных в вашем клоне, но вам не нужно изменять событие onfocus. Событие не может быть изменено как строка, вы должны сделать это, как в этот ответ . При таком подходе вам это не нужно.

...