DeleteRow() not working 2

[cdw0308]

I have two functions addrow() and deleterow(i)
The delete row function works for the first row on the table and then will not delete any others.
The addrow function works everytime.

Here is my code. Any help would be greatly appreciated..

<script language="javascript"> 
function deleteRow(i)
{
document.getElementById('table1').deleteRow(i)
}
function addRow() 
{ 
var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0]; 
var row = document.createElement("TR"); 
var cell1 = document.createElement("TD"); 
var inp1 =  document.createElement("INPUT"); 
inp1.setAttribute("type","text"); 
inp1.setAttribute("value",""); 
cell1.appendChild(inp1); 
var cell2 = document.createElement("TD"); 
var inp2 =  document.createElement("INPUT"); 
inp2.setAttribute("type","text"); 
inp2.setAttribute("value",""); 
cell2.appendChild(inp2); 
var cell3 = document.createElement("TD"); 
var inp3 =  document.createElement("INPUT"); 
inp3.setAttribute("type","text"); 
inp3.setAttribute("value",""); 
cell3.appendChild(inp3);
var cell4 = document.createElement("TD"); 
var inp4 =  document.createElement("INPUT"); 
inp4.setAttribute("type","button"); 
inp4.setAttribute("value","Delete"); 
inp4.setAttribute("onClick", "deleteRow(this.parentNode.parentNode.rowindex)");
cell4.appendChild(inp4);

row.appendChild(cell1); 
row.appendChild(cell2); 
row.appendChild(cell3); 
row.appendChild(cell4);
tbody.appendChild(row); 

//alert(row.innerHTML); 
} 
</script>

<table id="table1"> 
<tbody> 
<tr> 
<td><input type="text" value=""></td> 
<td><input type="text" value="" width="10"></td> 
<td><input type="text" value="" width="10"></td> 
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr> 
</tbody> 
</table> 
<input type="button" value="Insert Row" onClick="addRow();">

 

[kaht]

The problem with your code is: nothing
(other than naming a function deleteRow that calls a method deleteRow - you should probably rename your function for clarity)

The problem: IE has poor support for setting event handlers via setAttribute.

Read here for more info:

http://justinfrench.com/index.php?id=25

to set the onclick handler for the button you need to access the onclick handler directly instead of using dom methods:

inp4.onclick = function () {deleteRow(this.parentNode.parentNode.rowindex));}

coincidentally, I bet your old code probably worked fine in opera and firefox

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[cdw0308]

That seemed to work. It now deletes rows.
However it is always deleting the first row in the table no matter which row I click on.
I would like to click on a row and have it delete that specific row.
Any ideas on what I am missing?

 

[tsuji]

>[tt]inp4.onclick = function () {deleteRow(this.parentNode.parentNode.rowindex));}[/tt]
[tt]inp4.onclick = function () {deleteRow(this.parentNode.parentNode.row[red]I[/red]ndex));}[/tt]

 

[cdw0308]

That worked.
Thanks alot.
I only have one more thing. This may not be the correct forum to post it in.
I am trying to now send the data on all the rows in the table to a database.
I am using Coldfusion and I would like to write a for loop to capture all data on the lines and send it to the database table.
Any help would be greatly appreciated.

 

[kaht]

You could either write a javascript process to scan the table and extract the values into a hidden variable and submit the form that the variable resides in.

or

Write a javascript process to scane th table and extract the values and then use AJAX to pass the information to the server.

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[cdw0308]

Not sure if I understand.
Can you give me an example of the code that would scan through a table and extract values to hidden variables and then submiting the variables?

 

[kaht]

Just use DOM methods to traverse down the table and pull the text nodes from each td - your first post shows that you have a firm grasp of how the DOM works. This should be a fairly simple task using this method.

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[cdw0308]

I am not all that familar with DOM methods. I have just simply modified my first post to work for me. I am not sure how to proceed to pull the text nodes from each td and post them to a database.
Some sample code for me to experiment with would help.
Thanks

 

[kaht]

This question has strayed from the original topic so please post a new thread if you have further questions.

Here's an example of how to pull the data from a table:

<script type="text/javascript">

function extractTableData(tbl) {
   var resultArray = new Array();
   //loop thru the rows in the table
   for (i = 0; i < tbl.rows.length; i++) {
      //loop thru the data in the row
      for (j = 0; j < tbl.rows[i].childNodes.length; j++) {
         //ensure whitespace is not treated as a node
         if (tbl.rows[i].childNodes[j].style) {
            //append this row data to the array
            resultArray.push(tbl.rows[i].childNodes[j].innerHTML);
         }
      }
   }
   var resultString = "";
   for (k = 0; k < resultArray.length; k++) {
      resultString += k + ": " + resultArray[k] + "\n";
   }
   alert(resultString);
}

</script>

<table id="theTable" border="1">
   <tr>
      <td>This</td>
      <td>is</td>
   </tr>
   <tr>
      <td>all</td>
      <td>the</td>
   </tr>
   <tr>
      <td>table</td>
      <td>data</td>
   </tr>
</table>

<input type="button" value="display table data" onclick="extractTableData(document.getElementById('theTable'))" />

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[tsuji]

Table element exposes table-specific members like rows and cells, mirroring the underlying matrix. This is how I would approach to get the function work as kaht demonstrated.
[tt]
function extractTableData2(tbl) {
var resultArray = new Array();
//loop thru the rows in the table
for (var i = 0; i < tbl.rows.length; i++) {
//loop thru the data in the row
for (var j = 0; j < tbl.rows.cells.length; j++) {
resultArray.push(tbl.rows.cells[j].innerHTML);
}
}
var resultString = "";
for (var k = 0; k < resultArray.length; k++) {
resultString += k + ": " + resultArray[k] + "\n";
}
alert(resultString);
}
[/tt]

 

[BillyRayPreachersSon]

I am trying to now send the data on all the rows in the table to a database.
I am using Coldfusion and I would like to write a for loop to capture all data on the lines and send it to the database table.

Then why not simply submit the form to a back-end page which does this? I wouldn't go using client-side JavaScript for this.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cdw0308]

Dan,
Yes, I would like to submit the form to a back end page but I am not sure how to capture all the info on every line of the table into a field to submit to the backend page.

 

[tsuji]

If those table entries are not input elements, then you can make each row an additional column (td) with input hidden type with some naming convention so that the action page can easily be scripted to capture them. When the form is submitted, you make sure the onsubmit handler write a, say, comma (or some exotic separator) delimited string to the corresponding hidden input of each. How to construct this "comma" delimited string? The demonstration of kaht (or my version of the same) is meant to show you the method.

 

[cdw0308]

My table is setup as in my first post. They are input fields with a function that adds more rows to the table when needed. I do have names on my input fields now and when i submit the form i can retrieve the first row of the table. All other rows drop off.
I am just simply calling the field name in the back end page.
I believe i would have to use something like your for loop to retrieve all the data but i do not want it to go to an alert box.
I need it to go to send the data to the backend page.

 

[tsuji]

>i do not want it to go to an alert box.
Nothing essential for the use of alert box. It is just to show you what you get. Nothing is forcing you to use alert. That's how people develop work-in-progress of a functionality.

 

[cdw0308]

Ok,
I figured that was all there was to the alert.
So, this line should have all my data in it.

 resultArray.push(tbl.rows[i].childNodes[j].innerHTML);

Now, how do I retrieve that data from the array onto a coldfusion insert query on my backend page.

 

[tsuji]

If I take a look again at your first post, each cell is being an input element of its own. Then why don't you assign a name attribute to it. It would be posted back to the backend each as an entry to the request object each with a name of its own.

Now, how do I retrieve that data from the array onto a coldfusion insert query on my backend page.

You ask me how... I might tempt to reply. But, let me ask you, in order to cover my ignorance, how do you retrieve a state input element? Would it be any different from retrieving a dynamic input element once a name be given to distinguish them? With those verbose detour, what I'm saying is really you should ask coldfusion forum which deal with the server-side scripting.

 

[cdw0308]

I will try to seek some answers in the coldfusion forum.

I have given names to the input cells already. I called them txt1,txt2,txt3. On my backend page I just call the fields and it returns there value.
Such as: #txt1# <br> #txt2# <br> #txt3#
This works for the first row of the table. But with the table being dynamic I am only really calling the first row and not all contents of the table.

Thanks for all the help. I really appreciate it.

 

[tsuji]

Please don't feel bad if my response is angular. I think once you assign distinct name attributes to all of them with a characteristic reflecting the matrix locations, the retrieval of them server-side is just like you retieve any static input element. But, it is logic to pose to cf forum if you have some uncertainty in detail to overcome.