как отправить значение из тега, кроме ввода в функцию?

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