Retrieve values into JavaScript from a Table

[gchq]

Hi there

Here is the situation - a table is built dynamically with values in the cells I need to retrieve and enter into a database. I have found a way of getting values using JavaScript, but of course with the table being dynamic I have no idea how many rows it will contain. One way is using the TableID.rows.count and then building if statements based on the value - but that is going to be an awfull lot of coding...... So the question is - is there an easier way to retrieve the values? I know that building an array is the answer, but actually getting from A to B is giving me the headache. Any pointers would be appreciated!

Here is the JavaScript that works - but has the limits above. Any ideas would be appreciated!

 
Dim GetValues As String = "<script language='JavaScript'>" & _
                        "var table= document.getElementById('Table1'); " & _
                        "var nRows = new Array(); " & _
                        "nRows[0] = table.rows[2]; " & _
                        "nRows[1] = table.rows[3]; " & _
                        "nRows[2] = table.rows[4]; " & _
                        "nRows[3] = table.rows[5]; " & _
                        "nRows[4] = table.rows[6]; " & _
                        "nRows[5] = table.rows[7]; " & _
                        "nRows[6] = table.rows[8]; " & _
                        "nRows[7] = table.rows[9]; " & _
                        "nRows[8] = table.rows[10]; " & _
                        "nRows[9] = table.rows[11]; " & _
                        "var ID1 = nRows[0].cells[0]; " & _
                        "var ID2 = nRows[1].cells[0]; " & _
                        "var ID3 = nRows[2].cells[0]; " & _
                        "var vID1 = ID1.innerText; " & _
                        "var vID2 = ID2.innerText;" & _
                        "var vID3 = ID3.innerText; " & _
                        "var vQty1 = document.getElementById('ctl00_txt0').value ; " & _
                        "document.getElementById('Label1').innerText = vID1 ; " & _
                        "document.getElementById('Label2').innerText = vID2 ; " & _
                        "document.getElementById('Label3').innerText = vID3 ; " & _
                        "document.getElementById('Label4').innerText = vQty1 ; " & _
                        "</script>"
 
            GetValues = GetValues.Replace("Table1", Table1.ClientID).Replace("Label1", Label1.ClientID).Replace("Label2", Label2.ClientID).Replace("Label3", Label3.ClientID).Replace("Label4", Label4.ClientID)
            Page.ClientScript.RegisterStartupScript(Me.GetType(), "GetValues", GetValues)
 
 

[acoder]

Define a tbody under your table that encapsulates your TRs and TDs.

Then, assuming an id of "tbody", use the following code to retrieve the current row count:

var currRow = document.getElementById("tbody").rows.length;

[acoder]

Actually, I'm not sure if defining tbody is necessary, but it works for me. Give it a shot.

[gchq]

I can get the rows simply by :-

var totalrows = table.rows.length;

The problem I've got is how to define the array (once the total number of rows are known) and then get the variables into a database.

BTW, the first two rows are only headers and don't contain data, and the last row contains a total in cell 3.

[acoder]

Why don't you just define the array when constructing the table in your ASP (I presume you're using ASP?) code. You can ignore the first two rows when populating the array with values. Then you can also have a variable which stores the total value that you mention. The database problem is totally ASP-related, nothing to do with javascript.

[gchq]

Having re-read my initial posting, it does seem rather ambiguous. I apologise for that.

Here is a better description of the dynamic table:-

Row 0 is the header
Row 1 contains description in 6 columns
Row 2 onwards contain the dynamic rows. Cell 2 contains an <input> textbox (not a TextBox Control).
The final row contains a total in cell 3

Under the me.load event I then need to run a script to first find how many rows, then get those rows into an Array, then manipulate the data from that array (update a database, send to another page..)

I do know that by using:-

var table= document.getElementById('Table1');

I can get the table rows and cells, and by using

var totalrows = table.rows.length; (Thanks acoder :-) )

I can get the total number of rows

I also know that

var nRows = new Array();
nRows[0] = table.rows[2]

defines the first set of values in the first column (I can retrieve the other values back from the database once I have the ID number from this column)

and that I can get the value of the first TextBox (that gives the quantity) with

vQty1 = document.getElementById('txt0').value ;

each textbox in the row has an incremented ID value - txt0, txt1, txt2 and so on

Where I hit the buffers is formatting an array to hold the data, then finding a way of retrieving it again!

I have come across the following snippet :-

for(var i = 0; i < x.x.length; i++)

Whilst I know there is a key there somewhere,,,, sigh

[gchq]

Why don't you just define the array when constructing the table in your ASP

The main problem is the table is fomed in a .NET MasterPage - the processing page is the content. .NET loads the processing page first, then the masterpage, so it's impossible to capture the variables in VB - since JavaScript runs AFTER the full page load (and I can do that in VB code behind) I will get the variables that have loaded AFTER the processing page. (Otherwise VB will always return a value of 3 for the rows (the two headers and the footer).

[gchq]

This seems rather messy, but it gets values up to a max. pre-defined amount of rows into a container to process!

If anyone knows an easier way (and I'm sure there is) I'd love to know about it!

 
 
Dim vTotalRows As Integer = Request.QueryString("vID")
        HiddenField1.Value = CStr(Request.QueryString("total"))
        Dim Table1 As HtmlTable = Master.FindControl("Table1")
        Dim vValue1 As String = CType(Me.Page.Master.FindControl("TextBox3"), TextBox).Text
        TextBox3.Text = vValue1
 
        If vTotalRows > 3 Then
            'start JavaScript
            Dim GetValues As String = "<script language='JavaScript'>" & _
            "var table= document.getElementById('Table1'); " & _
            "var totalrows = table.rows.length; " & _
            "var i = (totalrows - 3) ; " & _
            "var nID = new Array(i); " & _
            "nID[0] = table.rows[2].cells[0].innerText; " & _
            "var vQty1 = document.getElementById('ctl00_txt0').value ; " & _
            "if (i > 1) { " & _
            "nID[1] = table.rows[3].cells[0].innerText; " & _
            "var vQty2 = document.getElementById('ctl00_txt1').value ; " & _
            "}" & _
            "else { " & _
            "nID[1] = ''; " & _
            "var vQty2 = '' ;" & _
            "}" & _
            "if (i > 2) { " & _
            "nID[2] = table.rows[4].cells[0].innerText; " & _
            "var vQty3 = document.getElementById('ctl00_txt2').value ; " & _
            "}" & _
            "else { " & _
            "nID[2] = '' ;" & _
            "var vQty3 = '' ;" & _
            "} " & _
            "if (i > 3) { " & _
            "nID[3] = table.rows[5].cells[0]; " & _
            "var vQty4 = document.getElementById('ctl00_txt3').value ; " & _
            "} " & _
            "else { " & _
            "nID[3] = '' ; " & _
            "var vQty4 = '' ; " & _
            "}" & _
            "if (i > 4) { " & _
            "nID[4] = table.rows[6].cells[0]; " & _
            "var vQty5 = document.getElementById('ctl00_txt4').value ; " & _
            "} " & _
            "else { " & _
            "nID[4] = ''; " & _
            "var vQty5 = '' ; " & _
            "} " & _
            "if (i > 5) { " & _
            "nID[5] = table.rows[7].cells[0]; " & _
            "var vQty6 = document.getElementById('ctl00_txt5').value ; " & _
            "} " & _
            "else { " & _
            "nID[5] = '' ; " & _
            "var vQty6 = '' ; " & _
            "}" & _
            "if (i > 6 ) { " & _
            "nID[6] = table.rows[8].cells[0]; " & _
            "var vQty7 = document.getElementById('ctl00_txt6').value ; " & _
            "} " & _
            "else { " & _
            "nID[6] = '' ; " & _
            "var vQty7 = '' ; " & _
            "}" & _
            "document.getElementById('Label1').innerText = nID[0] ; " & _
            "document.getElementById('Label2').innerText = nID[1] ; " & _
            "document.getElementById('Label3').innerText = nID[2] ; " & _
            "document.getElementById('Label4').innerText = vQty1 ;" & _
            "document.getElementById('Label5').innerText = vQty2 ; " & _
            "document.getElementById('Label6').innerText = vQty3 ; " & _
            "</script>"
            'end JavaScript
            GetValues = GetValues.Replace("Table1", Table1.ClientID).Replace("Label1", Label1.ClientID)
            GetValues = GetValues.Replace("Label2", Label2.ClientID).Replace("Label3", Label3.ClientID).Replace("Label4", Label4.ClientID)
            GetValues = GetValues.Replace("Label5", Label5.ClientID).Replace("Label6", Label6.ClientID)
            Page.ClientScript.RegisterStartupScript(Me.GetType(), "GetValues", GetValues)
        Else
            Label1.Text = "Table is empty!"
        End If