hi I had a question that how can I send a value from a tag except for inputs ! to a javascript function for getting identified ...
for example, I want to click on a tr tag in table (on screen) then send a value or name or something like that to a function then function starts identifying tag value or data ... for example if tag name or tag data or tag value was "tag1" it runs a function. I searched before and saw many people use data-id but I don't know is it workable for me or not ... then how can I use it.
<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>
here is the css code :
* {
margin: 0px;
padding: 0px;
}
table {
width: 200px;
height: 200px;
border:1px solid black;
}
table td {
border:1px solid black;
}
I give you an example for your reference:
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>