Javascript-форум - Динамическая замена HTML в таблице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Динамическая замена HTML в таблице (https://javascript.ru/forum/misc/48221-dinamicheskaya-zamena-html-v-tablice.html)

Динамическая замена HTML в таблице

Дано: таблица с большим набором имен и оценок (код сокращаю до минимума).

Код:

<table>

    <tr>

      <td>Newton</td>

      <td>75</td>

    </tr>

    <tr>

      <td>Darwin</td>

      <td>94</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td>Average</td>

      <td>?</td>

    </tr>

  </tfoot>

</table>

Необходимо высчитать среднюю оценку и вместо знака вопроса подставить получившиеся значение. Запутался немного с вычленением нужной клетки со знаком вопроса и не могу динамически заменить значение самой клетки.

Подскажите, где моя ошибка.

function calcAverage(){
        var grades = document.getElementsByTagName("td");
        var average = Number;
        var sum = 0;
        var divider =0;
        for (i=0; i < grades.length; i++){
	        //if(typeof(grades[i].innerHTML) == Number) {
	        if ((i%2) && (grades[i].innerHTML !== "?")) {
	        	grade = Number(grades[i].innerHTML);
	        	sum = sum + grade;
	        	alert(sum);
	        	return sum;
	        	divider++;
	        	return divider;   
	   	    	}

	   	    /* else if (grades[i].innerHTML=="?") {

	   	   	} */

	   	    var tfooter = document.getElementsByTagName('tfoot').outerHTML;
			var questionMark = tfooter.getElementsByTagName('tr').lastChild.innerHTML;
			alert(questionMark);
			questionMark.innerHTML = sum/divider;

	   	    //var questionMark = document.getElementsByTagName("tfoot tr").lastChild.innerHTML;
	   	    //questionMark.innerHTML = 0;
	   	    //alert(sum/divider);

ArMikael,
не?

<html>
<body>
<table>
    <tr>
      <td>Newton</td>
      <td>75</td>
    </tr>
    <tr>
      <td>Darwin</td>
      <td>94</td>
    </tr>
  <tfoot>
    <tr>
      <td>Average</td>
      <td>?</td>
    </tr>
  </tfoot>
</table>

<script type="text/javascript">

function calcAverage(){
        var grades = document.getElementsByTagName("td");
        var average = Number;
        var sum = 0;
        var divider =0;
	var grade;
        for (i=0; i < grades.length; i++){
	        //if(typeof(grades[i].innerHTML) == Number) {
	        if ((i%2) && (grades[i].innerHTML !== "?")) {
	        	grade = Number(grades[i].innerHTML);
	        	sum = sum + grade;
	        	divider++;  
	   	    	}

	   	     else if (grades[i].innerHTML=="?") {
			var average = Number(sum/divider);
			var tfoot = document.getElementsByTagName("tfoot")[0];
			tfoot.getElementsByTagName("tr")[0].children[1].innerHTML = average;
	   	   	} 

	   	    
	}
}
calcAverage();

</script>
</body>
</html>

jule, спасибо, действительно помогло.
А можете объяснить, почему не сработал мой вариант и принцип работы

var tfoot = document.getElementsByTagName("tfoot")[0];

?
Указывая нулевую ячейку массива и тем самым превращая tfoot в массив мы говорим собрать в эту ячейку все, что находится внутри тега tfoot?

ArMikael,

var tfoot = document.getElementsByTagName("tfoot");
alert(typeof tfoot)//В Chrome,например, выведет "бла-бла-бла HTMLCollection"

Т.е. это несколько элементов (на это указывает typeof - ... Collection и var tfoot = ... getElements... ).
Чтобы обратиться к одному их них, например, к первому, мы дописываем в квадратных скобках индекс.

Цитата:

Указывая нулевую ячейку массива и тем самым превращая tfoot в массив...

Ссылка на элемент уже находится в массиве.Т.е. мы уже работаем с массивом. Подробнее читайте здесь:http://javascript.ru/tutorial/dom/search#drugie-sposoby

jule,
Спасибо за пояснения и за ссылку. Понял, что при таком запросе возвращается список узлов, а номером ячейке мы указываем какой именно узел на интересует.
Благодарю за помощь!