Question

我无法打印网格。这就是我想要做的事情：

将网格大小作为用户的输入。
根据输入动态创建网格。

以下是代码的一部分。

$(document).ready(function() {
    $("#grid-input").click(function() {
        $(".drawing-area").empty();

        var rows = $("#row").val();
        var cols = $("#col").val();
        if (rows > 0 && cols > 0) {
            for (var i = 1; i <= rows; i++) {
                var rowClassName = 'row' + i;
                $('<tr></tr>').addClass(rowClassName).appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

                for (var j = 1; j <= cols; j++) {
                    var colClassName = 'col' + j;
                    $('<td width="20px" height="20px" style="border: 1px solid #000"></td>').addClass(colClassName).appendTo('.rowClassName');
                }

            }
        } else {
            alert("You haven't provided the grid size!");
        }
    });
});
});

 <table class="drawing-area">
                        
  </table>

Answer 1

您的代码中存在错误，不需要最后一个括号。

在代码末尾添加dom，

尝试以下代码

$(document).ready(function() {
    $("#grid-input").click(function() {
        $(".drawing-area").empty();

        var rows = $("#row").val();
        var cols = $("#col").val();
        if (rows > 0 && cols > 0) {
            for (var i = 1; i <= rows; i++) {
                var rowClassName = 'row' + i;
                var tr = $('<tr>').addClass(rowClassName);
                tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

                for (var j = 1; j <= cols; j++) {
                    var colClassName = 'col' + j;
                    $('<td width="20px" height="20px" style="border: 1px solid #000">').addClass(colClassName).appendTo(tr);
                }

            }
        } else {
            alert("You haven't provided the grid size!");
        }
    });
});

Answer 2

您可以先尝试将动态表格行保存到变量$tr，然后将动态表格列添加到$tr变量中，如：

＆＃13;

$("#grid-input").click(function() {
  $(".drawing-area").empty();

  var rows = $("#row").val();
  var cols = $("#col").val();
  if (rows > 0 && cols > 0) {
    for (var i = 1; i <= rows; i++) {
      var rowClassName = 'row' + i;
      
      // Saving dynamic table row variable
      var $tr = $('<tr/>').addClass(rowClassName).appendTo('.drawing-area'); 

      for (var j = 1; j <= cols; j++) {
        var colClassName = 'col' + j;
        $('<td>'+ (i * j) +'</td>').addClass(colClassName)
        
        // Append the new td to this $tr
        .appendTo($tr);
      }
    }
  } else {
    alert("You haven't provided the grid size!");
  }
});

＆＃13;

.drawing-area{font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;border-collapse:collapse;width:100%}
.drawing-area td,.drawing-area th{border:1px solid #ddd;padding:8px}
.drawing-area tr:nth-child(even){background-color:#f2f2f2}
.drawing-area tr:hover{background-color:#ddd}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Row: <input type="number" id="row"><br/> 
Col: <input type="number" id="col"><br/>
<button id="grid-input">Save</button><br/><br/>
<table class="drawing-area">
</table>

＆＃13;

无法使用jQuery打印表格

2 个答案: