JavaScript将不同的行添加到表中-addRow函数

Question

我已经重新使用了常见的addRow函数，但是我的基本js技巧限制了我对代码进行大的更改。

这个优雅的功能工作，但我想新行中的所有元素有不同的名称到前一行。 朋友提出使用 var new_name = old_name.replace（rowCount，rowCount + 1）;通过使用计数器，

所以在下面的例子中有新创建的行，从而具有元素“USERNAME_2”和“EMAIL_2”

谢谢！

<INPUT TYPE="text" NAME="username_1"> : name <BR> 
<INPUT TYPE="text" NAME="email_1"> : email <BR> 




function addRow(tableID) { 

    var table = document.getElementById(tableID); 

    var rowCount = table.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].cells[i].innerHTML; 
     //alert(newcell.childNodes); 
     switch(newcell.childNodes[0].type) { 
      case "text": 
        newcell.childNodes[0].value = ""; 
        break; 
      case "checkbox": 
        newcell.childNodes[0].checked = false; 
        break; 
      case "select-one": 
        newcell.childNodes[0].selectedIndex = 0; 
        break; 
     } 
    } 
} 

Answer 1

要使新创建的行具有元素“username_2”和“email_2”，您需要用下面的代码替换现有的函数。

function addRow(tableID) 
{ 
    var table = document.getElementById(tableID); 
    var rowCount = table.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); 
     //alert(newcell.childNodes); 
     newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     if(newcell.childNodes[0]!=null && newcell.childNodes[0].name != null) 
     { 
      var oldName =newcell.childNodes[0].name; 
      var newName = getNewName(oldName,rowCount+1); 
      newcell.innerHTML = replaceAll(newcell.innerHTML,oldName, newName); 
     } 

     switch(newcell.childNodes[0].type) { 
     case "text": 
      newcell.childNodes[0].value = ""; 
      break; 
     case "checkbox": 
      newcell.childNodes[0].checked = false; 
      break; 
     case "select-one": 
      newcell.childNodes[0].selectedIndex = 0; 
      break; 
     } 
    } 
} 

function replaceAll(inputString, regExpr, newString) 
{ 
    var outputStr = ""; 
    var pivot; 
    while(inputString.indexOf(regExpr) != - 1) 
    { 
     inputString = inputString.replace(regExpr,newString); 
     pivot = inputString.indexOf(newString) + newString.length; 
     outputStr = outputStr + inputString.substring(0, pivot) ; 
     inputString = inputString.substring(pivot,inputString.length); 
    } 
    outputStr = outputStr + inputString; 
    return outputStr; 
} 

function getNewName(oldName,rowIndex) 
{ 
     var arr = oldName.split('_'); 
     arr[arr.length - 1] = rowIndex; 
     var str = ""; 
     for (arrIndex = 0; arrIndex < arr.length; arrIndex++) 
     { 
      str += arr[arrIndex]; 
      if (arrIndex != arr.length - 1) 
      { 
       str += "_"; 
      } 
     } 
     return str; 
}