Как получить значение html table td ячейки JavaScript?

У меня есть таблица HTML, созданная с динамическими данными, и не могу предсказать количество строк в ней. То, что я хочу сделать, - это получить значение ячейки при щелчке по строке. Я знаю, использовать td onclick, но я не знаю, как получить доступ к значению ячейки в функции Javascript.

Значение ячейки фактически является индексом записи, и оно скрыто в таблице. После того, как ключ записи находится, я могу извлечь всю запись из db.

Как получить значение ячейки, если я не знаю индекс строки и индекс столбца, который я нажал?

Ответы

Ответ 1

Не используйте встроенный JavaScript, отделяйте свое поведение от своих данных, и он становится намного проще в обращении. Я бы предложил следующее:

var table = document.getElementById('tableID'),
    cells = table.getElementsByTagName('td');

for (var i=0,len=cells.length; i<len; i++){
    cells[i].onclick = function(){
        console.log(this.innerHTML);
        /* if you know it going to be numeric:
        console.log(parseInt(this.innerHTML),10);
        */
    }
}

var table = document.getElementById('tableID'),
  cells = table.getElementsByTagName('td');

for (var i = 0, len = cells.length; i < len; i++) {
  cells[i].onclick = function() {
    console.log(this.innerHTML);
  };
}

th,
td {
  border: 1px solid #000;
  padding: 0.2em 0.3em 0.1em 0.3em;
}

<table id="tableID">
  <thead>
    <tr>
      <th>Column heading 1</th>
      <th>Column heading 2</th>
      <th>Column heading 3</th>
      <th>Column heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>43</td>
      <td>23</td>
      <td>89</td>
      <td>5</td>
    </tr>
    <tr>
      <td>4</td>
      <td>3</td>
      <td>0</td>
      <td>98</td>
    </tr>
    <tr>
      <td>10</td>
      <td>32</td>
      <td>7</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Ответ 2

Это мое решение

var cells = Array.prototype.slice.call(document.getElementById("tableI").getElementsByTagName("td"));
for(var i in cells){
    console.log("My contents is \"" + cells[i].innerHTML + "\"");
}

Ответ 3

Вы можете использовать:

<td onclick='javascript:someFunc(this);'></td>

При передаче этого вы можете получить доступ к объекту DOM через ваши параметры функции.

Ответ 4

Я дал таблице идентификатор, чтобы найти его. В onload (когда страница загружается браузером) я устанавливаю обработчики событий onclick во все строки таблицы. Эти обработчики предупреждают содержимое первой ячейки.

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var rows = document.getElementById("mytable").rows;
                    for(var i = 0, ceiling = rows.length; i < ceiling; i++) {
                        rows[i].onclick = function() {
                            alert(this.cells[0].innerHTML);
                        }
                    }
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <table id="mytable">
            <tr>
                <td>0</td>
                <td>row 1 cell 2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>row 2 cell 2</td>
            </tr>
        </table>    
    </body>
</html>

Ответ 5

.......................

  <head>

    <title>Search students by courses/professors</title>

    <script type="text/javascript">

    function ChangeColor(tableRow, highLight)
    {
       if (highLight){
           tableRow.style.backgroundColor = '00CCCC';
       }

    else{
         tableRow.style.backgroundColor = 'white';
        }   
  }

  function DoNav(theUrl)
  {
  document.location.href = theUrl;
  }
  </script>

</head>
<body>

     <table id = "c" width="180" border="1" cellpadding="0" cellspacing="0">

            <% for (Course cs : courses){ %>

            <tr onmouseover="ChangeColor(this, true);" 
                onmouseout="ChangeColor(this, false);" 
                onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');">

                 <td name = "title" align = "center"><%= cs.getTitle() %></td>

            </tr>
           <%}%>

........................
</body>

Я написал таблицу HTML в JSP. Курс - это тип. Например, курс cs, cs = объект типа Course, который имеет 2 атрибута: id, title. Курсы - объект ArrayList курса.

В таблице HTML отображаются все названия курсов в каждой ячейке. Таким образом, таблица имеет только 1 столбец: 1 курс Course2 Course3 ...... Отвлекаясь:

 onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');"

Это означает, что после того, как пользователь выберет ячейку таблицы, например "Course2" , заголовок курса "Курс2" переместится на страницу, где URL-адрес направляет пользователя: http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp. "Course2" поступит на страницу FoundS.jsp. Идентификатор "Course2" - это курс. Чтобы объявить переменную courseId, в которой будет сохраняться CourseX, вы помещаете "?" после URL и рядом с ним идентификатор. Он работает.