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

@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>

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

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

	Добавить методы в таблицы 16.12.2018, 04:22. Показов 1467. Ответов 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

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

Решение