CODEWITHSUNDEEP
javascripthtmldom
Terry
Terry

Reputation: 23

Unexpected behavior manipulating dynamic user input table

I am trying to remove checked row from dynamic user input table , but it never works. Here is the code

function addRow(tableID){
  var table=document.getElementById(tableID);
  var rowCount=table.rows.length;
  if(rowCount<5){
    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;
      }
    }else{
      alert("Maximum number of extra data is 5.");
    }
}


function deleteRow(tableID) {
  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) {
      if(rowCount <= 1) {       
        alert("Cannot remove all.");
        break;
      }
      table.deleteRow(i);
      rowCount--;
      i--;
    }
  }
}
<p>
  <input type="button" value="Add Option" onClick="addRow('dataTable')"/>
  <input type="button" value="Remove Option" onClick="deleteRow('dataTable')"/>
  <table id="dataTable" >
    <tbody>
      <tr>
        <p>
          <td>
            <input type="checkbox"  required="required" name="chk[]" checked="checked" />
          </td>
          <td>
            <label>Name of Data:</label>
            <input type="text" name="dataName">
          </td>
          <td>
            <label>Data:</label>
            <input type="text" name="data">
          </td>
        </p>
      </tr>
    </tbody>
  </table>

The add function works fine, but delete function doesn't work. Could someone tell me what happened?

Upvotes: 2

Views: 59

Answers (3)

Chad McGrath
Chad McGrath

Reputation: 1601

These are good answers, but better yet is to replace .childNodes[0] with .children[0] because you are only interested in elements, that way you don't have to worry about spaces and other sneaky stuff like that. You can read about it here : What is the difference between children and childNodes in JavaScript?

Upvotes: 1

Mojtaba
Mojtaba

Reputation: 5002

You almost done.

There are a few issues:

You have a blank space after <td> and before <input>. So, your <input> becomes as the second child:

<td>
                            <input type="checkbox"  required="required" name="chk[]" checked="checked" /></td>

It should be:

<td><input type="checkbox"  required="required" name="chk[]" checked="checked" /></td>

Otherwise, you can change childNodes[0] to childNodes[1].

Also, why do you have <p> before and after <td>? remove them.

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 5) {
        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;
        }
    } else {
        alert("Maximum number of extra data is 5.");
    }
}


function deleteRow(tableID) {
    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) {
            if (rowCount <= 1) {
                alert("Cannot remove all.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}
<input type="button" value="Add Option" onClick="addRow('dataTable')" />
<input type="button" value="Remove Option" onClick="deleteRow('dataTable')" />
<table id="dataTable">
    <tbody>
        <tr>
            <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
            <td>
                <label>Name of Data:</label>
                <input type="text" name="dataName"> </td>
            <td>
                <label>Data:</label>
                <input type="text" name="data"> </td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Nadeem Manzoor
Nadeem Manzoor

Reputation: 750

Made a change from

var chkbox = row.cells[0].childNodes[0];

to

var chkbox = row.cells[0].childNodes[1];

It is working now.

function addRow(tableID){
	var table=document.getElementById(tableID);
	var rowCount=table.rows.length;
	if(rowCount<5){
		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;
			}
		}else{
			alert("Maximum number of extra data is 5.");
		}
}


function deleteRow(tableID) {
	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[1];
		if(null != chkbox && true == chkbox.checked) {
			if(rowCount <= 1) { 			
				alert("Cannot remove all.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
}
	<p>
			<input type="button" value="Add Option" onClick="addRow('dataTable')"/>
			<input type="button" value="Remove Option" onClick="deleteRow('dataTable')"/>
			<table id="dataTable" >
				<tbody>
					<tr>
					<p>
					<td>
							<input type="checkbox"  required="required" name="chk[]" checked="checked" /></td>
					<td>
					<label>Name of Data:</label>
					<input type="text" name="dataName">
					</td>
					<td>
					<label>Data:</label>
					<input type="text" name="data">
					</td>
					</p>
					</tr>
					</tbody>
					</table>

Upvotes: 0

Related Questions