Аналог 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, чтобы обратиться к нему через цикл и сразу поместить туда таблицу, так?

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

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

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

Решение