Считать данные ячеек таблицы со страницы HTML в JavaScript

@Novichok0608 · Регистрация: 07.02.2020

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток! Подскажите, пожалуйста, в чем ошибка. Задача следующая: получить численное значение ячейки из таблицы при нажатии кнопки. Перепробовал много всего, но все время работает не так, как надо, в комментариях указал основные варианты, которые использовал Код для HTML-страницы и скрипт прилагаю.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
    <head>
        <title> Interpolation </title>
    </head>
 
    <body>
    <h1>Заполните таблицу</h1>
    <table border = "1" width = "10%" id = "myTable">
          <tr>
            <th> xi </th>
            <th> f(xi)</th>
          </tr>
          <tr>
            <td contentEditable = "true" id = "x0"> </td>
            <td contentEditable = "true" id = "y0"> </td>
          </tr>
          <tr>
            <td contentEditable = "true" id = "x1"> </td>
            <td contentEditable = "true" id = "y1"> </td>
          </tr>
          <tr>
            <td contentEditable = "true" id = "x2"> </td>
            <td contentEditable = "true" id = "y2"> </td>
          </tr>
          <tr>
            <td contentEditable = "true" id = "x3"> </td>
            <td contentEditable = "true" id = "y3"> </td>
          </tr>
        </table>
        <div> 
            <h3> Введите X: </h3>
            Х = <input type = "number" id = "x"> </input>
        </div>
        <div>
      
          <button onclick = "L3(x)"> Кнопка </button>
 
        </div>
 
        <script src = "Scipt.js"> </script>
    </body>
 
 
 
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var x0 = parseFloat(document.getElementById("x0").value); //1 вариант
var x1 = parseFloat(document.getElementById("x1").value);
var x2 = parseFloat(document.getElementById("x2").value);
var x3 = parseFloat(document.getElementById("x3").value);
 
var y0 = parseFloat(document.getElementById("y0").value);
var y1 = parseFloat(document.getElementById("y1").value);
var y2 = parseFloat(document.getElementById("y2").value);
var y3 = parseFloat(document.getElementById("y3").value);
 
 
function L3(x_arg) {
    alert(x0);
   var tds = document.getElementsByTagName("td"); 
   
    var x = new Array ();
    var y = new Array ();
 
    for ( var i = 0; i < tds.length; i ++) { // 2 вариант
 
    if ( i == 0 || i % 2 == 0 ) {
 
        for (var j = 0; j < (tds.length)/2; j++) {
 
            x[j] = tds[i].innerHTML;
        }
    }
        else {
            for (var j = 0; j < (tds.length)/2; j++) {
                
                y[j] = tds[i].innerHTML;
        }
    }
}
    
 
}

@kidASM · 16.03.2021, 18:51

Novichok0608,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style></style>
    </head>
    <body>
        <h1>Заполните таблицу</h1>
        <table border="1" width="10%" id="myTable">
            <tr>
                <th> xi </th>
                <th> f(xi)</th>
            </tr>
            <tr>
                <td contentEditable="true" id="x0"></td>
                <td contentEditable="true" id="y0"></td>
            </tr>
            <tr>
                <td contentEditable="true" id="x1"></td>
                <td contentEditable="true" id="y1"></td>
            </tr>
            <tr>
                <td contentEditable="true" id="x2"></td>
                <td contentEditable="true" id="y2"></td>
            </tr>
            <tr>
                <td contentEditable="true" id="x3"></td>
                <td contentEditable="true" id="y3"></td>
            </tr>
        </table>
        <div>
            <h3>Введите X: </h3>
            Х = <input type="number" id="x">
        </div>
        <div>
            <button id="btn"> Кнопка </button>
        </div>
        <script>
            window.addEventListener('load', function(){
                var table = document.getElementById('myTable');
                var btn = document.getElementById('btn');
                if(table){
                    if(btn){
                        btn.addEventListener('click', function(event){
                            for(var i=1; i<table.rows.length; i++){
                                for(var j=0; j<table.rows[i].cells.length; j++){
                                    var num = parseInt(table.rows[i].cells[j].textContent ,10);
                                    if(!isNaN(num)){
                                        console.log(num);
                                    }
                                }
                            }
                        });
                    }
                    else{
                        console.log('Кнопика не найдена.');
                    }
                }
                else{
                    console.log('Таблица не найдена.');
                }
            });
        </script>
    </body>
</html>

P.S. Считывать данные со страницы - не хорошо. Пользователь должен иметь возможность ввести только те данные, которые нужны (через inpput, select, ...). Всё остальное, - для отображения. Все данные нужно хранить в JS.

@Novichok0608 · 16.03.2021, 19:57 **[ТС]**

Спасибо большое! К слову, буквально только что нашел выход, получилось объединить 1 и 2 варианты в моем коде. Еще раз спасибо вам!

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Novichok0608 0 / 0 / 0 Регистрация: 07.02.2020 Сообщений: 9
	16.03.2021, 19:57 [ТС]
	Спасибо большое! К слову, буквально только что нашел выход, получилось объединить 1 и 2 варианты в моем коде. Еще раз спасибо вам! 0