Определить номер кликнутой строки в ячейке
Приветствую всех!
Можно ли с помощью JavaScript/JQuery определить номер кликнутой строки в многострочной ячейке таблицы, если строки разделены через <br/> ? Имею в виду отдельную нумерацию в произвольной ячейке - т.е. без необходимости определять ещё и номер самой ячейки или строки. <table border="1"> <tr> <td> строка 1 <br/> строка 2 <br/> строка 3 </td> <td> пусто </td> </tr> <tr> <td> строка 1 <br/> строка 2 <br/> строка 3 <br/> строка 4 <br/> строка 5 </td> <td> пусто </td> </tr> </table> |
индекс строки по клику
Neznajka,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let table = document.querySelector("table");
table.addEventListener("click", function({
target
}) {
let selection = document.getSelection(),
node = selection.baseNode;
target = target.closest("td");
if (node.nodeType == 3 && target) {
let childNodes = [...target.childNodes].filter(node => node.nodeType == 3);
let index = childNodes.findIndex(el => el === node);
alert(index);
}
})
})
</script>
</head>
<body>
<table border="1">
<tr>
<td>
строка 1 <br/> строка 2 <br/> строка 3
</td>
<td>
пусто
</td>
</tr>
<tr>
<td>
строка 1 <br/> строка 2 <br/> строка 3 <br/> строка 4 <br/> строка 5
</td>
<td>
пусто
</td>
</tr>
</table>
</body>
</html>
|
To рони:
Великолепно! Спасибо большое! Я, честно говоря, не думал, что это вообще можно сделать. А можно ли это как-то "перевести" на JQuery, чтобы впихнуть в
$('document').ready(function(){...}
? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$("table").on("click", "td", function() {
let array = $(this).contents().filter(function() {
return this.nodeType == 3;
}).get();
let selection = document.getSelection(),
node = selection.baseNode;
let index = $.inArray(node, array);
alert(index);
})
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
строка 1 <br/> строка 2 <br/> строка 3
</td>
<td>
пусто
</td>
</tr>
<tr>
<td>
строка 1 <br/> строка 2 <br/> строка 3 <br/> строка 4 <br/> строка 5
</td>
<td>
пусто
</td>
</tr>
</table>
</body>
</html>
|
To рони:
Большущее спасибо! На Вашем коде приятно учиться. А о "переводе" на JQuery - мне его синтаксис более понятен (ибо, например, function({target}) взрывает мозг:). Ну, и вторая причина - мне легче организовать дальнейшую обработку щёлкнутого номера строки - мне надо будет подсветить или подчеркнуть строчку с соответствующим номером в соседней ячейке, если в ней таковая строчка существует. Всё это мне легче будет сделать на JQuery - я к нему уже привык, пока создавал другие свои веб-страницы. Например, эту. Огромное Вам спасибо ещё раз! |
Цитата:
$('#test').click(function({target}){console.log(target)})
|
To ksa:
Ага. Я по этому поводу, было, по началу расстроился - но потом оказалось, что JQuery для многих подобных "выходок" JavaScript'а имеет свои более человеко-понятные альтернативы :) |
Neznajka, на сегодняшний день JS получил довольно много инструментов, т.ч. jQ может выиграть только по количеству символов. :)
document.querySelectorAll('.test')
//
$('.test')
|
Ну, хорошо, уговорили - пусть побудет и JavaScript. :)
(Но - только после JQuery, очевидно) :) |
| Часовой пояс GMT +3, время: 01:51. |