RSS

Clone row using javascript

20 Sep

Create element and add that in to table row using javascript.

Create Element Syntax: 

document.createElement(nodename)

Create Element Example:

var txtNode=document.createTextNode(“Hello World”);
var head1=document.createElement(“H1”);
var para=document.createElement(“p”);
var text=document.createElement(‘input’);
var textarea=document.createElement(“textarea”);
var label=document.createElement(‘label’);

Example HTML table Clone:

<body>
 <table id="exampleDataTable" cellpadding="0" cellspacing="0" width="100%" border="0"></table>
<br/>
 <input type="button" id="" onclick="getData('exampleDataTable')" value="submit" />
</body>

Java script methods:

<script type="text/javascript">

 //initially create new table
 addRow('exampleDataTable');
 //delete table row delete button
 function tableDeleteRow(tabObj) {
    var rowsIndex=tabObj.parentElement.parentElement.rowIndex;
    var table = document.getElementById('exampleDataTable');
    try {
       if(rowsIndex!=0){
          table.deleteRow(rowsIndex); 
       }
    }catch(e) {
       alert(e);
    }
 }
 //add table row using add button
 function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var cell1 = row.insertCell(0);
    var element1 = document.createElement("select");
    cell1.style.padding="3px";
    element1.style.width = "200px";
    element1.style.marginBottom = "0px";
    element1.id="option_example";
    var element1_relation =["Option1","Option2","Option3"];

    for (var i=0;i<element1_relation.length;i++){
       var option;
       option = document.createElement("option");
       option.setAttribute("value", element1_relation[i]);
       option.innerHTML = element1_relation[i];
       element1.appendChild(option);
    }
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement('input');
    cell2.style.padding="3px";
    element2.style.width = "200px";
    element2.style.marginBottom = "0px";
    element2.id="input_example";
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("textarea");
    cell3.style.padding="3px";
    element3.style.width = "200px";
    element3.style.marginBottom = "0px";
    element3.id="textarea_example";
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("BUTTON");
    cell4.style.padding="3px";
    element4.appendChild(document.createTextNode("Add"));
    element4.setAttribute("onClick", "addRow('exampleDataTable')");
    cell4.appendChild(element4);

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("BUTTON");
    cell5.style.padding="3px";
    element5.appendChild(document.createTextNode("Delete"));
    element5.setAttribute("onClick", "tableDeleteRow(this)");
    cell5.appendChild(element5);
 }

 //get all the row data
 function getData(tableID){
    try {
       var table = document.getElementById(tableID);
       var rowCount = table.rows.length;
       var jsonArray = new Array();
       for(var index=0; index < rowCount; index++) {
          var mapObj = {};
          var row = table.rows[index];
          var name1 = row.cells[0].childNodes[0];
          var name2 = row.cells[1].childNodes[0];
          var name3 = row.cells[2].childNodes[0];

          mapObj['name1'] = name1.value;
          mapObj['name2'] = name2.value;
          mapObj['name3'] = name3.value;
      }
    }catch(e) {
       alert(e);
    }
 }

</script>

 

 
3 Comments

Posted by on September 20, 2013 in General, Javascript

 

Tags: ,

3 responses to “Clone row using javascript

  1. Nacho

    January 14, 2015 at 2:03 am

    Hi. This appears to work fine for the creation of the new rows in my form but passing the information entered into the new cells is proving troublesome. I’m trying to pass them to a classic asp page but the below for example doesn’t work (I’m not even sure that “name1” is what I should be calling???:

    >>code snippet starts<>code snippet ends<<

    What am I doing wrong?
    am I correct in using "request.querystring" ? Or should I be using some other statement to call for the data that was entered into the form?

    Cheers

     
  2. Nacho

    January 14, 2015 at 2:04 am

    wow. that didn’t pick up my code snippet…heheh.
    well lets try again:
    techrisk1 = request.querystring(“name1”)

     
  3. Nacho

    January 14, 2015 at 2:06 am

    I guess to be more specific all I need to know is what is the name of the object I need to call in my asp page to collect data that was entered by the user into the form fields in the new rows that were created using the script above?

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: