JavaScript add distinct rows to table -addRow function

Question

I have re-used a common addRow function, however my basic js skills limit me from making big changes to the code.

this elegant function works, however i would like to have all elements in the new row to have different names to the previous row. a friend proposed the use of

var new_name = old_name.replace(rowCount, rowCount+1); //by using a counter

,so in the example below to have the newly created row to have elements "username_2" and "email_2"

THANKS!

<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;
        }
    }
}

suhas khot · Accepted Answer · 2012-04-17 21:29:52Z

To have the newly created row to have elements "username_2" and "email_2" you need to replace existing function with below code.

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;
 }

Collectives™ on Stack Overflow

JavaScript add distinct rows to table -addRow function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related