Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm stuck with javascript I working on. I want to add more fields dynamically, my problem is I want to be able to add a row with input boxes. Within the added row, first column contain checkbox, second column contain an increment number, third column contain input txtbox, fourth column checkbox1, fifth column contain input txtbox1 and sixth column contain input txtbox3. Now my question is, how would I add dynamicaly second row under fourth column checkbox1, fifth column txtbox1 and sixth column txtbox3 while maintaing alignment with checkbox,txtbox? And within the added row, if possible it have to have two button, add row and delete row. Here is snippet which runs but doesn't do want I expecting:

    <HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {
            var i=0;
            i++;

            var table = document.getElementById(tableID);           

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);


            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 0;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox[]";
            cell3.appendChild(element2);


            var cell4 = row.insertCell(3);
            var element4 = document.createElement("input");
            element4.type = "checkbox";
            element4.name="chkbox[]";
            cell4.appendChild(element4);



            var cell5 = row.insertCell(4);
            cell5.innerHTML = rowCount -1;

            var cell6 = row.insertCell(5);
            var element5 = document.createElement("input");
            element5.type = "text";
            element5.name = "txtbox1[]";
            cell6.appendChild(element5);            


            var cell7 = row.insertCell(6);
            var element6 = document.createElement("input");
            element6.type = "text";
            element6.name = "txtbox2[]";
            cell7.appendChild(element6);

            var cell8 = row.insertCell(7);
            var element7 = document.createElement("input");
            element7.type = "text";
            element7.name = "txtbox3[]";
            cell8.appendChild(element7);

        }

        function addVillageNames()
        {

            }

        function removeVillageNames()
        {

            }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }



    </SCRIPT>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="Untitled-2" method="post">
<table width="760" id="dataTable" border="1">
    <tr>
            <TD width="22" rowspan="2"><INPUT type="checkbox" name="chk"/></TD>
            <TD width="12" rowspan="2"> 1 </TD>
            <TD width="149" rowspan="2"> <INPUT type="text" name="txtbox[]" /> </TD>

            <TD width="20"><INPUT type="checkbox" name="chk1"/></TD>
            <TD width="12"> 1 </TD>
            <TD width="200"> <INPUT type="text" name="txtbox1[]" /></TD>
            <TD width="146"> <INPUT type="text" name="txtbox2[]" /> </TD>
            <TD width="188"> <INPUT type="text" name="txtbox3[]" /> </TD>

  </TR>
    <tr>
      <TD width="20">&nbsp;</TD>
      <TD width="12">&nbsp;</TD>
      <TD><input type="button" value="Add Row1" onClick="addRow1('dataTable')" />&nbsp;<input type="button" value="Delete Row1" onClick="deleteRow1('dataTable')" /></TD>
      <TD width="146">&nbsp;</TD>
      <TD width="188">&nbsp;</TD>
    </TR>

    </TABLE>
    <tr>
    <td>
   <input type="button" value="Add Row" onClick="addRow('dataTable')" />

<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</form>
</BODY>
</HTML>
share|improve this question
2  
can you post a fiddle maybe ? –  mohkhan Sep 2 '13 at 11:18
 
You can add rows only to thead/tbody/tfoot not to any column... –  Teemu Sep 2 '13 at 11:25
 
I pasted it into a fiddle, it seems a bit broken though. jsfiddle.net/94V9d –  andrew Sep 2 '13 at 11:28
 
@RonnieNasso is this what you're looking for? jsfiddle.net/GrahamW0009/CTjuK –  Graham Walters Sep 2 '13 at 13:00
 
@GrahamWalters. No, if you run snippet provided above it will give you an idea of what I need. Well, I want to add input text boxes on a row. On the first input box on left side of the column to be as Parent, second input box which follow on right hand side to be as child. My question is how would I be able to add parent textbox along with child text box while child text box will have its own Add & Remove button for the child text boxes only and same with Add & Remove button for parent text boxes only. jsfiddle.net/ronn_nasso/YX9LC –  RonnieNasso Sep 2 '13 at 13:18
show 1 more comment

1 Answer

up vote 0 down vote

As much as I love plain/vanilla javascript, I would have to recommend jQuery for your next project. Here's a jsfiddle of the code using only plain/vanilla javascript.

Here's the JavaScript function you'll need

function hasClass(el, cssClass) {
  return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}

var rowNumber = 1;

function addRow(tableID) {
  var counter = document.getElementById(tableID).rows.length-1;
  var row = document.getElementById(tableID);
  var newRow0 = row.rows[1].cloneNode(true);
  var newRow1 = row.rows[counter].cloneNode(true);

  // Increment
  rowNumber ++;
  newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;

  // Update the child Names
  var items = newRow0.getElementsByTagName("input");
  for (var i = 0; i < items.length; i++) {
    items[i].value = null;
    items[i].name = counter + '_' + items[i].name;
  }

  var refRow = row.getElementsByTagName('tbody')[0];
  refRow.insertBefore(newRow0, refRow.nextSibling);
  refRow.insertBefore(newRow1, refRow.nextSibling);
}

function deleteRow(tableID) {
  var table =  document.getElementById(tableID);
  var i = table.rows.length - 1;

  while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
    table.deleteRow(i)
    i--;
  }
  if (2 < i) {
    table.deleteRow(i)
    rowNumber --;
  }
}

function addChildRow(e, tableID) {
  var table = document.getElementById(tableID);
  var newRow = table.rows[0].cloneNode(true);

  // Increment
  if (e > 0)

  if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)) 
    var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
  else
    var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)

  newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;

  // Update the child Names
  var items = newRow.getElementsByTagName("input");
  for (var i = 0; i < items.length; i++) {
    items[i].value = null;
    items[i].name = counter + '_' + items[i].name;
  }

  var i = e;
  while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
    i--;

  var parent = table.rows[i].getElementsByTagName('td');
  parent[0].rowSpan = counter+2;
  parent[1].rowSpan = counter+2;
  parent[2].rowSpan = counter+2;

  var refRow = table.getElementsByTagName('tr')[e-1];
  refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}


function deleteChildRow(e, tableID) {
  var table =  document.getElementById(tableID);
  var i = e;

  while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
    i--;

  if (e-1 > i)
    table.deleteRow(e-1)
}

And here's the HTML

<form action="Untitled-2.php" name="dataTable" method="post">
  <table width="760" id="dataTable" border="1">
    <tr>
      <td width="20">
        <input type="checkbox" name="chk1" />
      </td>
      <td width="12">1</td>
      <td width="200">
        <input type="text" name="txtbox1[]" />
      </td>
      <td width="146">
        <input type="text" name="txtbox2[]" />
      </td>
      <td width="188">
        <input type="text" name="txtbox3[]" />
      </td>
    </tr>

    <tr class="row-parent">
      <td width="22" rowspan="2">
        <input type="checkbox" name="chk" />
      </td>
      <td width="12" rowspan="2">1</td>
      <td width="149" rowspan="2">
        <input type="text" name="txtbox[]" />
      </td>
      <td width="20">
        <input type="checkbox" name="chk1" />
      </td>
      <td width="12">1</td>
      <td width="200">
        <input type="text" name="txtbox1[]" />
      </td>
      <td width="146">
        <input type="text" name="txtbox2[]" />
      </td>
      <td width="188">
        <input type="text" name="txtbox3[]" />
      </td>
    </tr>
    <tr>
      <td width="20">&nbsp;</td>
      <td width="12">&nbsp;</td>
      <td>
        <input type="button" value="+ Child Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
        <input type="button" value="- Child Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
      </td>
      <td width="146">&nbsp;</td>
      <td width="188">&nbsp;</td>
    </tr>
  </table>
  <input type="button" value="Add Row" onClick="addRow('dataTable')" />
  <input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>

And here's the CSS to hide the first row:

table tr:first-child {
  display: none;
}
share|improve this answer
 
it works, on check boxes I prefer them working so that user can be delete input fields that are in middle of other input field. at moment, user has to delete all input fields to get to into actual field that has to be delete. I noted that you propose jquery implementation of instead javascript, I'm not that familiar with jquery, it would be good idea if possible. –  RonnieNasso Sep 3 '13 at 11:09
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.