javascript - Javascript无法将参数添加到带有循环的函数
问题描述
我有一个代码在应用于 html 表时应该做热图:
html表格代码:
<table class='table' id='js-datatable' cellspacing="0.9" cellpadding="8" border="1">
<tr>
<th align=center style="white-space: nowrap;" bgcolor=grey>product</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>Jan</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>Feb</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>Mar</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>Apr</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>May</th>
</tr>
<tr class='heatmap-stable'>
<td align=center>K22</td>
<td align=center>655$</td>
<td align=center>365$</td>
<td align=center>265$</td>
<td align=center>125$</td>
<td align=center>36$</td>
</tr>
<tr class='heatmap-stable'>
<td align=center>K52</td>
<td align=center>90</td>
<td align=center>50</td>
<td align=center>120</td>
<td align=center>80</td>
<td align=center>190</td>
</tr>
<tr class='heatmap-stable'>
<td align=center>J42</td>
<td align=center>1267</td>
<td align=center>1567</td>
<td align=center>347</td>
<td align=center>697</td>
<td align=center>70</td>
</tr>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.js'></script>
<script type='text/javascript' src='script.js'></script>
</table>
javascript文件代码:
function clean_formatted_data(str) {
return parseFloat (str.replace (/([%,$,\,])+/g, ''));
}
function col_to_array(tbl_col, target) {
// Returns column `n` (zero indexed) in table id `target` as an array
var colArray = $ ('#' + target + ' td:nth-child(' + tbl_col + ')').map (function () {
return clean_formatted_data ($ (this).text ());
}).get ();
return colArray;
}
//------ new schtuff ------------------------//
function get_pos_of_max(col_data) {
return $.inArray (Math.max.apply (Math, col_data), col_data)
}
function generate_opacities(col_data, max) {
var opacity_array = [];
var increment = max / (col_data.length);
for (i = col_data.length; i >= 1; i--) {
opacity_array.push (i * increment / 100);
}
return opacity_array;
}
function process_col_best_performing(tbl_col, target) {
var col_data = col_to_array (tbl_col, target);
var opacity_array = generate_opacities (col_data, 50);
var row_count = col_data.length;
for (var i = 1; i <= row_count; i++) {
$ ('#' + target + ' tr:nth-child(' + (get_pos_of_max (col_data) + 1) + ') td:nth-child(' + tbl_col + ')').css ('background', 'rgba(0,0,255,' + opacity_array[0] + ')');
col_data[get_pos_of_max (col_data)] = null;
for (const spliceElement of opacity_array.splice (0, 1)) {
}
}
}
假设我有 5 列,所以我的 javascript 函数可以这样应用:
process_col_best_performing (tbl_col:1, target:'js-datatable');
process_col_best_performing (tbl_col:2, target:'js-datatable');
process_col_best_performing (tbl_col:3, target:'js-datatable');
但是因为这只是一个例子,真正的 html 表可以有任意数量的列,我想用 for 循环来做这个,我尝试了下面的代码,但它不起作用
var cols_qty = document.getElementById ('js-datatable').rows[0].cells.length
var i;
for(i = 1; i < 4; i++) {
console.log(i)
process_col_best_performing(tbl_col=i,'js-datatable');
}
*我是javascript的新手,所以如果你知道答案,请尽可能用最简单的方式解释。
解决方案
不确定这是否有帮助,但试试下面的代码,第一件事不要声明为 global var i; 在 for 循环之前,我不确定您是否在代码中执行相同的操作,但相同的 i 在函数内部发生更改并影响您调用 process_col_best_performing 的循环。检查下面的代码,看看这是否有意义。
var cols_qty = document.getElementById ('js-datatable').rows[0].cells.length
for(var i = 1; i < 4; i++) {
console.log(i)
process_col_best_performing(i,'js-datatable');
}
function clean_formatted_data(str) {
return parseFloat (str.replace (/([%,$,\,])+/g, ''));
}
function col_to_array(tbl_col, target) {
// Returns column `n` (zero indexed) in table id `target` as an array
var colArray = $ ('#' + target + ' td:nth-child(' + tbl_col + ')').map (function () {
return clean_formatted_data ($ (this).text ());
}).get ();
return colArray;
}
//------ new schtuff ------------------------//
function get_pos_of_max(col_data) {
return $.inArray (Math.max.apply (Math, col_data), col_data)
}
function generate_opacities(col_data, max) {
var opacity_array = [];
var increment = max / (col_data.length);
for (var i = col_data.length; i >= 1; i--) {
opacity_array.push (i * increment / 100);
}
return opacity_array;
}
function process_col_best_performing(tbl_col, target) {
var col_data = col_to_array (tbl_col, target);
var opacity_array = generate_opacities (col_data, 50);
var row_count = col_data.length;
for (var i = 1; i <= row_count; i++) {
$ ('#' + target + ' tr:nth-child(' + (get_pos_of_max (col_data) + 1) + ') td:nth-child(' + tbl_col + ')').css ('background', 'rgba(0,0,255,' + opacity_array[0] + ')');
col_data[get_pos_of_max (col_data)] = null;
for (const spliceElement of opacity_array.splice (0, 1)) {
}
}
}
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.js'></script>
<table class='table' id='js-datatable' cellspacing="0.9" cellpadding="8" border="1">
<tr>
<th align=center style="white-space: nowrap;" bgcolor=grey>product</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>Jan</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>Feb</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>Mar</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>Apr</th>
<th align=center style="white-space: nowrap;" bgcolor=grey>May</th>
</tr>
<tr class='heatmap-stable'>
<td align=center>K22</td>
<td align=center>655$</td>
<td align=center>365$</td>
<td align=center>265$</td>
<td align=center>125$</td>
<td align=center>36$</td>
</tr>
<tr class='heatmap-stable'>
<td align=center>K52</td>
<td align=center>90</td>
<td align=center>50</td>
<td align=center>120</td>
<td align=center>80</td>
<td align=center>190</td>
</tr>
<tr class='heatmap-stable'>
<td align=center>J42</td>
<td align=center>1267</td>
<td align=center>1567</td>
<td align=center>347</td>
<td align=center>697</td>
<td align=center>70</td>
</tr>
</table>
推荐阅读
- jasmine - 为什么我在断言步骤中收到超时错误
- java - @OneToOne 单向级联没有被 sql 查询删除
- angular - Angular 9 Universal 和 SEO
- c++ - 使用 scanf 从文本文件行中读取多个整数
- .net - 存储原始数据以进行复杂计算
- matplotlib - 使用 twinx 时出现旋转 xtick 标签的问题
- javascript - Json to google chart table with different cols and row
- c# - 当数据库没有任何链接(并且我无法添加任何链接)时,如何处理数据库优先?
- javascript - 为什么在使用模式时触发 useEffect 而不改变依赖关系?
- java - 如何对 java.util.Arrays.toString 使用静态导入?