Как выбрать все первые элементы td и сплюсовать их значение?

Question

[Павел]

Есть собственно табличка

<table class="table table-bordered">
	  <thead>
		<tr>
		  <th> asfdsdfsdf </th>
		  <th> asfdsdfsdf </th>
		  <th> asfdsdfsdf </th>
		</tr>
	  </thead>
	  <tbody>
		<tr>
		  <td class="player1"><input type="number" placeholder="какое то число" value="" id="p1"> </td>
		  <td> Otto </td>
		  <td> @mdo </td>
		  <td>24443</td>
		</tr>
		<tr>
		  <td class="player1"><input type="number" placeholder="какое то число" value="" id="p1"> </td>
		  <td> Thornton </td>
		  <td> @fat </td>
		  <td>24443</td>
		</tr>
		<tr>
		  <td class="player1"><input type="number" placeholder="какое то число" value="" id="p1"> </td>
		  <td> the Bird </td>
		  <td> @twitter </td>
		  <td>24443</td>
		</tr>
	  </tbody>
</table>

мне надо приплюсовать все значения по колонкам , через js можно выбрать элемент по класс>input>value ? Если пишу бред поправьте :)
по сути мне надо значение в каждом первом td посчитать

Comments

[Dark Hole]

Вам нативным или через jquery?

[Павел]

желательно нативным , но думаю уже 2 примера хватит , спасибо

Answer 1

[Алексей Зуев]

var sum = Array.prototype.reduce.call(
	document.querySelectorAll('.player1 input[type="number"]'), 
  function(sum, item) {
    return sum + +item.value;
}, 0);

Живой пример

Comments

[keslo]

Красиво

[Dark Hole]

Я только не врубаюсь, зачем через прототип? И так прокатит

[Dark Hole]

keslo: кривовато

[Алексей Зуев]

Dark Hole: что именно Вас не врубает?

[Dark Hole]

Алексей Зуев: потому, что от querySelectorAll тоже будет массив, т. е. проще через него вызвать

[Алексей Зуев]

Dark Hole: ну попробуйте и пришлите ссылку на jsfiddle. Я тогда возьму ваше решение на вооружение.

[Dark Hole]

Алексей Зуев: блин, совсем забыл, что это массивоподобный объект

Answer 2

[Dark Hole]

Самым простым решением будет

// Native JS
var elements = document.getElementsByTagName('input');
      allValuesAsString = "";
      allValuesAsNumber = 0;
for(var counter = 0; counter < elements.length; counter++){
     allValuesAsString += elements[counter].value;
     allValuesAsNumber += parseInt(elements[counter]);
};
// jQuery
var elements = $('input');
      allValuesAsString = "";
      allValuesAsNumber = 0;
elements.each(function(){
      allValuesAsString += this.value;
      allValuesAsNumber += parseInt(this.value);
};

Но этот вариант подходит, только если у вас нет других инпутов.

// jQuery
var allValuesAsString = "";
      allValuesAsNumber = 0;
$('.player1 input').each(function(){
      allValuesAsString += this.value;
      allValuesAsNumber += parseInt(this.value);
});

Вот более хороший вариант(на Native JS другой человек уже написал).
Отмечу важную фишку моего кода: он читает даже не типизированые для чисел инпуты(т.е. он будет прибавлять число, которое он смог выделить)

Comments

[Дмитрий Ковальский]

Можно довести до ума добавив [type=number] и повесив класс.