How to use a Javascript function for every element that has an id with a number attached

Question

I am trying to make a time sheet which can have multiple entries, so I have the following table set up, however, I am unsure how I would go about running the same function for every "total" element.

<table width="100%" id="table" border="0">
  <tr id="headers">
    <td width="15%">Name</td>
    <td width="15%">Info</td>
    <td width="10%">Monday</td>
    <td width="10%">Tuesday</td>
    <td width="10%">Wednesday</td>
    <td width="10%">Thursday</td>
    <td width="10%">Friday</td>
    <td width="10%">Total</td>
  </tr>
  <tr id="1">
    <td width="15%">
      <input name="name1" id="name1">
    </td>
    <td width="15%">
      <input name="info1" id="info1">
    </td>
    <td width="10%">
      <input name="mo1" id="mon1">
    </td>
    <td width="10%">
      <input name="tue1" id="tue1">
    </td>
    <td width="10%">
      <input name="wed1" id="wed1">
    </td>
    <td width="10%">
      <input name="thu1" id="thu1">
    </td>
    <td width="10%">
      <input name="fri1" id="fri1">
    </td>
    <td width="10%" id="total1"></td>
  </tr>
  <tr id="2">
    <td width="15%">
      <input name="name2" id="name2">
    </td>
    <td width="15%">
      <input name="info2" id="info2">
    </td>
    <td width="10%">
      <input name="mon2" id="mon2">
    </td>
    <td width="10%">
      <input name="tues2" id="tue2">
    </td>
    <td width="10%">
      <input name="wed2" id="wed2">
    </td>
    <td width="10%">
      <input name="thu2" id="thu2">
    </td>
    <td width="10%">
      <input name="fri2" id="fri2">
    </td>
    <td width="10%" id="total2"></td>
  </tr>
  <!-- More here -->
</table>

So, what will happen is people will put the information in the input fields, and then the id="total[i]" will calculate the total for the week. However, without doing a separate function for 1, 2, 3, etc. I have no idea how I'd be able to do a for loop for them.

I would recommend using an [Attribute Starts With selector](http://api.jquery.com/attribute-starts-with-selector/) and applying `each()` on the resulting set. — Frédéric Hamidi, Apr 11 '16 at 09:52
`$('td[id!='']').filter(function(){ return $(this).attr("id").match(/\d+$/); })` — Rayon, Apr 11 '16 at 09:52
@FrédéricHamidi I wouldn't - there's sufficient structure in the table to do this without using IDs at all. — Alnitak, Apr 11 '16 at 09:52
you need to create 2 loop first will handle tr and another will handle td — uzaif, Apr 11 '16 at 09:52
I would strongly suggest you use classes instead of incremental id attributes so you can easily DRY this up. — Rory McCrossan, Apr 11 '16 at 09:57
@Alnitak, probably. The advantage of using IDs is that you're resilient to structural changes. Rory suggests classes, which would work as well. — Frédéric Hamidi, Apr 11 '16 at 09:57
Means you want the total of the input that user inserted in to week text boxes ? and display it on the total column? — Kalpesh Rajai, Apr 11 '16 at 09:57
@FrédéricHamidi so put a class on the elements that require summing... — Alnitak, Apr 11 '16 at 09:58

frogatto · Answer 1 · 2016-04-11T09:57:51.740

1

If your total column is always the last column, you can use this selector:

tr td:last-child

Otherwise I would recommend to add a class like .total to all those elements and iterate through them using this selector:

.total

Given the selector you can use this code in order to apply something to each elements.

$(selector).each(function(){
    // here 'this' represents current being iterated matching element
});

edited Apr 11 '16 at 09:57

answered Apr 11 '16 at 09:53

frogatto

28,539
11
83
129

1

This could not answer the question, neither explain why/where to use it. – Lionel T Apr 11 '16 at 09:56

score 1 · Accepted Answer · answered Apr 11 '16 at 10:05

I would suggest that you amend your HTML code so that each tr is identical. This makes it much easier to write DRY code which works on any instance of the tr within your table, and also makes future maintenance much easier. To achieve this you can use classes to identify your td and input elements within the table, something like this:

$('.day').change(calcRowTotals).change();

function calcRowTotals() {
  $('table tr:gt(0)').each(function() {
    var $row = $(this), total = 0;
    $row.find('.day').each(function() {
      total += parseInt($(this).val(), 10) || 0;
    });
    $row.find('.total').text(total);
  });
}

html {
  padding: 50px 0 0;
}
input {
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" id="table" border="0">
  <tr id="headers">
    <td width="15%">Name</td>
    <td width="15%">Info</td>
    <td width="10%">Monday</td>
    <td width="10%">Tuesday</td>
    <td width="10%">Wednesday</td>
    <td width="10%">Thursday</td>
    <td width="10%">Friday</td>
    <td width="10%">Total</td>
  </tr>
  <tr>
    <td>
      <input name="name1" class="name">
    </td>
    <td>
      <input name="info1" class="info">
    </td>
    <td>
      <input name="mo1" class="mon day" value="1">
    </td>
    <td>
      <input name="tue1" class="tue day" value="2">
    </td>
    <td>
      <input name="wed1" class="wed day" value="3">
    </td>
    <td>
      <input name="thu1" class="thu day" value="4">
    </td>
    <td>
      <input name="fri1" class="fri day" value="5">
    </td>
    <td class="total"></td>
  </tr>
  <tr>
    <td>
      <input name="name2" class="name">
    </td>
    <td>
      <input name="info2" class="info">
    </td>
    <td>
      <input name="mon2" class="mon day" value="6">
    </td>
    <td>
      <input name="tues2" class="tue day" value="7">
    </td>
    <td>
      <input name="wed2" class="wed day" value="8">
    </td>
    <td>
      <input name="thu2" class="thu day" value="9">
    </td>
    <td>
      <input name="fri2" class="fri day" value="10">
    </td>
    <td class="total"></td>
  </tr>
  <!-- More here -->
</table>

After fiddling with this for a few minutes, I can seem to get it to work. I have tried it on document ready, set timeout (to run every few seconds), and onclick of a button, and even tried the script in the head, and at the bottom of the page. All of which don't change the value from 0, and Google Dev. tools don't output any errors. [Edit] Forgot to change from ID to class. All works great, thanks :D — jordsta95, Apr 11 '16 at 10:25

Alnitak · Answer 3 · 2016-04-11T10:23:04.760

There's sufficient structure in your table to be able to perform the math without resorting to row and/or column IDs at all. However the addition of a class attribute on the cells that contain the numbers you want to add up would simplify it somewhat whilst making the code more resilient to any future changes to your DOM.

In the code below, I've assumed that each input contains a class="count" attribute and that the final cell has a class="total" attribute.

$('#table .total').each(function(_, $total) {

    // find desired input cells
    var $counts = $total.closest('tr').find('.count');

    // extract an array of their values
    var count = $counts.map(function(_, el) {
        return +el.value;
    }).get();

    // add their values
    var total = count.reduce(function(a, b) {
        return a + b;
    }, 0);

    // store result
    $total.text(total);    
});

(Simpler summation methods exist, but I like the functional style of the .map / .reduce calls)

score 0 · Answer 4 · answered Apr 11 '16 at 10:09

Taking Ali Rezas advice, you should add a 'total' class to all your total elements.

Then, you would do something like this:

$('.total').each(function(){
    // first, find the containing 'tr' element
    var parentRow = $(this).closest('tr');

    var total = 0;

    // then iterate over all inputs (you may want to give these all a class as well)
    parentRow.find('input.class').each(function(){
        total += $(this).val();
    })
})

score 0 · Answer 5 · edited May 23 '17 at 11:50

Here is a function called calculateRow to use on each row providing a prefix letter.

It is important to nothe that an id that start with a number is not valid as HTML selector so I changed a little your ids an the because of this, the function look for a letter. More info about this here

function calculateRow(letter) {
  var inputs = document.querySelectorAll('#' + letter + ' [id$="'+ letter + '"]');
  var total = [].reduce.call(inputs, function(acc, next) {
    if (next.nodeName == 'INPUT' && next.value !== '') {
       return acc + parseInt(next.value)
    } else {
      return acc;
    }
  }, 0);

  return total;
}

document.querySelector('#getTotal-a').addEventListener('click', 
  function() {
    document.querySelector('#total-a').innerHTML = calculateRow('a');
}, false)

<table width="100%" id="table" border="0">
  <tr id="headers">
    <td width="15%">Name</td>
    <td width="15%">Info</td>
    <td width="10%">Monday</td>
    <td width="10%">Tuesday</td>
    <td width="10%">Wednesday</td>
    <td width="10%">Thursday</td>
    <td width="10%">Friday</td>
    <td width="10%">get Total</td>
    <td width="10%">Total</td>
  </tr>
  <tr id="a">
    <td width="15%">
      <input name="name1" id="name-a" value='1'>
    </td>
    <td width="15%">
      <input name="info1" id="info-a">
    </td>
    <td width="10%">
      <input name="mo1" id="mon-a">
    </td>
    <td width="10%">
      <input name="tue1" id="tue-a">
    </td>
    <td width="10%">
      <input name="wed1" id="wed-a">
    </td>
    <td width="10%">
      <input name="thu1" id="thu-a">
    </td>
    <td width="10%">
      <input name="fri1" id="fri-a">
    </td>
    <td width="10%">
      <button id=getTotal-a>tot</button>
    </td>
    <td width="10%" id="total-a">
    </td>
  </tr>
  </table>

How to use a Javascript function for every element that has an id with a number attached

5 Answers5