Добавить методы в таблицы

@mikado3333 · Регистрация: 22.10.2013

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

Приветствую! Подскажите, как можно добавить методы в "КЛАСС" таблицы? Пробовал копать в сторону prototype, но так и не нашел функцию создающую таблицы.

@amr-now · 16.12.2018, 12:31

Здравствуйте.
Подробно задачу сформулируйте.
И пример покажите, что в итоге.
Пока задача не ясна.

@diadiavova · 16.12.2018, 14:25

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

но так и не нашел функцию создающую таблицы.

Подозреваю, что это HTMLTableElement

@mikado3333 · 16.12.2018, 15:39 **[ТС]**

Задача - при появлении таблицы на странице, в ней уже было некое свойство или метод.
пробовал в консоле следующее

JavaScript
1
2
3
4
5
6
7
8
HTMLTableElement.test1 -> undefined
HTMLTableElement.prorotype = {test1:1}; -> Object { test1: 1 }
HTMLTableElement.test1 -> undefined
HTMLTableElement.test1 = 1; -> 1
HTMLTableElement.test1 -> 1
tb = document.createElement('table'); -> <table>
tb -> <table>
tb.test1 -> undefined

@diadiavova · 16.12.2018, 16:01

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

пробовал в консоле следующее

Попробуй так

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
 
    <button onclick="run();">Добавить заголовки</button>
    <script>
 
        HTMLTableElement.prototype.addTitles = function (...titles)
        {
            let row = this.insertRow(0);
            for (let title of titles)
            {
                let th = document.createElement("th");
                th.textContent = title;
                row.appendChild(th);
            }
        }
 
        function run()
        {
            document.getElementById("table").addTitles("Фамилия", "Имя", "Отчество");
        }
 
    </script>
    <table id="table">
        <tbody>
            <tr>
                <td>Иванов</td>
                <td>Иван</td>
                <td>Иванович</td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>

@mikado3333 · 16.12.2018, 16:25 **[ТС]**

С методом понял, а со свойством как быть?
Вот пример с учебника

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var animal = {
  eats: true
};
 
function Rabbit(name) {
  this.name = name;
}
 
Rabbit.prototype = animal;
 
var rabbit = new Rabbit("Кроль"); //  rabbit.__proto__ == animal
 
alert( rabbit.eats ); // true

Я в консоле делал аналогично

JavaScript
1
2
HTMLTableElement.prorotype = {test1:1}; -> Object { test1: 1 }
HTMLTableElement.test1 -> undefined

Что не так, подскажите?

@diadiavova · 16.12.2018, 16:51

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

С методом понял, а со свойством как быть?

Свойство, в смысле с акцессорами? Тогда так

JavaScript
1
2
3
        Object.defineProperty(HTMLTableElement.prototype, "cellCount", {
            get: function () { return this.querySelectorAll("th,td").length; }
        });

Сеттер устанавливается аналогично(читай документацию по defineProperty). Использовать можно так

JavaScript
1
2
3
4
5
6
        function run()
        {
            let table = document.getElementById("table");
            table.addTitles("Фамилия", "Имя", "Отчество");
            console.log(table.cellCount); // выведет общее количество ячеек в таблице
        }

Если речь о поле, то там все совсем просто

JavaScript
1
2
HTMLTableElement.prototype.test = 1;
console.log(table.test);

@mikado3333 · 16.12.2018, 17:08 **[ТС]**

diadiavova,Спасибо, доходчиво, вот только один вопрос остался- объясните пожалуйста почему не работает HTMLTableElement.prorotype = {test1:1} table.test1 -> undefined;? Вроде по учебнику.

@diadiavova · 16.12.2018, 19:39

mikado3333, то, что написано в учебнике, касается JavaScript-объектов, а с DOM-объектами далеко не все работает так же. В частности свойство prototype там доступно только для чтения.

@amr-now · 16.12.2018, 21:09

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

Задача - при появлении таблицы на странице, в ней уже было некое свойство или метод.

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
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
 
<body>
    <table id="t1">
        <tr>
            <td>7</td>
        </tr>
    </table>
    <table id="t2">
        <tr>
            <td>5</td>
        </tr>
    </table>
    <script>
        let tab = document.getElementById("t1");
        tab.__proto__.aaaaaa = 77777;
        tab.__proto__.doIt = function () { console.log(this.aaaaaa + 11111); };
        console.log(tab.aaaaaa);
        tab.doIt();
        console.dir(tab);
        let tab2 = document.getElementById("t2");
        console.log(tab2.aaaaaa);
        tab2.doIt();
    </script>
</body>
</html>

Тут, кстати, наглядный пример, когда лямбда-функция портит this, который именно там нужен.
Вывод: если ты собираешься реализовать нестатический метод из ООП - будь добр использовать древний синтаксис функции.

Добавлено через 30 минут
Можно и миксин толкнуть, если хочется пограмотней, аж невтерпёж.
Здесь поверхностное копирование миксина, пока без извращений со ссылками на свойства миксина.

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
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
 
<body>
    <table id="t1">
        <tr>
            <td>7</td>
        </tr>
    </table>
    <table id="t2">
        <tr>
            <td>5</td>
        </tr>
    </table>
    <script>
        let tab = document.getElementById("t1");
        let mix1 = {
        aaaaaa:77777,
        doIt: function () { console.log(this.aaaaaa + 11111); }
        };
        // Замиксуем копированием
        mixin(tab.__proto__, mix1);
        console.log(tab.aaaaaa);
        tab.doIt();
        console.dir(tab);
        let tab2 = document.getElementById("t2");
        console.log(tab2.aaaaaa);
        tab2.doIt();
 
        function mixin(obj1, obj2) {
            for (let name of Object.getOwnPropertyNames(obj2)) {
                if (obj1[name] === undefined)
                    Object.defineProperty(obj1, name, Object.getOwnPropertyDescriptor(obj2, name));
            }
        }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@mikado3333 7 / 7 / 1 Регистрация: 22.10.2013 Сообщений: 95

	Добавить методы в таблицы 16.12.2018, 04:22. Показов 1469. Ответов 9 Метки нет (Все метки) Приветствую! Подскажите, как можно добавить методы в "КЛАСС" таблицы? Пробовал копать в сторону prototype, но так и не нашел функцию создающую таблицы. 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	16.12.2018, 12:31
	Здравствуйте. Подробно задачу сформулируйте. И пример покажите, что в итоге. Пока задача не ясна. 0

@mikado3333 7 / 7 / 1 Регистрация: 22.10.2013 Сообщений: 95
	16.12.2018, 17:08 [ТС]
	diadiavova,Спасибо, доходчиво, вот только один вопрос остался- объясните пожалуйста почему не работает HTMLTableElement.prorotype = {test1:1} table.test1 -> undefined;? Вроде по учебнику. 0

@diadiavova 7261 / 2608 / 745 Регистрация: 11.04.2015 Сообщений: 4,155 Записей в блоге: 43
	16.12.2018, 19:39
	mikado3333, то, что написано в учебнике, касается JavaScript-объектов, а с DOM-объектами далеко не все работает так же. В частности свойство prototype там доступно только для чтения. 0

Добавить методы в таблицы

Решение