12

Вопрос по javascript – Как получить значение HTML td ячейки таблицы с помощью JavaScript?

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

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

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

  • @localhost: вы абсолютно правы, я отредактировал исправление пропущенной точки с запятой и предложил альтернативное решение, в котором используется именованная функция, а не несколько анонимных функций, созданных в цикле. Спасибо за комментарий!

    от
  • Вы пропустили точку с запятой. Кроме того, не выполняйте функции в цикле.

    от
  • Во времена, когда есть jQuery и так много других библиотек, которые поощряют неброский JavaScript, встроенные функции - не самый лучший метод.

    от
  • Ничего плохого в встроенных обработчиках. Не каждый является частью «ненавязчивого JavaScript» религии.

    от
  • getElementsByTagName () иногда примерно в 70 (!) раз быстрее, чем querySelectorAll ()jsperf.com/getelementsbytagname-vs-queryselectorall-multiple ;)

    от
5 ответов
  • 5

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

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

  • 1

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

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

    С прохождениемthis Вы можете получить доступ к объекту DOM через параметры вашей функции.

  • 0

    Я дал столу идентификатор

    чтобы я мог его найти. При загрузке (когда страница загружается браузером) я установил обработчики событий 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> 
    

  • 13

    Не используйте встроенный 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's 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>

    JS Fiddle доказательство концепции.

    Пересмотренный подход, в ответ на комментарий (ниже):

    You're missing a semicolon. Also, don't make functions within a loop.

    Эта ревизия связывает (одну) именованную функцию какclick обработчик событий<td> элементов и избегает ненужных накладных расходов на создание нескольких анонимных функций в цикле (что является плохой практикой из-за повторения и влияния на производительность из-за использования памяти):

    function logText() {
      // 'this' is automatically passed to the named
      // function via the use of addEventListener()
      // (later):
      console.log(this.textContent);
    }
    
    // using a CSS Selector, with document.querySelectorAll()
    // to get a NodeList of <td> elements within the #tableID element:
    var cells = document.querySelectorAll('#tableID td');
    
    // iterating over the array-like NodeList, using
    // Array.prototype.forEach() and Function.prototype.call():
    Array.prototype.forEach.call(cells, function(td) {
      // the first argument of the anonymous function (here: 'td')
      // is the element of the array over which we're iterating.
    
      // adding an event-handler (the function logText) to handle
      // the click events on the <td> elements:
      td.addEventListener('click', logText);
    });
    

    function logText() {
      console.log(this.textContent);
    }
    
    var cells = document.querySelectorAll('#tableID td');
    
    Array.prototype.forEach.call(cells, function(td) {
      td.addEventListener('click', logText);
    });
    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>

    JS Fiddle доказательство концепции.

    Рекомендации:

    Array.prototype.forEach(). document.getElementById(). document.getElementsByTagName(). document.querySelectorAll(). EventTarget.addEventListener(). Function.prototype.call().

  • 0

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

      <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. Course это тип. Например, курс cs, cs = объект типа Course, который имеет 2 атрибута: id, title. courses является ArrayList объектов Course

    The HTML table displays all the courses titles in each cell. So the table has 1 column only: Course1 Course2 Course3 ...... Taking aside:

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

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