Форум

georgV · #1 (**permalink**) 16.09.2022, 12:01

Помогите ! почему не работает button. Иногда срабатывает, после множественных нажатий мышки и клавы.

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border: 5px solid rgb(204, 175, 102);
   border-collapse: separate;
   empty-cells: hide;
}
th, td {
   border: 2px solid #69c;
}

</style>
</head>
<body>
<p>Таблица</p>
<button><img src="icon.png" onclick="cp()"> Сохранить!</button>
<script>
   var c, r, t
   t = document.createElement('table'); 
    document.body.append(t);
for (let i=0; i<3; i++)
{  r=t.insertRow();    
    for (let j=0; j < 5; j++) { 
    c=r.insertCell();
    t.rows[i].cells[j].outerHTML = '<td><input type="text" value="ячейка '+i+' '+j+'"></td>';    }}

function cp()
{ for (let i=0; i<t.rows.length; i++) { 
for (let j=0; j < t.rows[0].cells.length; j++) {
document.write(t.rows[i].cells[j].firstChild.value+'</br>')}}}

ksa · #2 (**permalink**) 16.09.2022, 12:42

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

почему не работает button. Иногда срабатывает, после множественных нажатий мышки и клавы.

У тебя событие навешено на картинку, а не на кнопку...

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

<button><img src="icon.png" onclick="cp()"> Сохранить!</button>

Сделай на кнопку...

<button onclick="cp()"><img src="icon.png"> Сохранить!</button>

georgV · #3 (**permalink**) 16.09.2022, 12:51

Спасибо много раз.
Семен Семеныч )

georgV · #4 (**permalink**) 16.09.2022, 12:56

Понял
еще вопросы чайника:
2. можно заморозить заголовок таблицы
3. ограничить границы вывода таблицы по пикселям или по % от экрана

рони · #5 (**permalink**) 16.09.2022, 13:45

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

2. можно заморозить заголовок таблицы

https://codepen.io/jgx/pen/nVKyVW

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border: 5px solid rgb(204, 175, 102);
            border-collapse: separate;
            empty-cells: hide;
        }

        th,
        td {
            border: 2px solid #69c;
        }
    </style>
</head>

<body>
    <p>Таблица</p>
    <button onclick="cp()"><img src="icon.png" > Сохранить!</button>
    <script>
        var c, r, t
        t = document.createElement('table');
        document.body.append(t);
        for (let i = 0; i < 3; i++) {
            r = t.insertRow();
            for (let j = 0; j < 5; j++) {
                c = r.insertCell();
                c.innerHTML = `<td><input type="text" value="ячейка ${i} ${j}"></td>`;
            }
        }

        function cp() {
            let valueAll = Array.from(t.querySelectorAll('input'), ({value})=> value).join('<br>')
            document.body.insertAdjacentHTML('beforeend', valueAll)
        }
    </script>
</body>

</html>

georgV · #6 (**permalink**) 16.09.2022, 14:54

Не очень понял,
у меня таблица на экране, как закрепить (заморозить) заголовок чтоб он не перемещался при скролинге?

ksa · #7 (**permalink**) 16.09.2022, 15:08

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

как закрепить (заморозить) заголовок чтоб он не перемещался при скролинге?

Один из вариантов...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.table-fixed-head {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  height: 100vh;
}

.table-fixed-head th,
.table-fixed-head td {
  padding: 5px;
  text-align: center;
  width: 33.333vw;
}

.table-fixed-head thead {
  background-color: #333;
  color: #FDFDFD;
}

.table-fixed-head thead tr {
  display: block;
  position: relative;
}

.table-fixed-head tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: calc(100vh - 30px);
}

.table-fixed-head tbody tr:nth-child(even) {
  background-color: #DDD;
}
</style>
</head>
<body>

<table class="table-fixed-head">
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

</body>
</html>

georgV · #8 (**permalink**) 16.09.2022, 15:13

let valueAll = Array.from(t.querySelectorAll('input'), ({value})=> value).join('<br>')
            document.body.insertAdjacentHTML('beforeend', valueAll)
            console.log(valueAll)

Стиль программирования отличный, мне до такого еще далеко. ) Пытаюсь работать напрямую с объектами JS, ради экономии времени и памяти, учусь работать с большими БД, понимаю что JS не для этого, но изучит его надо.

georgV · #9 (**permalink**) 16.09.2022, 15:25

Вы настоящий друг. Понимал что делается через style, буд изучать.
А можно еще вопрос для общего развития,
в JS можно банально открыть файл, прочитать, записать, закрыть, типа - open, read, write, clous.
Извините я еще из функционального паскаля.)

рони · #10 (**permalink**) 16.09.2022, 15:52

georgV,

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
            Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            line-height: 1.4;
            color: #333;
            background-color: #FFFACD;
            padding: 0 5vw;
        }
        table {
            margin: 1em 0;
            border-collapse: collapse;
            border: 0.1em solid #d6d6d6;
        }
        th,
        td {
            padding: 0.25em 0.5em 0.25em 1em;
            vertical-align: text-top;
            text-align: left;
            text-indent: -0.5em;
            background-color: #DCDCDC;
        }
        th {
            vertical-align: bottom;
            background-color: #666;
            color: #fff;
        }
        tr:nth-child(even) th[scope=row] {
            background-color: #f2f2f2;
        }
        tr:nth-child(odd) th[scope=row] {
            background-color: #fff;
        }
        tr:nth-child(even) {
            background-color: rgba(0, 0, 0, 0.05);
        }
        tr:nth-child(odd) {
            background-color: rgba(255, 255, 255, 0.05);
        }
        th {
            position: sticky;
            top: 0;
            z-index: 2;
            text-align: center;
        }
        th[scope=row] {
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            z-index: 1;
        }
        body {
            padding-bottom: 120vh;
        }
        input {
            width: 90px;
        }
    </style>
</head>
<body>
    <p>Таблица</p>
    <button onclick="cp()"><img src="icon.png" > Сохранить!</button>
    <script>
        var c, r, t
        t = document.createElement('table');
        document.body.append(t);
        let thead = document.createElement('thead');
        let title = ['один', 2, 3, 4, 5].map(txt => {
            let th = document.createElement('th');
            th.textContent = txt;
            return th;
        });
        thead.append(...title);
        t.append(thead);
        for (let i = 0; i < 3; i++) {
            r = t.insertRow();
            for (let j = 0; j < 5; j++) {
                c = r.insertCell();
                c.innerHTML = `<td><input type="text" value="ячейка ${i} ${j}"></td>`;
            }
        }
        function cp() {
            let valueAll = Array.from(t.querySelectorAll('input'), ({
                value
            }) => value).join('<br>')
            document.body.insertAdjacentHTML('beforeend', valueAll)
        }
    </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript