JavaScript克隆表格行后如何重置select选中项？

问题描述 #

克隆表格行功能正常，但克隆时会复制原有数据，number、text、复选框等控件能正常重置为0或空值，唯独select-option控件无法生效。相关代码如下：

HTML代码 #

<table ID="trig_strava_register_to_single_contest">
  <thead>
    <th>
      <h3>-</h3>
    </th>
    <th>
      <h3>Username</h3>
    </th>
  </thead>  
  <tbody>
    <tr>
      <td><input type="checkbox" name="chk"/></td>
      <td>
        <select name="trig_strava_register_to_single_contest[]" >
          <option value="" >--Please choose an option--</option>
          <option value= "1" > 1 </option>
          <option value= "2" selected> 2 </option>
          <option value= "1" > 3 </option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<p>
  <INPUT type="button" class= "button" value="Add Row" onclick="addRow('trig_strava_register_to_single_contest')" />
  <br>
  <INPUT type="button" class= "button" value="Delete Selected Rows*" onclick="deleteRow('trig_strava_register_to_single_contest')" /> 
</p>

原JavaScript代码 #

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var rowHeadCount = table.tHead.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
  
    for(var i=0; i<colCount; i++) {
      var newcell   = row.insertCell(i);
      newcell.innerHTML = table.rows[0+rowHeadCount].cells[i].innerHTML;

      switch(newcell.childNodes[0].type) {
        case "input":    
            newcell.childNodes[0].value = 0;
            break;
        case "date":    
            newcell.childNodes[0].value = "1999-12-31";
            newcell.childNodes[0].setAttribute('value',"1999-12-31");
            break;
        case "time":    
            newcell.childNodes[0].value = "00:00:00";
            newcell.childNodes[0].setAttribute('value',"00:00:00");
            break;
        case "select-one":
            newcell.childNodes[0].selectedIndex = 0;
            break;
        default:
                newcell.childNodes[0].value = 0;
                newcell.childNodes[0].setAttribute('value',0);
                break;
      }
    }
}

错误原因 #

问题出在innerHTML克隆方式：当通过newcell.innerHTML = table.rows[0+rowHeadCount].cells[i].innerHTML复制单元格内容时，select的HTML代码会保留原有的selected属性（比如示例中第二个option的selected标记）。即使后续设置了selectedIndex=0，浏览器渲染时会优先识别HTML中的selected属性，导致新行的select仍然选中原来的选项。

简单来说，select的选中状态同时受DOM属性（selectedIndex）和HTML属性（selected）影响，innerHTML克隆会保留HTML属性，覆盖你后续设置的DOM属性。

解决方法 #

方法1：修复innerHTML克隆后的select处理 #

在设置selectedIndex=0之前，先移除所有option的selected属性：

case "select-one":
    const select = newcell.childNodes[0];
    // 移除所有option的selected属性
    Array.from(select.options).forEach(opt => opt.removeAttribute('selected'));
    // 设置选中第一个选项
    select.selectedIndex = 0;
    break;

方法2：改用cloneNode克隆（更可靠） #

放弃innerHTML，使用DOM的cloneNode方法克隆单元格，避免HTML属性残留问题，同时更符合DOM操作规范：

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowHeadCount = table.tHead.rows.length;
    // 获取要克隆的原行
    const originalRow = table.rows[rowHeadCount];
    // 克隆行（true表示深度克隆，包含所有子元素）
    const newRow = originalRow.cloneNode(true);
    // 添加到表格末尾
    table.tBodies[0].appendChild(newRow);

    // 重置新行的所有控件
    const inputs = newRow.querySelectorAll('input, select, date, time');
    inputs.forEach(control => {
        switch(control.type) {
            case 'checkbox':
            case 'radio':
                control.checked = false;
                break;
            case 'number':
            case 'text':
                control.value = 0;
                break;
            case 'date':
                control.value = '1999-12-31';
                break;
            case 'time':
                control.value = '00:00:00';
                break;
            case 'select-one':
                control.selectedIndex = 0;
                // 额外移除option的selected属性，确保兼容性
                Array.from(control.options).forEach(opt => opt.removeAttribute('selected'));
                break;
            default:
                control.value = '';
                break;
        }
    });
}

说明 #

方法2的优势在于：

• 避免innerHTML解析HTML带来的属性残留问题
• 更清晰地遍历所有控件，统一处理重置逻辑
• 兼容更多控件类型，扩展更方便

内容的提问来源于stack exchange，提问作者Bud