Добавление события onclick в строку таблицы - PullRequest
Новая
       18

Добавление события onclick в строку таблицы

25 голосов
/ 30 июля 2009

Я пытаюсь добавить событие onclick в строку таблицы через Javascript. 

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        row = table.rows[i];
        row.onclick = function(){
                          var cell = this.getElementsByTagName("td")[0];
                          var id = cell.innerHTML;
                          alert("id:" + id);
                      };
    }
}

Это работает, как и ожидалось, в Firefox, но в Internet Explorer (IE8) я не могу получить доступ к ячейкам таблицы. Я полагаю, что это как-то связано с тем, что «this» в функции onclick идентифицируется как «Window» вместо «Table» (или что-то в этом роде).

Если бы я мог получить доступ к текущей строке, я мог бы выполнить getElementById в функции onclick, поскольку я не могу найти способ сделать это. Есть предложения?

Спасибо!

Ответы [ 10 ]

34 голосов
/ 30 июля 2009

Как то так. 

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}

EDIT

Рабочая демо .

3 голосов
/ 30 июля 2009

Я думаю, что для IE вам нужно будет использовать свойство srcElement объекта Event . если jQuery - вариант для вас, вы можете рассмотреть возможность его использования - так как он абстрагирует большинство отличий браузера для вас Пример jQuery: 

$("#tableId tr").click(function() {
   alert($(this).children("td").html());
});
2 голосов
/ 20 апреля 2015

Вот компактная и немного более чистая версия того же чистого Javascript ( не jQuery ) решения, как описано выше @redsquare и @SolutionYogi (re: добавление * 1005) * обработчики событий для всех строк таблицы HTML), которые работают во всех основных веб-браузерах, включая последнюю версию IE11: 

function addRowHandlers() {
    var rows = document.getElementById("tableId").rows;
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function(){ return function(){
               var id = this.cells[0].innerHTML;
               alert("id:" + id);
        };}(rows[i]);
    }
}
window.onload = addRowHandlers();

Рабочая ДЕМО

Примечание : чтобы заставить его работать и в IE8, вместо указателя this используйте явный идентификатор, такой как function(myrow), как предложено @redsquare. С уважением,

1 голос
/ 30 июля 2009

Голова застряла в JQ слишком долго. Это будет работать. 

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        var row = table.rows[i];
        row.onclick = function(myrow){
                          return function() { 
                             var cell = myrow.getElementsByTagName("td")[0];
                             var id = cell.innerHTML;
                             alert("id:" + id);
                      };
                  }(row);
    }
}
0 голосов
/ 11 мая 2019

В то время как большинство ответов являются копией ответа SolutionYogi, все они пропускают важную проверку, чтобы увидеть, не является ли «ячейка» пустым, что при щелчке по заголовкам выдаст ошибку. Итак, вот ответ с включенным чеком: 

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        // check if not null
        if(!cell) return; // no errors! 
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}
0 голосов
/ 28 октября 2018

Простой способ генерировать код, как показано ниже: 

<!DOCTYPE html>
<html>
<head>

<style>
  table, td {
      border:1px solid black;
  }
</style>

</head>
<body>
<p>Click on each tr element to alert its index position in the table:</p>
<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
  function myFunction(x) {
      alert("Row index is: " + x.rowIndex);
  }
</script>

</body>
</html>
0 голосов
/ 02 мая 2017

Вот как я это делаю. Я создаю таблицу с тегами thead и tbody. А затем добавьте событие click к элементу tbody по id. 

<script>
    document.getElementById("mytbody").click = clickfunc;
    function clickfunc(e) {
        // to find what td element has the data you are looking for
        var tdele = e.target.parentNode.children[x].innerHTML;
        // to find the row
        var trele = e.target.parentNode;
    }
</script>
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody id="mytbody">
        <tr><td>Data Row</td><td>1</td></tr>
        <tr><td>Data Row</td><td>2</td></tr>
        <tr><td>Data Row</td><td>3</td></tr>
    </tbody>
</table>
0 голосов
/ 30 апреля 2017

Я пытался выбрать строку таблицы, чтобы ее можно было легко скопировать в буфер обмена и затем вставить в Excel. Ниже приведена небольшая адаптация вашего решения.

Ссылки: 

<!DOCTYPE html>
<html>
<body>

<div>
    <table id="tableId" border=1>
      <tbody>
        <tr><td>Item <b>A1</b></td><td>Item <b>B1</b></td></tr>
        <tr><td>Item <b>A2</b></td><td>Item <b>B2</b></td></tr>
        <tr><td>Item <b>A3</b></td><td>Item <b>B3</b></td></tr>
      </tbody>
    </table>
</div>

<script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;

                                        var cell1 = row.getElementsByTagName("td")[1];
                                        var id2 = cell1.innerHTML;
                                        // alert(id + " - " + id2);
                                        window.prompt("Copy to clipboard: Ctrl+C, Enter", "<table><tr><td>" + id + "</td><td>" + id2 + "</td></tr></table>")
                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>
</body>
</html>
0 голосов
/ 12 ноября 2013

Моя таблица находится в другом iframe, поэтому я изменил SolutionYogi ответ для работы с этим: 

<script type="text/javascript">
window.onload = addRowHandlers;
function addRowHandlers() {
    var iframe = document.getElementById('myiframe');
    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    var table = innerDoc.getElementById("mytable");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;
                                        alert("id:" + id);
                                 };
            }

        currentRow.onclick = createClickHandler(currentRow);
    }
}
</script>
0 голосов
/ 30 июля 2009

Попробуйте изменить строку this.getElementsByTagName("td")[0]) на row.getElementsByTagName("td")[0];. Это должно захватить ссылку row в замыкании, и оно должно работать как положено.

Edit: вышеприведенное неверно, поскольку row является глобальной переменной - как уже говорили другие, выделите новую переменную и затем используйте THAT в замыкании.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...