Я работаю над проектом Angular, где у меня есть обычная таблица. Пример:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>Я хочу иметь возможность выбирать несколько ячеек, не выделяя данные ячейки, а выделяя только границу моего выделения, чтобы иметь возможность скопировать его в электронную таблицу Excel.
Очевидно, что нажатие на отдельную ячейку также может быть скопировано.
Пример:
Обновлено: поскольку Скотт Маркус решил, что он точно знает, что мне нужно, пожалуйста, не указывайте никакого кода.
И вот уточнение:
Это возможно? (Могу ли я выполнить это изменение в Angular)
И как? (Подходит ли Javascript? Я не уверен. Поскольку я раньше ничего подобного не делал? Можете ли вы направить меня в правильном направлении?) Да, и, пожалуйста, не публикуйте код! Я честно хочу попробовать себя.
🤔 А знаете ли вы, что...
Синтаксис JavaScript схож с синтаксисом языка программирования Java, но они не связаны.
Я считаю, что вы можете работать с js и css:
const cells = document.querySelectorAll('td');
cells.forEach(cell => {
cell.addEventListener('click', () => {
toggleSelection(cell);
});
});
function toggleSelection(cell) {
cell.classList.toggle('selected');
} table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 8px;
}
.selected {
border: 2px solid blue !important;
}<table id = "myTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>