Question

我有一个脚本，该脚本创建具有用户指定规格的表。

问题在于，当该表多次打印时，它会在另一个表下方打印。将10x10表格变成10x20表格。（如果有道理）

在以前的作业中，我使用了：

  //Clean grid
  while(grid.firstChild)
    grid.removeChild(grid.firstChild);

清除网格，但是此分配使用的是jQuery，但我不确定如何执行。我尝试过：

  var divBlock = document.getElementById('my_table');
  while (divBlock.firstChild) {
    divBlock.removeChild(divBlock.firstChild);

和

$("#my_table").empty();

和

$("#my_table").remove();

和

$('#my_table').remove('table');

但似乎都不起作用，这是完整的代码：

// TODO: clear table

var $rows = $("#rows");
var $cols = $("#cols");
var $print_button = $("#print");
var $my_table = $("#my_table");
var $stats = $("#stats");
var arr = [];
var $table_obj = $('<table>');  //Create an element
var $row_obj;
var $col_obj;
var counter = 0;

$print_button.on('click', function() {print_pattern();});

function print_pattern()
{
  // Clear table
  // var divBlock = document.getElementById('my_table');
  // while (divBlock.firstChild) {
  //   divBlock.removeChild(divBlock.firstChild);
  // }
  // $("#my_table").empty();

  $('#my_table').remove('table');


  // Get row and column values
  var r = $rows.val();          //Get value of rows             
element
  var c = $cols.val();      //Get value of cols element
  // Create 2-D Array
  for (var i = 0; i < r; i++) {
    arr[i] = [];
  }
  // Double for-loop to create table
  for (var i = 0; i < r; i++) {
    $row_obj = $('<tr>'); // Create row
    for (var j = 0; j < c; j++) {
      $col_obj = $('<td>');  // Create table cell
      var n = Math.floor(Math.random()*10000)%100;  //Math methods:     
floor and random
      $($col_obj).append(n); // Append random number to table cell
      $($row_obj).append($col_obj); // Append column to row
      $($table_obj).append($row_obj); // Append row to table object
      // if random number > 90 -> make background color yellow
      if (n > 90) {
        $col_obj.css('background-color', 'yellow');   //Change css
        counter++;  // counter for stats
      }
    }
    $($table_obj).append($row_obj); // Append row to table object
  }
  $($my_table).append($table_obj);  // Append table to div container
  // Stats calculation
 $stats.html("<b>" + (counter/(r*c)*100).toFixed(2) + "%<b>");  
//Change html content
  counter = 0; // reset counter
  // event function for removing a row when its clicked on
 $('tr').on('click', function(){  $(this).fadeOut(500);  });
}

因此，我尝试了很多事情，但不确定是语法错误还是使用错误的函数清除div标签。

如果有人能指出正确的方向，那将会有很大帮助！

谢谢。

编辑：我发现了问题。当我将所有变量放入函数中时，我原来的while（）块运行良好。

Answer 1

首先，您必须区分变量。

A。有一个变量必须定义1次，任何更改都会   被保存在那里。

B。并且每个功能都有一个需要重置的变量   叫。

在条件b下需要将变量放入函数中，以便它不会保留最后一个值并使它具有double value (last value + new value)

在这种情况下，我可以说这个变量在条件b上：

$table_obj, $row_obj, $col_obj, arr, ...

如何使用jQuery从元素中删除所有子级？

1 个答案: