deleteing rows and storing row(text box) values in javascript

[suda v kumar]

Hi all,

I am deleteing rows using java script in frontend and each row contains a text box and check box.If the check box is checked I am deleting thos rows.But I want to collect the all the values of the text boxes in those deleted rows and finally i want to send to the back end on submiting the form.

Can any body help me on this.

function addrows()
{
  var tbl = document.getElementById('accNumber');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
 
  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);
 
  var cellRight = row.insertCell(1);
  var el1 = document.createElement('input');
  el1.setAttribute('type', 'checkbox');
  alert("iteration"+iteration);
  el1.setAttribute('name', 'check' + iteration);
  el1.setAttribute('id', 'chkValidate'+ iteration);
  el1.setAttribute('size', '40');
  cellRight.appendChild(el1);
 
  alert("el1"+el1);
  // right cell
  var cellRight1 = row.insertCell(2);
  var el = document.createElement('input');
  el.setAttribute('type', 'text');
  el.setAttribute('name', 'txtRow' + iteration);
  el.setAttribute('id', 'txtRow' + iteration);
  el.setAttribute('size', '40');
 
  cellRight.appendChild(el);
 
  alert("el"+el);
 
 
 
}
 
 
/*function addrows() {
alert("insideaddrows");
var tbl = document.getElementById('accNumber');
var lastRow = tbl.rows.length;
alert("lastRowinadd"+lastRow);
// if there's no header row in the table, then iteration = lastRow + 1
 var iteration = lastRow;
alert("iteration"+iteration);
var row = tbl.insertRow(lastRow);
 
 // right cell
// left cell
 
chkText = row.insertCell(0);
var chkText = row.insertCell(0);
chkText.setAttribute("align","right");
var textNode = document.createTextNode(iteration);
//cellLeft.appendChild(textNode);
 var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'checkbox');
alert("iteration"+iteration);
el.setAttribute('name', 'check' + iteration);
el.setAttribute('id', 'chkValidate'+ iteration);
el.setAttribute('size', '40');
chkText.appendChild(el);
var accNumTxtArea = row.insertCell(1);
var accNumTextBox = row.insertCell(2);
accNumTxtArea.setAttribute("align","right");
accNumTxtArea.innerHTML = "<font face=Arial size=2>Access Number</font>";
accNumTextBox.setAttribute("align","center");
accNumTextBox.innerHTML = "<input id='hello' name ='accessNumber' class='TextInput' size='22' maxLength='20' style='float: center'>";
}*/
 
 
function remR(){
 
 
 
var allRows = document.getElementById('tab').getElementsByTagName('tr');
 
var lastRow = allRows.length;
    var i;
 
alert("allRows"+allRows);
 
 
 
 
 
 
 
alert("allRows[0]"+ allRows[0]);
//alert("allRows[1]"+ allRows[1]);
var root = allRows[0].parentNode;
alert("root"+root);
var allInp = root.getElementsByTagName('input');
for(var i=allInp.length-1;i>=0;i--){
if((allInp[i].getAttribute('type')=='checkbox')&&(allInp[i].checked)){
   if(allInp.length>0)
        {
 
 
         alert("inside if");
 
 
 
         /*if(allInp[i].getAttribute('type')=='text')
         {
 
         alert("inside textbox");
 
         /* var aRow = document.getElementById('txtRow'+i).value;
          alert("txtRow" + aRow);*/
         // }
 
          var e = allInp[i].parentNode.parentNode ;
          alert("e"+e);
 
 
 
 
 
 
 
          root.removeChild(allInp[i].parentNode.parentNode)
 
 
        }
 
 
}
 
 
 }
}

Thanks
[ June 20, 2005: Message edited by: Eric Pascarello ]

[Ben Souther]

Welcome to Javaranch,

A few tips to help you out here.

1.) You'll need to change your display name to a real (looking anyway) first and last name.

2.) If you're going to post more than a line or two of code, wrap it a set of UBB Code tags (there is a button on the edit screen to create them for you).
This preserves your indenting and makes your code easier for others to read -- which in turn makes it more likely that someone will help you.

3.) We have an HTML Javascript forum on this site. Those guys will probably be able to help you better than we could when it comes to client side coding.


Re, you question. One solution that comes to mind is to have a select box in a hidden div, somewhere within your form. Each time you delete a row, add it's value to the select box. Name it "deleted_rows" or something like that.

When you retrieve the values from your form on the server, use getParameterValues("deleted_rows") to get an array of all the values that were removed from your HTML table.

[Bear Bibeault]

"java explore",

There aren't may rules that have been put into place here on the Ranch, but one that we take very seriously regards the use of proper names. Please take a look at the JavaRanch Naming Policy and adjust your display name to match it.

In particular, your display name must be a first and a last name separated by a space character, and must not be obviously fictitious.

Thanks!
bear
Forum Bartender

[Bear Bibeault]

Moved to HTML/Javascript.

[Eric Pascarello]

I would not delete the rows, I would just hide them (display="none") if you need to submit back their data to the server. Add a hidden element in one of the rows and set its value to 1 for visible and 0 for hidden. You would be able to determine what the status of the row is when you post back the form.

My 2 cents..

Eric