Форум

Neznajka · #1 (**permalink**) 03.08.2022, 20:54

Приветствую всех!
Можно ли с помощью 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>

рони · #2 (**permalink**) 03.08.2022, 21:29

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>

Neznajka · #3 (**permalink**) 03.08.2022, 22:57

To рони:
Великолепно! Спасибо большое! Я, честно говоря, не думал, что это вообще можно сделать. А можно ли это как-то "перевести" на JQuery, чтобы впихнуть в

$('document').ready(function(){...}

?

рони · #4 (**permalink**) 04.08.2022, 00:48

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

А можно ли это как-то "перевести" на JQuery, чтобы впихнуть в

можно, но зачем?

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

Neznajka · #5 (**permalink**) 04.08.2022, 09:38

To рони:
Большущее спасибо! На Вашем коде приятно учиться.
А о "переводе" на JQuery - мне его синтаксис более понятен (ибо, например, function({target}) взрывает мозг

. Ну, и вторая причина - мне легче организовать дальнейшую обработку щёлкнутого номера строки - мне надо будет подсветить или подчеркнуть строчку с соответствующим номером в соседней ячейке, если в ней таковая строчка существует. Всё это мне легче будет сделать на JQuery - я к нему уже привык, пока создавал другие свои веб-страницы. Например, эту.
Огромное Вам спасибо ещё раз!

ksa · #6 (**permalink**) 04.08.2022, 14:09

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

А о "переводе" на JQuery - мне его синтаксис более понятен (ибо, например, function({target}) взрывает мозг

Синтаксис везде JS.

$('#test').click(function({target}){console.log(target)})

Neznajka · #7 (**permalink**) 04.08.2022, 14:21

To ksa:
Ага. Я по этому поводу, было, по началу расстроился - но потом оказалось, что JQuery для многих подобных "выходок" JavaScript'а имеет свои более человеко-понятные альтернативы

ksa · #8 (**permalink**) 04.08.2022, 14:32

Neznajka, на сегодняшний день JS получил довольно много инструментов, т.ч. jQ может выиграть только по количеству символов.

document.querySelectorAll('.test')
//
$('.test')

Neznajka · #9 (**permalink**) 05.08.2022, 00:10

Ну, хорошо, уговорили - пусть побудет и JavaScript.

(Но - только после JQuery, очевидно)

Форум

Справочник

Discord чат

Курсы javascript