Hi All,
I have a script that runs on my page load and pulls some data from a database to build a table with.
Now I also have a similar script that is called via a onclick event so the user can manually add more rows to this table and another for the deletion of rows from the table:
I can remove rows that were added manually to the table but for some reason I cannot remove rows that were added by the makeTable() script on page load. It appears that the makeTable() script is attaching the last row number to the onclick event which is passed to my deleteRow() script, no matter which row I click to delete. This is odd since I tested by adding an alert to see the value of the rowCount variable that I am attaching to my onclick event in the makeTable() script and it seems to be the correct value for each iteration of my loop.
What am I missing here?
Thanks in advance for any help.
Ken
I have a script that runs on my page load and pulls some data from a database to build a table with.
JavaScript:
function makeTable(tableID){
var str = "<?php echo $row_rstRequestDetails['tblEquipRequestID']; ?>";
var body = document.getElementsByTagName("fieldset")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute("id", "dataTable");
tbl.setAttribute("width", "100%");
tbl.setAttribute("border", "0");
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
if (xmlhttp.responseText) {
var itemsList = JSON.parse(xmlhttp.responseText);
for(var i = 0; i < itemsList.length; i++) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
cell0.setAttribute("width","33%");
var element0 = document.createElement("input");
element0.type = "text";
element0.setAttribute("name","Equip[]");
element0.setAttribute("readonly","true");
element0.setAttribute("class","search");
element0.value = itemsList[i].EquipNeeded;
cell0.appendChild(element0);
var cell1 = row.insertCell(1);
cell1.setAttribute("width","33%");
var element1 = document.createElement("input");
element1.type = "text";
element1.setAttribute("name","Qty[]");
element1.setAttribute("readonly","true");
element1.setAttribute("class","search");
element1.value = itemsList[i].Quantity;
cell1.appendChild(element1);
var cell2 = row.insertCell(2);
cell2.setAttribute("width","33%");
var element2 = document.createElement("input");
element2.type = "button";
element2.setAttribute("name","remove");
element2.setAttribute("class","button");
// alert("rowCount is "+rowCount);
element2.onclick = function(){deleteRow(tableID,rowCount);}
element2.value = "Remove";
cell2.appendChild(element2);
}
}
}
}
xmlhttp.open("GET","query-requested-equip.php?tblEquipRequestID="+str,true);
xmlhttp.send();
}
Now I also have a similar script that is called via a onclick event so the user can manually add more rows to this table and another for the deletion of rows from the table:
JavaScript:
function addRow(tableID) {
var oHidden = frmEquipmentRequest.elements["EquipNeeded"];
var oDDL = frmEquipmentRequest.elements["EquipNeeded_ddl"];
var oTextbox = frmEquipmentRequest.elements["EquipNeeded_txt"];
var Quantity = document.getElementById('Quantity');
var n = ~~Number(Quantity.value);
if (oHidden && oDDL && oTextbox)
oHidden.value = (oDDL.value == "") ? oTextbox.value : oDDL.value;
var varDetails = [oHidden, Quantity];
var arrayLength = varDetails.length;
for(var i=0; i<arrayLength; i++) {
if (varDetails[i].value=="") {
alert("Please complete all fields before adding.");
return;
}
}
if (n != Quantity.value || n <= 0 || isNaN(Quantity.value)){
alert("Quantity must be an integer.");
Quantity.value="";
return;
}
if (!document.getElementById(tableID)) {
var body = document.getElementsByTagName("fieldset")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute("id", "dataTable");
tbl.setAttribute("width", "100%");
tbl.setAttribute("border", "0");
}
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
cell0.setAttribute("width","33%");
var element0 = document.createElement("input");
element0.type = "text";
element0.setAttribute("name","Equip[]");
element0.setAttribute("readonly","true");
element0.setAttribute("class","search");
element0.value = oHidden.value;
cell0.appendChild(element0);
oDDL.value="";
oTextbox.value="";
oTextbox.style.display="none";
var cell1 = row.insertCell(1);
cell1.setAttribute("width","33%");
var element1 = document.createElement("input");
element1.type = "text";
element1.setAttribute("name","Qty[]");
element1.setAttribute("readonly","true");
element1.setAttribute("class","search");
element1.value = Quantity.value;
cell1.appendChild(element1);
Quantity.value="";
var cell2 = row.insertCell(2);
cell2.setAttribute("width","33%");
var element2 = document.createElement("input");
element2.type = "button";
element2.setAttribute("name","remove");
element2.setAttribute("class","button");
element2.onclick = function(){deleteRow(tableID,rowCount);}
element2.value = "Remove";
cell2.appendChild(element2);
}
function deleteRow(tableID,tr) {
// alert('tableID is '+tableID+' and rowCount is '+tr);
if (document.getElementById(tableID)) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
//alert ("row is "+i);
if(i == tr) {
table.deleteRow(i);
i++;
if(rowCount==0){
table.parentNode.removeChild(table);
}
}
}
}catch(e) {
alert(e);
}
}
}
I can remove rows that were added manually to the table but for some reason I cannot remove rows that were added by the makeTable() script on page load. It appears that the makeTable() script is attaching the last row number to the onclick event which is passed to my deleteRow() script, no matter which row I click to delete. This is odd since I tested by adding an alert to see the value of the rowCount variable that I am attaching to my onclick event in the makeTable() script and it seems to be the correct value for each iteration of my loop.
What am I missing here?
Thanks in advance for any help.
Ken