Аналог PHP кода на JS

@letronas · Регистрация: 12.10.2014

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

Добрый день! Столкнулся с проблемой реализации таблицы на JS. У меня имеется код php

PHP
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
<?php
echo '<table style="border:1px solid black; padding:10px; margin-left:300px;">';
echo '<tr><td>x</td><td>F(x)</td></tr>';
$a=2; 
$b=7; 
$c=4; 
$F=0;
for($x=-10;$x<=10;$x+=0.5)
        {
            if ($x+10<0 and $b!=0)
            {
                $F= $a*$x*$x-$c*$x+$b;
            }
            else if ($x+10>0 and $b==0)
            {
                $F= ($x-$a)/($x-$c);
            }
            else
            {
                $F= (-$x)/($a-$c);
            }
            echo '<tr><td style="border:1px solid black; padding:20px;">'.$x.'</td><td style="border:1px solid black; padding:20px;">'.$F.'</td></tr>';
        }
echo '</table>';
?>

Вот, мне его надо переделать под JS, только учитывая то, что пользователь вводит некоторые данные с таблицы.
Собственно по этому поводу, я сделал в html вставочку

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<label> Xnac =  <INPUT TYPE="TEXT" name="xnach" VALUE="-10" id="xnach"></label>
<br>
<label> a=<INPUT TYPE="TEXT" name="a" VALUE="2" id="a"> </label>
<br>
<label> Xkon=<INPUT TYPE="TEXT" name="xkon" VALUE="10" id="xkon"> </label>
<br>
<label> b=<INPUT TYPE="TEXT" name="b" VALUE="7" id="b"> </label>
<br>
<label> Stepx=<INPUT TYPE="TEXT" name="shag" VALUE="0.5" id="shag"> </label>
<br>
<label> c=<INPUT TYPE="TEXT" name="c" VALUE="4" id="c"> </label>
<br>
<INPUT TYPE="SUBMIT" NAME="b1" VALUE="Calc1" onclick="buttonClicked();"/>

Не по теме:

Про то, что это не HTML5, тег br использовать нельзя и т.д. не надо, ведь я делаю для универа).Спасибо.

Далее, я решил, что буду брать данные из полей, которые заполнит пользователь и, соответственно, хотел, чтобы код JS выполнялся после нажатия кнопки и под полем ввода всей этой инфы, рисовалась краааасивая таблица со всеми значениями функции и x.
Вот, единственное, до чего я дошёл:

JavaScript
1
2
3
4
5
6
7
8
function buttonClicked(){
    var F=0;
    var xnach=document.getElementById("xnach");
    var xkon=document.getElementById("a");
    var shag=document.getElementById("xkon");
    var a=document.getElementById("b");
    var b=document.getElementById("shag");
    var c=document.getElementById("c");

Но, как вы понимаете, с таблицей возникли некоторые трудности. Я просто не могу понять, как сделать аналог своего цикла php на лад JS. Если кто расскажет и покажет, буду очень благодарен.

@tisha_ · 25.11.2016, 08:56

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
    function buttonClicked() {
        var F = 0;
        var xnach = Number(document.getElementById("xnach").value);
        var xkon = Number(document.getElementById("a").value);
        var shag = Number(document.getElementById("xkon").value);
        var a = Number(document.getElementById("b").value);
        var b = Number(document.getElementById("shag").value);
        var c = Number(document.getElementById("c").value);
        var newTable = document.getElementById("tbl");
        var tab = '<table style="border:1px solid black; padding:10px; margin-left:0px;">';
        tab += '<tr><td>x</td><td>F(x)</td></tr>';
        for(x=xnach;x<=xkon;x+=shag)
        {
            if (x+10<0 && b!=0)
            {
                F= a*x*x-c*x+b;
            }
            else if (x+10>0 && b==0)
            {
                F= (x-a)/(x-c);
            }
            else
            {
                F= (-x)/(a-c);
            }
            tab += '<tr><td style="border:1px solid black; padding:20px;">';
            tab+= x;
            tab+= '</td><td style="border:1px solid black; padding:20px;">';
            tab+= F;
            tab+='</td></tr>';
        }
        tab += '</table>';
        newTable.innerHTML = tab;
    }

и блок добавила

HTML5
1
<div id ="tbl"></div>

@letronas · 25.11.2016, 09:16 **[ТС]**

Спасибо огромное за код, я мельком прошелся, всё ясно. Остался один вопрос: Что за блок ?

HTML5
1
<div id ="tbl"></div>

Вижу кусочек кода:

HTML5
1
var newTable = document.getElementById("tbl");

И как я понял, вы создали блок div, чтобы обратиться к нему через цикл и сразу поместить туда таблицу, так?

@tisha_ · 25.11.2016, 09:24

Сообщение от letronas

И как я понял, вы создали блок div, чтобы обратиться к нему через цикл и сразу поместить туда таблицу, так?

только я к нему не через цикл обращаюсь. Таблицу собираю в переменную, а в этот блок уже содержимое переменной

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

Аналог PHP кода на JS

Решение