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

Ответ 1

Примерно так.

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

Рабочая демонстрация.

Ответ 2

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

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

Ответ 3

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

Работа DEMO

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

Литература:

• Где я взял строку window.prompt от (Jarek Milewski):

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

• Для выбора полной таблицы (Tim Down). Очень интересно, но я не смог адаптироваться к элементу <tr>.

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

Хотя большинство ответов являются копией ответа 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);
  }
}