Question

我正在尝试使用用户输入值向表中添加行和列，以使用jQuery动态确定行数和列数。下面是我的代码，它实际上添加了行和列，但不是根据用户的输入

function makeGrid() {
let numOfRow = 0; let numOfCol = 0;

$('#submit').on('click', function() {

    numOfRow = $('#height').val();
    numOfCol = $('#width').val();

    for (var i = 1; i <= numOfRow; i++) {
        let row = $('.grid-canvas').append('<tr>');
        for (col = 1; col <= numOfCol; col++) {
            $('tr').append('<td></td>');
        }
    }
}); 
}

makeGrid();

假设用户输入numOfRow = 2和numOfCol = 2，我应该有一个这样的表

<tbody class="grid-canvas">
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>

问题是我的代码似乎正在增加额外但我无法弄明白。这是我的代码

的结果

<tbody class="grid-canvas">
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
</tbody>

如何修复代码？

Answer 1

纯JavaScript代码在这里

function f(x, y) {
  var rows = x,
    rowButtonNumber = y;

  var table = document.getElementById("myTable");
  table.innerHTML = "";

  for (var i = 0; i < rows; i++) {
    var tr = document.createElement("tr");
    table.appendChild(tr);
    for (var j = 0; j < rowButtonNumber; j++) {
      var td = document.createElement("td");
      var btn = document.createElement("button");
      btn.innerHTML = "btn " + (i + 1);
      btn.id = "btn-" + i;
      btn.onclick = function() {
        alert(this.innerHTML);
      };
      td.appendChild(btn);
      tr.appendChild(td);
    }
  }
}

function go() {
  var row = document.getElementById("row").value;
  var col = document.getElementById("col").value;
  f(row, col);
}

<html>

<head>
  <style>
    td {
      width: 200px;
      height: 200px;
    }
    
    button {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  Rows
  <input id="row" type="number" placeholder="Rows" />
  <br> Columns
  <input id="col" type="number" placeholder="Columns" />
  <button onclick="go()">Go</button>

  <table id="myTable" cellspacing="50">

  </table>

</body>

Answer 2

您似乎没有使用row变量。我建议将新创建的td附加到row而不是$('tr')。

使用jQuery动态添加表行和列

2 个答案: