Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 468
  • Last Modified:

how to access a checkbox control located in a <td> cell and or a <span> tag.

I am using Java Script, and am required to use strictly Java Script and no JQuery.

Basically I have a large size web page. When a button on the page is clicked, a java script method "goThroughROws()" is called.
Basically the method needs to itereate through every row, and wherever a check box control has been encountered, the
Java Script method needs to uncheck all of the check box controls on the page.

My function will iterate through each row, However I am at a loss in trying to figure out how to iterate through each data table
cell and then to access each check box control inside of the data cell. Some of the checkbox controls are also contained in span tags, so that seems to add complexity to
the problem.

So in a nut shell, my question is asking how I can access each check box control located in the data cells, even if the check box controls are contained in span tags?


<table>
 <tr Id="Row_1">
   <td>Totals</td>
 </tr>

 <tr Id="Row_1">
   <td>Totals</td>
 </tr>

 <tr Id="cbxRow_1"> 
   <td><span name="123"><input id="rpt_ctl03$txtAmount" id="rpt_ctl03_altSelectBox" type="checkbox" name = "rpt$ctl03$altSelectBox" checked="checked"   </span></td>
 </tr>



</table>

Open in new window

function goThroughRows()
{

   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;
                alert(xx)

        }



   }





}

Open in new window

0
brgdotnet
Asked:
brgdotnet
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Part of your problem is you are working with invalid html and js code.
http://jsbin.com/ximez/1/edit
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Q_28475871</title>
  <script>
 function goThroughRows() {
     var inputs = document.getElementsByTagName('input');
     for (var i = 0; i < inputs.length; i += 1) {
         inputs[i].checked = false;
     }
 }  
    </script>
</head>
<body>
  <button onclick="goThroughRows()">Unselect</button>
<table>
 <tr Id="Row_1">
   <td>Totals</td>
 </tr>

 <tr Id="Row_2">
   <td>Totals</td>
 </tr>

 <tr Id="cbxRow_1"> 
   <td>
     <span name="123">
       <input id="rpt_ctl03$txtAmount" id="rpt_ctl03_altSelectBox" type="checkbox" name = "rpt$ctl03$altSelectBox" checked="checked">
     </span>
   </td>
 </tr>
  
   <tr Id="cbxRow_2"> 
   <td>
     <span name="123">
       <input id="rpt_ctl03$txtAmount2" id="rpt_ctl03_altSelectBox" type="checkbox" name = "rpt$ctl03$altSelectBox" checked="checked">
     </span>
   </td>
 </tr>
  
   <tr Id="cbxRow_3"> 
   <td>
     <span name="123">
       <input id="rpt_ctl03$txtAmount3" id="rpt_ctl03_altSelectBox" type="checkbox" name = "rpt$ctl03$altSelectBox" checked="checked">
     </span>
   </td>
 </tr>



</table>
</body>
</html>

Open in new window

0
 
brgdotnetAuthor Commented:
Thanks Scott, getElementsByTagName works great. I might need to ask a different question that is very similar.
0
 
brgdotnetAuthor Commented:
Thanks
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now