?
Solved

How to parse the inner html of a data cell using Java Script.

Posted on 2014-07-15
10
Medium Priority
?
981 Views
Last Modified: 2014-07-16
I need to parse the innerHtml of the data located in each <td> cell using Java Script. Namely I need to do the following.
- Access each row in a table.
- In each row found, access each data element <td> that has an "<input" tag in it.
- If an input control is found, access the id of the input control, and the type of the control
- I must use strictly Java script and no JQuery.

So for the example below, for rows cbx_Row_1,cbx_Row2,cbx_Row_3 I need the following information. I assume the data will be parsed in a loop.

first loop pass : rpt_ctl03_altSelectBoxFirst,checkbox
second loop pass : rpt_ctl03_altSelectBoxSecond,checkbox
third loop pass : rpt_ctl03_altSelectBoxThird,checkbox



<tr Id="cbxRow_1"> 
   <td>
     <span name="123">
       <input  id="rpt_ctl03_altSelectBoxFirst" type="checkbox" name = "rpt$ctl03$altSelectBox" checked="checked">
     </span>
   </td>
 </tr>
  
   <tr Id="cbxRow_2"> 
   <td>
     <span name="123">
       <input  id="rpt_ctl03_altSelectBoxSecond" type="checkbox" name = "rpt$ctl03$altSelectBox" checked="checked">
     </span>
   </td>
 </tr>
  
   <tr Id="cbxRow_3"> 
   <td>
     <span name="123">
       <input  id="rpt_ctl03_altSelectBoxThird" type="checkbox" name = "rpt$ctl03$altSelectBox" checked="checked">
     </span>
   </td>

Open in new window

I know how to iterate through each row, however I don't know how to get the <input> controls and their ids and the control type. Can someone help me out?
Below is the code I have so far. If I search the innerHtml, I get a numeric value of either -1 or 1 to indicate if the value was found. That is useless to me. I need the actual control
values, I noted above.

var table = document.getElementById("PayTable");
   var r = 0;
   while(row=table.rows[r])
   {

	for(var c=0; m = table.rows[r].cells.length; c < m; c++)
        {
		var xx = table.rows[r].cells[c].innerHTML;

        }



   }

Open in new window

0
Comment
Question by:brgdotnet
  • 4
  • 3
  • 2
9 Comments
 
LVL 7

Expert Comment

by:Raghu Mutalikdesai
ID: 40198608
Try this. It will show a message box for each INPUT inside the table.
<script language="javascript">
function getInputs() {
	var tbl = document.getElementById("PayTable");
	var inputs = tbl.getElementsByTagName("input");
	for (var idx = 0; idx < inputs.length; idx++) {
		var input = inputs[idx];
		alert(input.id + " = " + input.value);
	}
}
</script>

Open in new window

0
 
LVL 2

Author Comment

by:brgdotnet
ID: 40199081
I can not use the getElementsByTagName approach.


It would be nice however there is a specific reason I can't use it. Instead I need to parse through each row at a time and search for the input tag as I noted in my post. So that was why I wanted to take the approach of searching the innerHtml.
0
 
LVL 7

Accepted Solution

by:
Raghu Mutalikdesai earned 1440 total points
ID: 40199201
Then, you will have a lot of code! Here you go:
function getCellHtml() {
    var tbl = document.getElementById("PayTable");
    for (var rIdx = 0; rIdx < tbl.rows.length; rIdx++) {
        var row = tbl.rows[rIdx];
        for (var cIdx = 0; cIdx < row.cells.length; cIdx++) {
            var cell = row.cells[cIdx];
            for (var idx = 0; idx < cell.childNodes.length; idx++) {
                var child = cell.childNodes[idx];
                if (child.nodeName != null && child.nodeName != undefined && 
                    child.nodeName.toUpperCase() == "SPAN") {
                    for (var x = 0; x < child.childNodes.length; x++) {
                        var ctrl = child.childNodes[x];
                        if (ctrl.nodeName != null && ctrl.nodeName != undefined && 
                            ctrl.nodeName.toUpperCase() == "INPUT") {
                            alert(ctrl.id + " = " + ctrl.value);
                            break;
                        }
                    }
                    break;
                }
            }
        }
    }
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40199891
> I must use strictly Java script and no JQuery.

Is this for school? or live project?  What you are asking to do is perfect for jquery and can be done in a few lines that is very easy to read and understand.
0
 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 200 total points
ID: 40199944
0
 
LVL 2

Author Comment

by:brgdotnet
ID: 40201133
Hi Scott, the question is similar but not the same. I need to access individual elements. Thanks.
0
 
LVL 2

Author Closing Comment

by:brgdotnet
ID: 40201134
Thanks gentlemen.
0
 
LVL 7

Expert Comment

by:Raghu Mutalikdesai
ID: 40201144
Thanks for considering my answer
0
 
LVL 2

Author Comment

by:brgdotnet
ID: 40201166
Your welcome, thanks.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question