Поиск в БД SQL и вывод в таблицу

@xte · Регистрация: 14.01.2019

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

Есть БД в SQLite3. Пишу GUI на HTML

для удобного отображения и поиска по базе.
Ниже форма для отправки данных на сервер, где будет формироваться SQL-запрос для поиска.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <form method="get" action="http://127.0.0.1/search">
    <table width="1100px" cols="6" border cellpadding="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid black">
      <thead align="center" bgcolor="silver">
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" name="1"></td>
          <td><input type="text" name="2"></td>
          <td><input type="text" name="3"></td>
          <td><input type="text" name="4"></td>
          <td><input type="text" name="5"></td>
          <td style="border:0; border-right-style:hidden; border-bottom-style:hidden">&nbsp;&nbsp;&nbsp;<input type="submit" value="Найти"></td>
        </tr>
      </tbody>
      <tbody>
        <!-- тут надо вставить полученные данные -->
      </tbody>
    </table>
  </form>

По адресу 127.0.0.1 находится сервер, который парсит данные с формы, формирует SQL-запрос и отправляет обратно JSON, который на месте будет парситься и вставляться в таблицу во 2-й tbody

Что нужно написать в <form action>, чтобы страница не перегружалась, а обновлялся только 2-й tbody?
Или делать нужно через <input type="button"> вместо submit, на который повесить обработчик с XMLHttpRequest?

@atanov · 21.02.2019, 20:02

xte, просто button, обработчик и ajax'ом на сервер

@kalabuni · 21.02.2019, 20:38

для сабмита формы требуется окно, куда загрузится страница, указанная в action тега <form>
либо меняйте окно (используя target, в котором можно указать имя невидимого <iframe>, либо вовсе не сабмитьте форму -- для аякса форма совсем не нужна

@xte · 21.02.2019, 22:49 **[ТС]**

atanov, так и сделал.
Но pattern в <input> не работает с button. Есть решение?

Добавлено через 9 минут
Видимо, перед отправкой придётся проверять в onclick на корректность.

@atanov · 22.02.2019, 11:47

xte, input с типом submit та же кнопка, где у неё паттерн?

@xte · 22.02.2019, 13:28 **[ТС]**

atanov,
pattern у <input type="text">, но работает только с submit.
Написал такую функцию для проверки на этапе ввода в input:

JavaScript
1
2
3
4
5
6
7
  <script language="JavaScript">
      function check(e) {
        let text = e.target.value;
        if (e.type == 'keypress') text += e.key;
        if (text && !/^[\w\-]*$/.test(text)) e.preventDefault()
      }
  </script>

Но корректно работает только с событием 'keypress'. При вставке из буфера или перетаскивании работает некорректно.

@atanov · 22.02.2019, 13:35

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

pattern у <input type="text">

Да

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

но работает только с submit

Нет
На клиенте можно собрать необходимую информацию и отправить на сервер, хоть POST'ом, например:

HTML5
1
2
3
<input type="text" name="1">
<button>Click</button>
<script src = "155.js"></script>

JavaScript
1
2
3
4
5
6
7
8
9
10
document.addEventListener('DOMContentLoaded', docReady);
function docReady()
{   
    document.getElementsByTagName('button')[0].addEventListener('click', clickOnButton);
}
function clickOnButton()
{
    console.log(document.getElementsByTagName('input')[0].value);
    //отправляем ajax'ом document.getElementsByTagName('input')[0].value
}

@xte · 22.02.2019, 14:34 **[ТС]**

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

pattern [...] работает только с submit.

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

На клиенте можно собрать необходимую информацию и отправить на сервер, хоть POST'ом, например

Так смысл в том, чтобы проверить данные ещё до отправки на сервер (это я могу), а лучше на этапе ввода (с этим - проблема).

Добавлено через 22 минуты
А как зафиксировать заголовок таблицы, чтобы <thead> не прокручивался вместе с текстом?

@atanov · 22.02.2019, 14:51

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

а лучше на этапе ввода

ну и отслеживайте событие change у input и проверяйте какая клавиша нажата; коды всех клавиш клавы есть.

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

А как зафиксировать заголовок таблицы, чтобы <thead> не прокручивался вместе с текстом?

Помещаете в отдельную таблицу; при window.scroll > 0 position у отдельной таблицы делаете fixed, обратно - убираете фиксированную.

@amr-now · 22.02.2019, 15:24

Всем здравствуйте.

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

лучше на этапе ввода

Ну надо, так надо...

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
68
69
70
71
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form name="form1">
        <table width="1100px" cellpadding="0" style="border-collapse: collapse; border: 1px solid black;">
            <thead style="background-color:silver;">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </tr>
            </thead>
            <tbody id="tb1">
                <tr>
                    <td><input type="text" name="1"></td>
                    <td><input type="text" name="2"></td>
                    <td><input type="text" name="3"></td>
                    <td><input type="text" name="4"></td>
                    <td><input type="text" name="5"></td>
                    <td style="border:0; border-right-style:hidden; border-bottom-style:hidden">&nbsp;&nbsp;&nbsp;<input
                            type="button" value="Найти"></td>
                </tr>
            </tbody>
            <tbody>
                <!-- тут надо вставить полученные данные -->
            </tbody>
        </table>
    </form>
    <script>
        initHandlers(); // Запуск инициализации проверки. Здесь для упрощения при загрузке страницы
 
        function initHandlers() {
            for (let inp of document.forms["form1"].querySelectorAll("#tb1 input[type=text]")) {
                inp.oninput = inputHandler;
                inp.onclick = clickHandler;
                inp.addEventListener("keyup", e => {
                    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) clickHandler(e);
                });
            }
        }
 
        function inputHandler(e) {
            let t = e.target,
                prevValue = t.dataset.prevvalue || "",
                prevSelStart = +t.dataset.prevselectionstart,
                prevSelEnd = +t.dataset.prevselectionend;
            if (t.value === t.value.replace(/[^\w\-]/ig, "")) {
                t.dataset.prevvalue = t.value;
                t.dataset.prevselectionstart = t.selectionStart;
                t.dataset.prevselectionend = t.selectionEnd;
            }
            else {
                t.value = prevValue;
                t.selectionStart = prevSelStart;
                t.selectionEnd = prevSelEnd;
            }
        }
 
        function clickHandler(e) {
            let t = e.target;
            t.dataset.prevselectionstart = t.selectionStart;
            t.dataset.prevselectionend = t.selectionEnd;
        }
    </script>
</body>
</html>

@xte · 22.02.2019, 18:52 **[ТС]**

Как-то сложно

Одним обработчиком можно:

JavaScript
1
2
3
4
5
6
7
8
9
10
for (let inp of form1.querySelectorAll("input[type=text]")) {
    inp.oninput = function(e) {
      let t = e.target;
      let text = t.value;
      if (text === text.replace(/[^\w\-]/ig, ''))
        t.dataset.prevvalue = text
      else
        t.value = t.dataset.prevvalue || ''
    }
}

@amr-now · 22.02.2019, 19:07

xte, да меня чо-то кривая позиция курсора подзадолбала. Кому как.

@xte · 23.02.2019, 00:49 **[ТС]**

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

А как зафиксировать заголовок таблицы, чтобы <thead> не прокручивался вместе с текстом?

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

Помещаете в отдельную таблицу; при window.scroll > 0 position у отдельной таблицы делаете fixed, обратно - убираете фиксированную.

Это не так просто: таблица резиновая, т.е. ширины столбцов автоматически подгоняются под содержимое.

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    table {border-collapse: collapse; border: 1px solid black; table-layout: auto}
    thead {white-space: nowrap}
    td:last-child {table-layout: fixed; width: 1px; border: 0; border-top-style: hidden; border-right-style: hidden; border-bottom-style: hidden; background-color: white}
    input[type="text"] {border: none; width: 100%}
    input[type="button"], input[type="reset"] {padding: 1px}
  </style>
</head>
<body style="margin-top: 0">
  <form method="get" name="search">
    <table cols="7" border cellspacing="0">
      <thead align="center" bgcolor="silver">
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
          <td style="white-space:nowrap; padding: 1px 0 0 4px">
            <input type="button" value="Найти">
            <input type="reset">
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" name="a"></td>
          <td><input type="text" name="b"></td>
          <td><input type="text" name="c"></td>
          <td><input type="text" name="d"></td>
          <td><input type="text" name="e"></td>
          <td><input type="text" name="f"></td>
          <td></td>
        </tr>
      </tbody>
      <tbody></tbody>
    </table>
    <table cols="7" border cellspacing="0" style="top: 0px; position: fixed"></table>
  </form>
 
  <script language="JavaScript">
    let oThead = document.querySelector('table>thead');
    let oTheadClone = oThead.cloneNode(true);
    document.getElementsByTagName('table')[1].appendChild(oTheadClone);
    function callback(mutations) {
      mutations.forEach((mutation) => {
        console.log(mutation.type);
        oTheadClone.setAttribute(mutation.attributeName, oThead.getAttribute(mutation.attributeName));
      })
    }
    let observer = new MutationObserver(callback);
    let config = { 'attributes': true, 'childList': true, 'subtree': true };
    observer.observe(oThead, config);
  </script>
</body>
</html>

Через MutationObserver можно скопировать ширины столбцов первой таблицы во вторую?

@xte · 25.02.2019, 15:16 **[ТС]**

Как-то так:

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
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    table {border-collapse: collapse; border: 1px solid black; background-color: white}
    thead {white-space: nowrap}
    td:last-child {table-layout: fixed; border: 0; border-top-style: hidden; border-right-style: hidden; border-bottom-style: hidden; background-color: white}
    input[type="text"] {border: none; width: 100%}
    input[type="button"], input[type="reset"] {padding: 1px}
  </style>
</head>
<body style="margin-top: 0">
    <table cols="7" border cellspacing="0" style="table-layout: auto">
      <thead align="center" bgcolor="silver">
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td></td></tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" name="a"></td>
          <td><input type="text" name="b"></td>
          <td><input type="text" name="c"></td>
          <td><input type="text" name="d"></td>
          <td><input type="text" name="e"></td>
          <td><input type="text" name="f"></td>
          <td style="width: 1px; white-space:nowrap; padding-left: 4px">
            <input type="button" value="Найти" onclick="Search()">
            <input type="reset">
          </td>
        </tr>
      </tbody>
      <tbody id="m"></tbody>
    </table>
  <form method="get" name="search">
    <table cols="7" border cellspacing="0" style="top: 0px; position: fixed"></table>
  </form>
 
  <script>
    let oTable0, oTable1, aTD0, aTD1
    window.addEventListener('DOMContentLoaded', function() {
      let aTables = document.getElementsByTagName('table');
      oTable0 = aTables[0];
      oTable1 = aTables[1];
      oTable1.appendChild(oTable0.getElementsByTagName('thead')[0].cloneNode(true));
      oTable1.appendChild(oTable0.getElementsByTagName('tbody')[0].cloneNode(true));
      aTD0 = oTable0.querySelectorAll('thead > tr > td');
      aTD1 = oTable1.querySelectorAll('thead > tr > td');
      oTable1.width = oTable0.offsetWidth;
      for (let inp of search.querySelectorAll("input[type=text]")) {
        inp.oninput = function(e) {
          let t = e.target;
          let text = t.value;
          if (/^[\w\-]*\s*$/.test(text)) {
            if (text !== (text = text.replace(/\s+$/, ''))) t.value = text;
            t.dataset.prevvalue = text
          } else
            t.value = t.dataset.prevvalue || ''
        }
      }
      window.addEventListener('resize', function() { CopyWidth() })
    }, false);
    function CopyWidth() {
      oTable1.width = oTable0.offsetWidth;
      for (let i = 0; i < aTD0.length; i++)
        aTD1[i].width = aTD0[i].clientWidth - 2
    }
    function Search() {
      // Заполняем первую таблицу
 
      // И копируем ширины столбцов на вторую:
      setTimeout(function() {
        CopyWidth();
        //document.body.scrollTop = document.body.scrollHeight;
        scrollTo(0, document.body.scrollHeight)
      }, 100)
    }
  </script>
</body>
</html>

Только, если таблица не влазит по ширине и появляется горизонтальная полоса прокрутки, то шапка первой таблицы вылазит из под второй ))

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. 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/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	21.02.2019, 20:02
	xte, просто button, обработчик и ajax'ом на сервер 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	21.02.2019, 20:38
	для сабмита формы требуется окно, куда загрузится страница, указанная в action тега <form> либо меняйте окно (используя target, в котором можно указать имя невидимого <iframe>, либо вовсе не сабмитьте форму -- для аякса форма совсем не нужна 0

@xte 0 / 0 / 0 Регистрация: 14.01.2019 Сообщений: 24
	21.02.2019, 22:49 [ТС]
	atanov, так и сделал. Но pattern в <input> не работает с button. Есть решение? Добавлено через 9 минут Видимо, перед отправкой придётся проверять в onclick на корректность. 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	22.02.2019, 11:47
	xte, input с типом submit та же кнопка, где у неё паттерн? 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	22.02.2019, 19:07
	xte, да меня чо-то кривая позиция курсора подзадолбала. Кому как. 0