如何使用 jquery 仅从此 HTML 表的可见行中检索值？

Question

I have an html table with 2 people in it. When the user enters text into the search box and isolates the results of the table to 1 name, a chart appears that shows a bar graph of numbers. That portion currently works, but I want the "chartCreator" function to pull the results directly from the visible row of the table into the chart when there is only 1 person in the table. How would I go about doing that? Would I use jquery to loop through the contents of the visible row and store them into an array and use that array as the myFunction parameter? I'm pretty new to this so any help would be appreciated.

 $(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>

Answer 1

I did few changes.. please let me know if you needed more details.

 $(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>

Answer 2

You can use the th for your labels as well. Now you can pass an array of the th and an array of the visible td to your create method. Here you can iterate through the arrays crating an array of objects for your data points.

 $(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>