0

I have an html table that has 5 columns. 2 columns are checkboxes (entry and high) and the other 3 are data. I have 2 buttons, one is called entry and the other high. When a user clicks on the high button, I'm trying to check the column (high) only and get all that is checked, take those values and average them. The same with entry, when the entry button is clicked, check only the checkboxes in column (entry) and take those values and average them. So far I have a function to check both columns but not sure how to separately check and separate the columns to each button function only. I have tried the below, but the GetHigh function doesn't work. Any points in the right direction would be appreciated!

Table

<td><input type="checkbox" class="entry" id="entry" value="{{$sup->entry}}" name="rows[]"></td>
<td><input type="checkbox" class="high" id="high" value="{{$sup->high}}" name="rows[]"></td>
<td><span style="color: #007E33">{{$sup->entry}} </span></td>
<td><span style="color: #007E33">{{$sup->high}} </span></td>
<td><span style="color: #007E33">{{$sup->days}} </span></td>

Buttons

<a href="#here" class="btn btn-primary btn-pill w-10" id="entry" onclick="GetEntry()">
                                     Entry Average
                                 </a>
<a href="#here" class="btn btn-primary btn-pill w-10" id="high" onclick="GetHigh()">
                                     High Average
                                 </a>

Javascript

function GetEntry() {
                             //Create an Array.
                             var selected = new Array();

                             //Reference the Table.
                             var supTable = document.getElementById("supTable");

                             //Reference all the CheckBoxes in Table. I WANT ONLY THE ENTRY COLUMN
                             var entry = supTable.getElementsByTagName("INPUT");

                             // Loop and push the checked CheckBox value in Array.
                             for (var i = 0; i < entry.length; i++) {
                                 if (entry[i].checked) {
                                     selected.push(entry[i].value);

                                 }

                             }
                             // alert("Average: " + calculate(selected));
                             $(".text-message").text("Average: " + calculate(selected)).show();

                         }

function GetHigh() {
                             //Create an Array.
                             var selected = new Array();

                             //Reference the Table.
                             var supTable = document.getElementById("supTable");

                             //Reference all the CheckBoxes in Table. I WANT ONLY THE ENTRY COLUMN
                             var entry = supTable.getElementsByName("High");

                             // Loop and push the checked CheckBox value in Array.
                             for (var i = 0; i < high.length; i++) {
                                 if (high[i].checked) {
                                     selected.push(high[i].value);

                                 }

                             }
                             // alert("Average: " + calculate(selected));
                             $(".text-message").text("Average: " + calculate(selected)).show();

                         }

2 Answers 2

0

getElementsByName is used to select HTML where their name="" attribute matches what you've entered, in this case 'High'. But your HTML in the example shows a different name.

You want to use querySelectorAll('high') to get all of the elements that have class="high" set.

0

You can use a css selector to get the cells of your table

const getCheckboxes = columnIndex =>document.querySelectorAll(`tbody td:nth-child(${columnIndex}) input:checked`);

Or add a common class and select by the class to the checkboxes

const getCheckboxes = className =>document.querySelectorAll(`tbody .${className}:checked`);

Basic example:

const getCheckedCheckboxesClassName = className => document.querySelectorAll(`tbody .${className}:checked`);


const getCheckedCheckboxesByIndex = columnIndex =>document.querySelectorAll(`tbody td:nth-child(${columnIndex}) input:checked`);

const sumValues = cbs => [...cbs].reduce((total, cb) => total + +cb.value, 0);

const getTotal = (group) => {
  const cbs = getCheckedCheckboxesClassName(group);
  const value = sumValues(cbs);
  console.log(value);
}


const getTotalIndex = (index) => {
  const cbs = getCheckedCheckboxesByIndex(index);
  const value = sumValues(cbs);
  console.log(value);
}
<button type="button" onclick="getTotal('low'); getTotalIndex(1)">low</button>
<button type="button" onclick="getTotal('high'); getTotalIndex(2)">high</button>

<table>
  <tbody>
    <tr>
      <td><input class="low" type="checkbox" value="1" /></td>
      <td><input class="high" type="checkbox" value="10" /></td>
    </tr>
    <tr>
      <td><input class="low" type="checkbox" value="2" /></td>
      <td><input class="high" type="checkbox" value="20" /></td>
    </tr>
    <tr>
      <td><input class="low" type="checkbox" value="3" /></td>
      <td><input class="high" type="checkbox" value="30" /></td>
    </tr>
    <tr>
      <td><input class="low" type="checkbox" value="4" /></td>
      <td><input class="high" type="checkbox" value="40" /></td>
    </tr>
    <tr>
      <td><input class="low" type="checkbox" value="5" /></td>
      <td><input class="high" type="checkbox" value="50" /></td>
    </tr>
  </tbody>
</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.