Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 29.12.2020
Сообщений: 2
1

динамическое создание кнопок

29.12.2020, 21:31. Просмотров 824. Ответов 3
Метки нет (Все метки)

привет, мир!
абсолютно не html/js разработчик. собственно требования в дизайне нет никакого.
есть сервак, для которого сделал html-страничку, получающую через веб-сокеты от сервера json со списком текущих сервисов и их состояние. для каждого сервиса должно быть две кнопки: старт и стоп.
сделал фронтенд страничку, на которой через вебсокет выдаю таблицу сервисов, состояние и счетчики определенные. выглядит это так:

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
   <html>
        <head>
            <meta charset="utf-8" />
            <script language="javascript" type="text/javascript">
                var ws = new WebSocket( 'ws://' + location.host + '/services/state.json' );
                if( ! window.console )
                    { window.console = { log: function() {} } };
                ws.onopen = function( ev )  { console.log( ev ); };
                ws.onerror = function( ev ) { console.log( ev ); };
                ws.onclose = function( ev ) { console.log( ev ); };
                ws.onmessage = function( ev ) {
                    console.log( ev );
                    var data = JSON.parse( ev.data ).data;
                    var table = '';
                    table += '<table border="1">';
                    for( var i in data ) {
                        var service = data[ i ];
                        table += '<tr>';
                        table += '<td>' + service.name + '</td>';
                        table += '<td>' + service.state + '</td>';
                        table += '<td>' + service.failedCounter + '/' + service.failedLimit + '</td>';
                        table += '<td><button href="" type="button">СТАРТ</button></td>';
                        table += '<td><button href="" type="button">СТОП</button></td>';
                        table += '</tr>';
                    }
                    table += '</table>';
                    messages = document.getElementById( 'state' );
                    messages.innerHTML = table;
                };
            </script>
        </head>
        <body>
            <div class="content">
                <h1>сервисы</h1>
                <a href="/services/state.json">скачать слепок</a>
                <div id="state"/>
            </div>
        </body>
    </html>
необходимо добавить реакцию на динамически созданные кнопки СТАРТ/СТОП для каждого сервиса, так чтобы дергался определенный урл гет-запросом ( к примеру '/some/url?service=name&action=STOP' ), так чтобы не покидать страницу.

подскажите как проще всего это добавить в существующий код, прям самый простой способ.
спасибо.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
29.12.2020, 21:31
Ответы с готовыми решениями:

Динамическое создание кнопок
Здравствуйте,подскажите как реализовать данную функцию.Мне нужно,что бы при нажатии кнопки...

Динамическое создание кнопок
Как создать кнопку, я примерно представляю: TSpeedButton *lbl; lbl=new TSpeedButton(this);...

Динамическое создание кнопок
TextBox tbI = new TextBox; Button btU = new Button; Int n=5; for (int i = 0; i &lt; n; i++) { ...

Динамическое создание кнопок
Панели присвоен слушатель мыши, по нажатию кнопки, должна добавляться кнопка, но она не...

3
399 / 256 / 150
Регистрация: 30.04.2017
Сообщений: 504
29.12.2020, 22:01 2
Цитата Сообщение от pavard Посмотреть сообщение
необходимо добавить реакцию на динамически созданные кнопки
думаю проще будет назначить на кнопки какие-либо id-шники в строках 22-23
затем в строке после 28, написать document.getElementById('start').onclick = onFetchStart

ааа, там же много их,
ну тогда самый тупой метод id-шники сделать в зависимости от i типо 'start-0' 'start-1'

или другой вариант назначить им класс и дата поле с index-ом
вытащить список кнопок document.querySelectorAll('...') по имени класса, пройтись по нему, назначить функцию в зависимости от поля данных
0
0 / 0 / 0
Регистрация: 29.12.2020
Сообщений: 2
30.12.2020, 18:14  [ТС] 3
можешь кодом, если не сложно, пожалуйста.
0
392 / 145 / 31
Регистрация: 26.11.2019
Сообщений: 378
30.12.2020, 22:51 4
я бы строки 14-28 так сделала
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let table = document.createElement('table');
table.setAttribute('border', '1');
for(let i in data) {
    let row = table.insertRow();
    ['name', 'state'].forEach(el => row.insertCell().textContent = data[i][el]);
    row.insertCell().textContent = data[i]['failedCounter'] + '/' + data[i]['failedLimit'];
    ['START', 'STOP'].forEach(el => {
        let btn = document.createElement('input');
        btn.setAttribute('type', 'button');
        btn.value = el;
        btn.addEventListener('click', () => {
            fetch('/some/url?service=name&action=' + el)
            .then(res => res.json())
            .then(json => console.log(json));
        });
        row.insertCell().append(btn);
    });
}
document.getElementById('state').append(table);
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.12.2020, 22:51

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Динамическое создание кнопок
Всем привет, нужна помощь. Есть jsp страничка, на ней с помощью jstl создаётся таблица в которую...

Динамическое создание кнопок
Всем доброго времени суток! Передо мною стала серьезная проблема! Имеется файл &quot;test.txt&quot;, его...

Динамическое создание кнопок.
Можно сделать так, чтобы при нажатии на одну кнопку создавалась (не появлялась) кнопка?

Динамическое создание кнопок
Здравствуйте! Нужно создать 2 кнопки на форме. Делаю вот так, но, во-первых, создаётся только 1...

Динамическое создание кнопок
Доброго времени суток. Хочу создать массив кнопок в идеале с параметрами. В виде простого...

Динамическое создание кнопок
Кнопка start создает 5 label и button. Подскажите пожалуйста, как сделать так, чтобы при нажатии bt...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.