JavaScript's method of dynamically adding columns
- 2020-05-19 04:07:21
- OfStack
This example shows how JavaScript dynamically adds columns. Share with you for your reference. The specific implementation method is as follows:
/***
* Dynamically add table column
* @param result
*/
function addRow(resultJson){
/* var temp = [];
temp = $.grep(arr, function(val, key) {
if(val.indexOf('c') != -1)
return true;
// if [invert] Parameter not given or for false, $.grep Only the callback function returns are collected true Array elements of
// And vice [invert] Parameters for true, $.grep The collection callback function returns false Array elements of
}, false);
console.dir(temp);
*/
if(resultJson!=""){
var cv_arr=new Array();
var date_arr = new Array();
// The data source is parsed and parsed into a program recognizable date and result
$.each(resultJson, function(index, val) {
if(val['parser_schedule']!=null){
cv_arr.push(val['parser_schedule']);
var temp_data =val['parser_schedule'].split(",");
for(i=0;i<temp_data.length;i++){
var temp = temp_data[i].split(":");
date_arr.push(temp[0]);
}
}
});
date_arr = unique(date_arr);
date_arr.in_arr = function(value) {
var a = this;
// To increase method extension adaptability. I've changed it a little bit
for (var i = 0; i < a.length; i++) {
if (a[i] == value)
return i;
}
}
//ARR The values from 0 start
var old_td_n = $("#mytable thead tr").find("th").length;
// Take what you have TH
// Set up the TH information
for(i=0;i<date_arr.length;i++){
// Pay attention to TH and TD, The style is not 1 sample
$("#mytable thead tr").append("<th>"+date_arr[i]+"</th>");
$("#mytable tbody tr").append("<td>-</td>");
}
var rowNum_arr=new Array();
// To obtain 1 How many rows
for(i=0;i<$("#mytable").find("tr").length;i++){
// For each 1 The first in line 3 The value of the column, table The first two columns are hidden, first 3 The column begins to determine if there is data
var str=$("#mytable tbody").find("tr").eq(i);
var std=str.find("td").eq(2);
// Record when there is no value, get the line number
if($.trim(std.text()).length <1){
rowNum_arr.push(i);
}else{
// $(std).html("");
}
}
// Set up the TD information
for(i=0;i<cv_arr.length;i++){
// To obtain RESULT_ARR Date data in
var temp_str = cv_arr[i];//OK
// Use date data "," Split into arrays
var temp_arr = temp_str.split(",");//OK [03-11:10,03-12:9,03-13:8,03-14:15]
for(j=0;j<temp_arr.length;j++){
// Fetch data set For a string such as 03-11:10
var temp_result = temp_arr[j];
/*
Split the data set into an array [03-11:10]
ARR[0] 03-11
ARR[1] 10
*/
var temp_result_arr = temp_result.split(":");
// Set up the first I the TR The contents of
$("#mytable tbody").find("tr").eq(rowNum_arr[i]).find("td").eq(old_td_n+date_arr.in_arr(temp_result_arr[0])).html(temp_result_arr[1]);
// Apply the style
$("#tb tr:even td").addClass("alt");// The color
$("#tb tr").find("td:eq(2)").addClass("spec");
$("#tb tr:even").find("td:eq(2)").addClass("specalt");
}
}
}
}
I hope this article has been helpful to your javascript programming.