如何使用 javascript 更新动态克隆元素的属性和事件？

Question

请帮我解决这个问题。 我确实有这样一个简单的代码。 我总共有 3 列：从日期开始的经验、迄今为止的经验和计算按钮 当点击计算时，它会计算年、月和日。

 <table width="100%" id="dataTable2" border="1">
  <tr>
    <th scope="col">Duration From</th>
    <th scope="col">Duration To</th>
    <th scope="col">Total Experience</th>
  </tr>

  <tr>
    <td align="center">
    <input id="txt_exp_from" name="txt_exp_from" type="text" size="10" maxlength="10" onChange="calculate(this,'txt_exp_from','txt_exp_to');">
    <a id="a_datefrom" href="javascript:NewCal('txt_exp_from','ddmmyyyy')">
        <img id="img_datefrom" src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
    </td>

    <td align="center">
    <input id="txt_exp_to" name="txt_exp_to" type="text" size="10" maxlength="10" onChange="calculate(this,'txt_exp_from','txt_exp_to');">
    <a id="a_dateto" href="javascript:NewCal('txt_exp_to','ddmmyyyy')">
        <img id="img_dateeto" src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date">
    </a>
    </td>

    <td align="center">
    <p id="tp">
    <input name="btn_cal" id="btn_cal" type="button" value="Calculate" onClick="calculate(this,'txt_exp_from','txt_exp_to');"></p>
    </td>    
  </tr>      
</table>

我正在为想要添加一个或多个体验细节的人克隆整行。在克隆期间，我正在使用此 javascript 代码设置控件的名称和 ID：

    var x=document.getElementById('dataTable2');//Assume this as table name
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;//taking the length, Intially 1
    new_row.cells[0].innerHTML = len;//The first column for Sr. No. in table
    var inp5 = new_row.cells[5].getElementsByTagName('input')[0];
        inp5.id += len;
        inp5.value = '';
        inp5.name+= len;

        var a1 = new_row.cells[5].getElementsByTagName('a')[0];
        a1.id += len;
        a1.href="javascript:NewCal('"+inp5.id+"','ddmmyyyy')";

        var inp6 = new_row.cells[6].getElementsByTagName('input')[0];
        inp6.id += len;
        inp6.value = '';
        inp6.name+= len;

        var a1 = new_row.cells[6].getElementsByTagName('a')[0];
        a1.id += len;
        a1.href="javascript:NewCal('"+inp6.id+"','ddmmyyyy')";

        var inp7 = new_row.cells[7].getElementsByTagName('input')[0];
        inp7.id += len;
        inp7.name+= len;
        inp7.value = 'Calculate';
        inp7.onclick="calculate(this,'"+inp5.id+"','"+inp6.id+"');";
        x.appendChild(new_row );

---

**(1) 我怎样才能像这样动态改变“txt_exp_from”的onchange属性：onChange="calculate(this,'txt_exp_from2','txt_exp_to2')？

(2) 如何更改文本框“txt_exp_to”的相同内容？

(3) 如何将按钮 btn_cal2 onclick 事件更改为 ="calculate(this,'txt_exp_from2','txt_exp_to2')"

---

我只知道 JavaScript。我应该怎么办？对于克隆的元素，可能会过于动态地更新属性值和事件参数？**

Answer 1

如果您想克隆这样的内容，最好的办法可能是避免将元素 id 硬编码到事件处理程序中 - 相反，处理程序应该根据自己的 id 或上下文计算出适当的相对 id 或控件。

例如

<input id="txt_exp_from" name="txt_exp_from" type="text" size="10" maxlength="10" onChange="calculate(this, this.id, this.id.replace('_from','_to'));">

或者，如果您在 tr 级别添加了数据索引属性：

<input id="txt_exp_from" name="txt_exp_from" type="text" size="10" maxlength="10" onChange="calculate(this, this.id, 'txt_exp_to' + this.parentElement.parentElement.dataset-index);">

或者，如果您在 txt_exp_to 上设置 CSS 类 toControl，则类似于：

<input id="txt_exp_from" name="txt_exp_from" type="text" size="10" maxlength="10" onChange="calculate(this, this.id, this.parentElement.getElementsByClassName('toControl')[0].id);">

许多人会争辩说，在这种情况下最好避免使用内联事件处理程序并显式注册事件处理程序。