我有一个脚本可以根据用户指定的规范创建一个表。
问题是,当表格被多次打印时,它会打印在另一个表格的下方。将 10x10 的 table 变成 10x20 的 table 。 (如果这有意义的话)
在之前的作业中我使用了:
//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() block 工作正常。
最佳答案
首先,你要区分变量。
A. There is a variable that has to define 1 time, and any changes will be stored on that.
B. And there is a variable that needs to be reset every function called.
条件 b 的变量,您需要将其放入函数中,这样它就不会保留最后一个值并使其具有双倍值(最后一个值 + 新值)
在这种情况下,我可以说这个变量在条件 b 上:
$table_obj, $row_obj, $col_obj, arr, ...
关于javascript - 如何使用 jQuery 从元素中删除所有子项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56678496/