可点击的表格答案

【问题标题】：Clickable table可点击的表格
【发布时间】：2020-11-21 19:32:08
【问题描述】：

我在 JS 中创建了一个生成表格的简单函数。现在我想这样做：当我单击表格的某个单元格时，页面将提醒单元格内的值：变量 b，正如您在代码中看到的那样。我试过了，但我没有成功。在代码里面。我也用过 Jquery。

代码：JS

    function gen() {
        var rowData = '';
        for (var a = 0; a < 5; a++) {
            rowData += '<tr>';
            for (var i = 0; i < 3; i++) {
                
                rowData += '<td>';

                rowData += b;

                rowData += '</td>';

                b++;

            }
            rowData += "</tr>";
            
        }

        $('#myTableId2').append(rowData);


    }

HTML：

 <table id="myTableId2"> </table>
 <button onclick="gen()">Generate</button>

【问题讨论】：

标签： javascript html html-table clickable

【解决方案1】：

rowData += '<td onclick="alert(this.innerHTML)">';

【讨论】：

@DavidKristek：如果史蒂夫的回答解决了您的问题，请务必将其标记为已接受的答案。你也可以考虑点赞。

【解决方案2】：

我看到你正在使用 jQuery。您可以将click() 事件附加到每个<td> 元素，如下所示。

请注意，由于您的示例中未定义 b，因此出于说明目的，我冒昧地给它一个随机值。

function gen() {
  let b = Math.floor(Math.random() * 1000) + 1; //generate random value
  var rowData = '';
  for (var a = 0; a < 5; a++) {
    rowData += '<tr>';
    for (var i = 0; i < 3; i++) {

      rowData += '<td>';

      rowData += b;

      rowData += '</td>';

      b++;

    }
    rowData += "</tr>";

  }

  $('#myTableId2').append(rowData);

  //attach the click event using jQuery
  $("td").click(function(){alert(this.innerText)});

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTableId2"> </table>
<button onclick="gen()">Generate</button>

【讨论】：