我有一个HTML表格,其中有2个人。当用户在搜索框中输入文本并将表的结果隔离为1个名称时,将出现一个显示数字条形图的图表。该部分当前有效,但是当表中只有1个人时,我希望“ chartCreator”功能将结果从表的可见行直接拉到图表中。我将如何去做?我将使用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>
我进行了一些更改。如果您需要更多详细信息,请告诉我。
$(document).ready(function() {
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 == 0) {
$("#chartContainer").hide()
} else if (resultsCount == 1) {
document.getElementById("results_span").style.color = "#b6fbd2";
resultText = " person";
myFunction($($('.myTable tr:visible')[1]).children());
$('#chartContainer').show(200);
} else if (resultsCount > 1) {
document.getElementById("results_span").style.color = "#fbb6bc";
$("#chartContainer").hide();
} else {
document.getElementById("results_span").style.color = "#fbb6bc";
$("#chartContainer").hide();
}
document.getElementById("results_span").innerHTML = resultsCount + resultText;
resultText = " people";
});
});
function myFunction(colsArray) {
//console.log(colsArray)
var options = {
title: {
text: $(colsArray[0]).text()
},
data: [{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [{
label: "Jan",
y: parseInt($(colsArray[2]).text())
},
{
label: "Feb",
y: parseInt($(colsArray[3]).text())
},
{
label: "Mar",
y: parseInt($(colsArray[4]).text())
},
{
label: "Apr",
y: parseInt($(colsArray[5]).text())
},
{
label: "May",
y: parseInt($(colsArray[6]).text())
},
{
label: "Jun",
y: parseInt($(colsArray[7]).text())
},
{
label: "Jul",
y: parseInt($(colsArray[8]).text())
},
{
label: "Aug",
y: parseInt($(colsArray[8]).text())
},
{
label: "Sep",
y: parseInt($(colsArray[10]).text())
},
{
label: "Oct",
y: parseInt($(colsArray[11]).text())
},
{
label: "Nov",
y: parseInt($(colsArray[12]).text())
},
{
label: "Dec",
y: parseInt($(colsArray[13]).text())
}
]
}]
};
$("#chartContainer").CanvasJSChart(options);
}
#BackgroundContainer {
background-color: #6d5a5a;
padding-bottom: 30px;
min-height: 1100px;
background-size: auto auto;
}
#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;
}
#searchAndChartContainer {
min-height: 100px;
}
#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="code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.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 a paymaster:</p>
<input id="myInput" type="text" placeholder="Search...">
<span id="results_span"></span>
</div>
</div>
<br><br>
<table class="myTable">
<thead>
<tr>
<th>Employee</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> 2005 </td>
<td> 1427 </td>
<td> 1286 </td>
<td> 2140 </td>
<td> 2501 </td>
<td> 1491 </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> 1005 </td>
<td> 1327 </td>
<td> 1986 </td>
<td> 1145 </td>
<td> 3501 </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>
<br><br>
<div id="chartContainer"></div>
</div>
您也可以将th
用于标签。现在,您可以将th
的数组和可见td
的数组传递给create方法。在这里,您可以遍历数组,为数据点创建对象数组。
$(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";
//Get visible td
let visTd = $('.myTable tr:visible td');
//Get headers
let ths = $('.myTable thead th');
//Call chart creator
chartCreator(visTd[0].textContent,visTd, ths);
$('#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, arrTd, arrTh) {
//Array to hold the data points
let dPoints = Array();
//Regex to replace commas in your values
let rx =/,/gi
//Iterate the arrays (skip the first 2 as they are labels)
for(var i = 2; i < arrTd.length; i++)
{
dPoints.push({label : arrTh[i].textContent, y: parseInt(arrTd[i].textContent.replace(rx,""), 10)});
}
var options = {
title: {
text: paymasterName
},
data: [{
type: "column",
//Add our datapoint array here.
dataPoints: dPoints
}]
};
$("#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>