【发布时间】：2020-05-15 13:08:07
【问题描述】：
我有一个 html 表格，里面有 2 个人。当用户在搜索框中输入文本并将表格的结果隔离为 1 个名称时，会出现一个显示数字条形图的图表。该部分当前有效，但我希望“chartCreator”函数在表中只有 1 人时将结果直接从表的可见行拉到图表中。我该怎么做呢？我会使用 jquery 循环遍历可见行的内容并将它们存储到一个数组中并将该数组用作 myFunction 参数吗？我对此很陌生，因此我们将不胜感激。
$(document).ready(function(){
//this section searches the table and hides the rows that don't match the searched text
//it also counts the number of rows in the table and displays the chart if there is only 1 row visible
var resultText = " people";
var resultsCount = $('.myTable tr:visible').length -1;
document.getElementById("results_span").innerHTML = resultsCount + resultText;
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".myTable tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
resultsCount = $('.myTable tr:visible').length - 1;
if (resultsCount == 1) {
document.getElementById("results_span").style.color = "#b6fbd2";
resultText = " person";
chartCreator("Todd Anderson", 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000);
$('#chartContainer').show(200);
}
else {document.getElementById("results_span").style.color = "#fbb6bc"; $("#chartContainer").hide();}
document.getElementById("results_span").innerHTML = resultsCount + resultText;
resultText = " people";
});
});
//this function feeds values into the chart and creates the chart
function chartCreator(paymasterName, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11, m12) {
var options = {
title: {text: paymasterName},
data: [{
type: "column",
dataPoints: [
{ label: "Jan", y: m1 },
{ label: "Feb", y: m2 },
{ label: "Mar", y: m3 },
{ label: "Apr", y: m4 },
{ label: "May", y: m5 },
{ label: "Jun", y: m6 },
{ label: "Jul", y: m7 },
{ label: "Aug", y: m8 },
{ label: "Sep", y: m9 },
{ label: "Oct", y: m10 },
{ label: "Nov", y: m11 },
{ label: "Dec", y: m12 }
]
}]
};
$("#chartContainer").CanvasJSChart(options);
} #BackgroundContainer{
background-color: #6d5a5a;
min-height: 600px;
}
#searchAndChartContainer{min-height: 100px;}
#search_prompt_div{
margin-left: 16px;
display: inline-block;
height: 110px;
width: 390px;
float: left;
}
#search_prompt_div p{color: white; font-size: 14px; margin-bottom: 12px;}
#search_prompt_div input{height: 30px;font-size: 16px; width: 300px;}
#search_prompt_div #results_span{display: inline-block;margin-left: 6px; color: #b6fbef; font-size: 12px;}
#chartContainer{margin-left: 30px; display: none; height: 200px; width: 500px;}
.myTable {margin-left: 15px; border-collapse: collapse; border-spacing:0; border: 1px solid #a5aebf !important;}
.myTable td{
color: #defffc;
background-color: rgba(102, 118, 127, 0.63);
text-align:left;vertical-align:top;
font-size:14px; padding:10px 5px;
border-style:solid;
border-width:1px;
border-color:#a5aebf;
}
.myTable th{
font-size:18px;
background-color: rgba(72, 102, 123, 0.52);
color: #eaecf9;
padding:10px 5px; border-style:solid; border-width:1px; border-color:#a5aebf;
}
.myTable th:nth-child(-n+2){width:200px;}
.myTable th:nth-child(n+3){width:60px;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="BackgroundContainer">
<br><br>
<div id="searchAndChartContainer">
<div id="search_prompt_div">
<p>Type a name here to find an employee:</p>
<input id="myInput" type="text" placeholder="Search...">
<span id="results_span"></span>
</div>
<br><br>
<div id="chartContainer"></div>
</div>
<br><br>
<table class="myTable">
<thead><tr><th>Paymaster</th><th>Manager</th><th> Jan </th><th> Feb </th><th> Mar </th><th> Apr </th><th> May </th><th> Jun </th><th> Jul </th><th> Aug </th><th> Sep </th><th> Oct </th><th> Nov </th><th> Dec </th></tr></thead><tbody>
<tr><td>Todd Anderson</td><td>Sophia Patterson</td><td> 2,005 </td><td> 1,427 </td><td> 1,286 </td><td> 2,140 </td><td> 2,501 </td><td> 1,491 </td><td> 616 </td><td> 360 </td><td> 396 </td><td> 494 </td><td> 447 </td><td> 486 </td></tr>
<tr><td>John Smith</td><td>Jane Doe</td><td> 1,005 </td><td> 1,327 </td><td> 1,986 </td><td> 1,145 </td><td> 3,501 </td><td> 491 </td><td> 516 </td><td> 460 </td><td> 596 </td><td> 482 </td><td> 247 </td><td> 386 </td></tr>
</tbody>
</table>
</div>【问题讨论】：
标签： jquery arrays html-table