I need help or a pointer on how to keep a reference to a created element so that I can delete it at a later stage.
This is my object below - for each pass through the PayStaff.addRow method I would like to store a reference that I can recall from onchangeRows method and pass to deleteRow method - for deletion.
The various ways I have tried are not really working.
Any tips or suggestions?
BTW: if you're wondering what [i][/i], [][/] and [j][/j] are about - I couldn't get this message to post as disable [codes] didn't work?
var PayStaff =
{
init: function()
{
var checkBoxes = Core.getElementsByClass("checkbox");
if(checkBoxes.length > 0)
{
for(var i = 0; i < checkBoxes.length; i++)
{
Core.addEventListener(checkBoxes[i][/i], "click", PayStaff.checkBoxListener);
}
PayStaff.initialRows(checkBoxes);
}
},
initialRows: function(checkBoxes)
{
var myParent = document.getElementById("payment_table");
var paidTable = document.createElement("table");
paidTable.id = "paid_table";
myParent.appendChild(paidTable);
Core.addClass(paidTable.parentNode, "display");
Core.removeClass(paidTable.parentNode, "hidden");
for(var i = 0; i < checkBoxes.length; i++)
{
if(checkBoxes[i][/i].checked == true)
{
var myRow = checkBoxes[i][/i].parentNode.parentNode;
PayStaff.addRow(myRow);
//now we need to create a hidden input element to add to our list
myInput = PayStaff.addInputPaid();
}
else
{
myInput = PayStaff.addInputUnpaid();
}
input = checkBoxes[i][/i].parentNode;
input.appendChild(myInput);
}
},
onchangeRows: function(checkBox, myRow)
{
if(checkBox.checked == true)
{
//add a row
PayStaff.addRow(myRow);
//change attribute in input
thisTd = checkBox.parentNode;
myInput = thisTd.lastChild;
myInput.setAttribute("value", "paid");
}
else
{
//change/set the element's attribute;
thisTd = checkBox.parentNode;
myInput = thisTd.lastChild;
myInput.setAttribute("value", "unpaid");
//would like to make reference here to the row in question
//so that I can delete it.
}
},
addRow: function(myRow)
{
var paidTable = document.getElementById("paid_table");
//add tr to the parent table for each checked checkbox
var row = document.createElement("tr");
row.className = "row_span";
paidTable.appendChild(row);
//grab all the td elements in the row
var myTd = myRow.getElementsByTagName("td");
//for each one except the last
for(var j = 0; j < myTd.length - 1; j++) //skipping the last element
{
//get innerHTML from each table element except the last one
var myText = myTd[j][/j].innerHTML;
//create td to pass to
var td = document.createElement("td");
td.className = "td_inner";
//add together in coherent fashion with additional text
var paidText = document.createTextNode(myText);
//add to the td created to take it
td.appendChild(paidText);
row.appendChild(td);
}
var tdAdd = document.createElement("td");
tdAdd.className = "td_inner";
var staffPaid = "Paid";
var addPaidText = document.createTextNode(staffPaid);
tdAdd.appendChild(addPaidText);
row.appendChild(tdAdd);
},
addInputPaid: function()
{
var myInput = document.createElement("input");
myInput.setAttribute("type", "hidden");
myInput.setAttribute("name", "check_checked[][/]");
myInput.setAttribute("value", "paid");
return myInput;
},
addInputUnpaid: function()
{
var myInput = document.createElement("input");
myInput.setAttribute("type", "hidden");
myInput.setAttribute("name", "check_checked[][/]");
myInput.setAttribute("value", "unpaid");
return myInput;
},
deleteRow: function()
{
// still to be populated
},
checkBoxListener: function(event)
{
var myRow = this.parentNode.parentNode;
var checkBox = this;
PayStaff.onchangeRows(checkBox, myRow);
}
};
Core.start(PayStaff);
