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）如何动态更改＆＃34; txt_exp_from＆＃34;的onchange属性？像这样：onChange =＆＃34;计算（这，＆＃39; txt_exp_from2＆＃39;，＆＃39; txt_exp_to2＆＃39;）？

（2）如何为文本框更改相同内容＆＃34; txt_exp_to＆＃34; ？

（3）如何将按钮btn_cal2 onclick事件更改为=＆＃34;计算（这，＆＃39; txt_exp_from2＆＃39;，＆＃39; txt_exp_to2＆＃39;）＆＃34; < / p>

我只知道JavaScript。我该怎么办？可以为克隆元素动态更新属性值加上事件参数的东西吗？**

Answer 1

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

e.g。

<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);">

许多人认为在这种情况下避免使用内联事件处理程序并明确注册事件处理程序会更好。

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

1 个答案: