The code functions to meet all the requirements listed above table, except the last one listed in bold.
Can't figure out how to do this part without breaking the clickable requirements. -The code also needs to function properly if rows are added or removed without hard coding the rows, and no buttons. Needs to function dynamically, regardless of how man rows are added or deleted in the form/table.
I know I am close and have a feeling .elementByTagName or another element property or append or function has to do with the solution but not sure what or where to apply it. Any examples or clues to help me would be great, as I am a new student to Javascript it would help to see visually with examples of what I need to do. Terminology is in my book, so examples would help me understand. Thank you. My html/Javasrcipt code block:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://ift.tt/mOIMeg">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Checkboxes </title>
<link type="text/css" rel="stylesheet" href="checkboxes.css" />
<script type="text/javascript">
"use strict";
/* <![CDATA[ */
/* checks the row for input tag names to see if checked already or not */
function check_row(gets_tag){ //c
var r = gets_tag.getElementsByTagName('input')[0];
r.checked=!r.checked;
};
/* array that goes through each row looking for name (checkbox) make it checked */
function toggles_all(status){ //n
var name = [
'box_1',
'box_2',
'box_3',
'box_4',
'box_5',
'box_6',
'box_7',
'box_8',
'box_9',
'box_10',
'box_11'
], b, i=0;
while( b = name[ i++ ] ) {
document.getElementsByName( b )[ 0 ].checked=status;
}
};
/* ]]> */
</script>
</head>
<body>
<h4> REQUIREMENTS</h4>
<ul>
<li> When the user checks the 'Select All' checkbox, it should toggle all the customer
checkboxes to the checked state</li>
<li> When the user unchecks the 'Select All' checkbox, it should toggle all the customer
checkboxes to the unchecked state </li>
<li>When the user clicks anywhere in a row, the check box for that row should toggle to the
opposite state</li>
<li>If the checkbox was checked, it should toggle to unchecked<br />If the checkbox was unchecked, it should toggle to </li>
<li>When an individual customer checkbox is clicked, that checkbox should toggle to the
opposite state</li>
<li>If the checkbox was checked, it should toggle to unchecked<br />If the checkbox was unchecked, it should toggle to checked</li>
<h4>The code also needs to function properly if table rows are added or removed</h4>
</ul>
<form action="">
<table>
<thead>
<tr> <!--scope="col"-->
<th class="titles">Date</th>
<th class="titles">Customer</th>
<th class="titles">Gross Amount</th>
<th class="titles">Select</th>
</tr>
</thead>
<tfoot><!-- table footer-->
<tr>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span><input name="checkall" id="checkall" type="checkbox" value="checkall" onclick="toggles_all(this.checked);"/> Select All </span></td>
<!-- only Select All checkbox is clickable the row is not active -->
</tr>
</tfoot><!-- end footer section -->
<tbody> <!--clickable rows w/ checkboxes -->
<tr id="row1" onclick="check_row(this)">
<td> 2017-01-19 </td>
<td> Casey Wiley </td>
<td> 22.95 </td>
<td><input id="box_1" name="box_1" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row2" onclick="check_row(this)">
<td> 2017-01-19 </td>
<td> Casey Karr </td>
<td> 17.45 </td>
<td><input id="box_2" name="box_2" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row3" onclick="check_row(this)">
<td> 2017-01-17 </td>
<td> Sharon Chapman </td>
<td> 17.45 </td>
<td><input id="box_3" name="box_3" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row4" onclick="check_row(this)">
<td> 2017-01-19 </td>
<td> Bill Smith </td>
<td> 17.45 </td>
<td><input id="box_4" name="box_4" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row5" onclick="check_row(this)">
<td> 2017-01-17 </td>
<td> Bob Jones </td>
<td> 17.45 </td>
<td><input id="box_5" name="box_5" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row6" onclick="check_row(this)">
<td> 2017-01-19 </td>
<td> Betty Boop </td>
<td> 17.45 </td>
<td><input id="box_6" name="box_6" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row7" onclick="check_row(this)">
<td> 2017-01-17 </td>
<td> Chucky Cheese </td>
<td> 17.45 </td>
<td><input id="box_7" name="box_7" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row8" onclick="check_row(this)">
<td> 2017-01-19 </td>
<td> Harvey Wallbanger </td>
<td> 17.45 </td>
<td><input id="box_8" name="box_8" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row9" onclick="check_row(this)">
<td> 2017-01-17 </td>
<td> Upton Sinclair </td>
<td> 17.45 </td>
<td><input id="box_9" name="box_9" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row10" onclick="check_row(this)">
<td> 2017-01-19 </td>
<td> Vladimir Putin </td>
<td> 17.45 </td>
<td><input id="box_10" name="box_10" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
<tr id="row11" onclick="check_row(this)">
<td> 2017-01-17 </td>
<td> Donald Trump </td>
<td> 17.45 </td>
<td><input id="box_11" name="box_11" type="checkbox" value="Y" onclick="this.checked=!this.checked" /></td>
</tr>
</tbody><!-- end clickable rows -->
</table>
</form><!-- END TABLE-->
<p> NOTE: The header and footer are not selectable rows when clicking each row.</p>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire