it-swarm.com.ru

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

Я пытаюсь добавить событие 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, поскольку я не могу найти способ сделать это. Какие-либо предложения?

Спасибо!

25
user80978

Что-то вроде этого.

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);
  }
}

ПРАВКА

Рабочая демо

34
SolutionYogi

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

$("#tableId tr").click(function() {
   alert($(this).children("td").html());
});
3
Nick Riggs

Вот компактная и немного более чистая версия того же чистого решения Javascript (не jQuery), как обсуждалось выше @redsquare и @SolutionYogi (повторное добавление обработчиков событий onclick во все 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
Alexander Bell

Голова застряла в 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);
    }
}
1
redsquare

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

<!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
Zolfaghari

Вот как я это делаю. Я создаю таблицу с тегами 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
user3121053

Моя таблица находится в другом 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
Fco Javier Rod Ca

Я пытался выбрать строку таблицы, чтобы ее можно было легко скопировать в буфер обмена и затем вставить в 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
robertocm

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

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

0
Luke Rinard