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

问题描述 投票:1回答:2

我有一个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>
jquery arrays html-table
2个回答
1
投票

我进行了一些更改。如果您需要更多详细信息,请告诉我。

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

-1
投票

您也可以将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>
© www.soinside.com 2019 - 2024. All rights reserved.