可点击 table

Question

我在 JS 中创建了一个生成 table 的简单函数。现在我想这样做：当我点击 table 的某个单元格时，页面将 提醒单元格内的值：变量 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>

Answer 1

我看到您正在使用 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>

Answer 2

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

可点击 table

Clickable table

html

javascript

html-table

clickable