#javascript #html
Вопрос:
привет, у меня был вопрос, как я могу отправить значение из тега, кроме входных данных ! к функции javascript для идентификации …
например, я хочу нажать на тег tr в таблице (на экране), затем отправить значение или имя или что-то в этом роде функции, после чего функция начнет идентифицировать значение или данные тега … например, если имя тега, данные тега или значение тега были «tag1», он запускает функцию. Я искал раньше и видел, что многие люди используют идентификатор данных, но я не знаю, работает ли он для меня или нет … тогда как я могу его использовать.
<html>
<head>
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<table>
<tr>
<td data-id = "td1" id = "td1" >
</td>
<td id = "td2" >
</td>
<td id = "td3" >
</td>
</tr>
<tr>
<td id = "td4" >
</td>
<td id = "td5" >
</td>
<td id = "td6" >
</td>
</tr>
<tr>
<td id = "td7" >
</td>
<td id = "td8" >
</td>
<td id = "td9" >
</td>
</tr>
</table>
<script>
function clicked(){
let x = document.getElementById("td1").getAttribute("onclick")
}
</script>
</body>
</html>
вот код css :
* {
margin: 0px;
padding: 0px;
}
table {
width: 200px;
height: 200px;
border:1px solid black;
}
table td {
border:1px solid black;
}
Комментарии:
1. Не могли бы вы опубликовать то, что вы пробовали (включая как javascript, так и HTML-код)?
2. да, конечно, я добавил код html / js, если вы видите, что другие элементы не похожи на td1, это потому, что я хотел бы проверить идентификатор данных, но я не знаю, как именно
Ответ №1:
Я приведу вам пример для справки:
let allTrs = document.getElementsByTagName('tr');
for (let i =0;i<allTrs.length;i ){
allTrs[i].addEventListener("click",()=>{hello(allTrs[i])});
}
function hello(row){
let cellList=row.cells;
for (let i=0;i<cellList.length;i ){
console.log("id=" cellList[i].id);
console.log("data-id=" cellList[i].getAttribute('data-id'));
console.log("text content=" cellList[i].textContent);
console.log("=======================================");
}
}
* {
margin: 0px;
padding: 0px;
}
table {
width: 200px;
height: 200px;
border:1px solid black;
}
table td {
border:1px solid black;
}
<table>
<tr>
<td data-id="td1" id="td1">
1
</td>
<td id="td2">
2
</td>
<td id="td3">
3
</td>
</tr>
<tr>
<td id="td4">
4
</td>
<td id="td5">
5
</td>
<td id="td6">
6
</td>
</tr>
<tr>
<td id="td7">
7
</td>
<td id="td8">
8
</td>
<td id="td9">
9
</td>
</tr>
</table>