Dynamic table broken delete row function

MaDmiX

03-10-2012, 03:27 PM

Hi All,

I am working on a script that creates a table, taking the data from a number of text fields and populating the table cells with it. Originally I had to start with an existing table containing one blank row but I was able to get the script to create the table dynamically.

Unfortunately I seem to have broken my delete row function (this was working fine when the script started with an existing table). The error I am getting is:

TypeError: 'cells.0.childNodes' is null or not an object

I googled this but could not find anything to help. I don't have alot of javascript experience and need help from the experts.

Thanks in advance for all your help guys!

Kind regards,

Ken

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>

</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />

</head>
<SCRIPT language="javascript">
function addRow(tableID) {
if (!document.getElementById(tableID)) {
//alert("the table does not exist");
var body = document.getElementsByTagName("body")[0];

// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var newRow = document.createElement("tr");

// add the row to the end of the table body
tblBody.appendChild(newRow);

// put the <tbody> in the <table>
tbl.appendChild(tblBody);

// appends <table> into <body>
body.appendChild(tbl);

// sets the id of "dataTable" and border attribute of tbl to 0;
tbl.setAttribute("id", "dataTable");
tbl.setAttribute("border", "0");
}

var StartTime = document.getElementById('StartTime');
var EndTime = document.getElementById('EndTime');
var MaterialID = document.getElementById('MaterialID');
var Title = document.getElementById('Title');

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";
cell1.appendChild(element1);

var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute("name","StartTime[]");
element2.value = StartTime.value;
cell2.appendChild(element2);
StartTime.value="";

var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.setAttribute("name","EndTime[]");
element3.value = EndTime.value;
cell3.appendChild(element3);
EndTime.value="";

var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute("name","MaterialID[]");
element4.value = MaterialID.value;
cell4.appendChild(element4);
MaterialID.value="";

var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute("name","Title[]");
element5.value = Title.value;
cell5.appendChild(element5);
Title.value="";
}
function deleteRow(tableID) {
if (document.getElementById(tableID)) {
//alert("the table exists");
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>
<body>
<span id="spryStartTime">
<label for="StartTime">Start Time:</label><br />
<input name="StartTime" type="text" id="StartTime" tabindex="1" size="10" maxlength="8" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
<label for="EndTime">End Time:</label><br />
<span id="spryEndTime">
<input name="EndTime" type="text" id="EndTime" tabindex="2" size="10" maxlength="8" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
<label for="MaterialID">Material ID:</label><br />
<span id="spryMaterialID">
<input name="MaterialID" type="text" id="MaterialID" tabindex="3" size="10" maxlength="10" />
<span class="textfieldRequiredMsg">A value is required.</span></span><br />
<label for="Title">Title:</label><br />
<span id="spryTitle">
<input name="Title" type="text" id="Title" tabindex="4" size="50" maxlength="50" />
<span class="textfieldRequiredMsg">A value is required.</span></span><br />
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<script type="text/javascript" />
var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]});
var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]});
</script>

</body>
</html>

Goos

03-10-2012, 04:52 PM

You're adding an empty row to your initial table.

if (!document.getElementById(tableID)) {
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var newRow = document.createElement("tr");
tblBody.appendChild(newRow);
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute("id", "dataTable");
tbl.setAttribute("border", "0");
};

When the line:
var chkbox = row.cells[0].childNodes[0];
is executed for row[0], there is no rows[0].cells[0], which results in an error.

MaDmiX

03-10-2012, 04:55 PM

Goos,

Thanks for catching that. I removed the lines that handle the var newRow and the script works perfectly now. If I may indulge you a bit more, I need to add a function to essentially do the reverse. That is take the cell data from a row and place it in the text fields (deleting the row) so the user can make changes and then click a button that would replace this data in the same row index (I think that is the correct term). I have a basic idea of how to accomplish this:

1. I can call my deleteRow function and wrap it in an if statement to make sure that the user can only update one row at a time.
2. I know how to copy the text field contents to my cells using the .value property. I can do the reverse to get the cell contents to the text fields.

The only place I am stuck is how to get the updated data back in the same place in the table as before. Can you offer some sugestions or maybe point me to some resources that would help with this?

Thanks again,

Ken

MaDmiX

03-12-2012, 02:52 AM

I worked out this function but the only thing that seems to not be working is the line:

chkbox=false;

Can someone help me with the proper syntax to make the checkbox become unchecked after the row is updated?

Thanks in advance.

Ken

function updateRow(tableID) {
if (document.getElementById(tableID)) {
//alert("the table exists");
var StartTime = document.getElementById('StartTime');
var EndTime = document.getElementById('EndTime');
var MaterialID = document.getElementById('MaterialID');
var Title = document.getElementById('Title');
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);
chkbox=false;
row.cells[1].childNodes[0].value=StartTime.value;
StartTime.value="";
row.cells[2].childNodes[0].value=EndTime.value;
EndTime.value="";
row.cells[3].childNodes[0].value=MaterialID.value;
MaterialID.value="";
row.cells[4].childNodes[0].value=Title.value;
Title.value="";
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
}