Я создаю пользовательский объект, который расширяет объект ячейки таблицы.Новый объект ячейки содержит текстовое поле ввода.
Вот мой код:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//table
class DataTable extends HTMLTableElement {
constructor() {
super()
console.info('data-table created')
}
}
customElements.define('data-table',
DataTable,
{
extends: 'table'
});
//cell
class DataCell extends HTMLTableCellElement {
connectedCallback() {
console.info('cell connected')
if (typeof this.renderContent === 'function')
this.renderContent()
}
renderContent() {
console.info('data-string render')
this.textBox= document.createElement("input");
this.textBox.type="text";
this.appendChild(this.textBox);
}
set value(v)
{
this.textBox.value=v;
}
get value()
{
return this.textBox.value;
}
}
customElements.define('data-string',
DataCell,
{
extends: 'td'
});
$( document ).ready(function(){
var t=new DataTable();
var row=t.insertRow(t.rows);
var cell=new DataCell();
row.appendChild(cell);
cell.value="gfg";
$(document.body).append(t);
});
</script>
</head>
<body>
<h4>Test Table Extension v1</h4>
</body>
</html>
Я хотел бы добавить атрибут «значение» в новую ячейку.Я получил "Невозможно установить свойство 'значение' из неопределенного", когда я установил значение в текстовое поле.В функции «set value (v)» «this» относится к документу, а не к ячейке, в этом проблема.