Thiết kế website giá rẻ

Question

the issue is in bottom and Top performance columns are dynamic, i need to set colspan by dynamic no of columns, i select 1 to no of months of period (mm-yyyy) in 2023 or other year. abc to region static or fixed columns. please check dummy snippet.
my Requirement is

colspan dymanic
Bottom Performance – background red
Top Performance – background green
01-2023 (mm-yyyy) format to Jan-2023
01-20231 remove last 1 and make Jan-2023 – from all columns remove 1

i have Json data like,

<code>var ReportResult = [

{

"01-2023": "100", "02-2023" : "100", "01-20231" : "100", "02-20231" : "100", "03-2023" : "100", "03-20231" : "100", "abc" : "ALL", "abc_max" : "ALL", "xyz" : "ALL", "xyz_max" : "ALL"

}

]

</code>

<code>var ReportResult = [ { "01-2023": "100", "02-2023" : "100", "01-20231" : "100", "02-20231" : "100", "03-2023" : "100", "03-20231" : "100", "abc" : "ALL", "abc_max" : "ALL", "xyz" : "ALL", "xyz_max" : "ALL" } ] </code>

var ReportResult = [
{
    "01-2023": "100", "02-2023" : "100", "01-20231" : "100", "02-20231" : "100", "03-2023" : "100", "03-20231" : "100", "abc" : "ALL", "abc_max" : "ALL", "xyz" : "ALL", "xyz_max" : "ALL"
}
]

and my code is:

<code> var selector = document.getElementById("customTable");

var columns = addAllColumnHeaders(ReportResult, selector);

for (var i = 0; i < ReportResult.length; i++) {

var row$ = $('<tr/>');

for (var colIndex = 0; colIndex < columns.length; colIndex++) {

var cellValue = ReportResult[i][columns[colIndex]];

if (cellValue == null) cellValue = "";

row$.append($('<td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; " />').html(cellValue));

}

$(selector).append(row$);

}

function addAllColumnHeaders(ReportResult, selector) {

var columnSet = [];

var headerTr$ = $('<tr/>');

var Topheader$ = $('<tr />');

Topheader$.append($('<th colspan="4" />'));

Topheader$.append($('<th class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html("Bottom Performance"));

Topheader$.append($('<th class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html("Top Performance"));

for (var i = 0; i < ReportResult.length; i++) {

var rowHash = ReportResult[i];

for (var key in rowHash) {

if ($.inArray(key, columnSet) == -1) {

columnSet.push(key);

headerTr$.append($('<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html(key));

}

$(selector).append(Topheader$);

$(selector).append(headerTr$);

return columnSet;

}

</code>

<code> var selector = document.getElementById("customTable"); var columns = addAllColumnHeaders(ReportResult, selector); for (var i = 0; i < ReportResult.length; i++) { var row$ = $('<tr/>'); for (var colIndex = 0; colIndex < columns.length; colIndex++) { var cellValue = ReportResult[i][columns[colIndex]]; if (cellValue == null) cellValue = ""; row$.append($('<td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; " />').html(cellValue)); } $(selector).append(row$); } function addAllColumnHeaders(ReportResult, selector) { var columnSet = []; var headerTr$ = $('<tr/>'); var Topheader$ = $('<tr />'); Topheader$.append($('<th colspan="4" />')); Topheader$.append($('<th class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html("Bottom Performance")); Topheader$.append($('<th class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html("Top Performance")); for (var i = 0; i < ReportResult.length; i++) { var rowHash = ReportResult[i]; for (var key in rowHash) { if ($.inArray(key, columnSet) == -1) { columnSet.push(key); headerTr$.append($('<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html(key)); } } } $(selector).append(Topheader$); $(selector).append(headerTr$); return columnSet; } </code>

  var selector = document.getElementById("customTable");
    var columns = addAllColumnHeaders(ReportResult, selector);

    for (var i = 0; i < ReportResult.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = ReportResult[i][columns[colIndex]];
            if (cellValue == null) cellValue = "";
            row$.append($('<td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; " />').html(cellValue));
        }
        $(selector).append(row$);
    }
    function addAllColumnHeaders(ReportResult, selector) {
        var columnSet = [];
        var headerTr$ = $('<tr/>');

        var Topheader$ = $('<tr />');
        Topheader$.append($('<th colspan="4" />'));
        Topheader$.append($('<th class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html("Bottom Performance"));
    Topheader$.append($('<th class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html("Top Performance"));
        for (var i = 0; i < ReportResult.length; i++) {
            var rowHash = ReportResult[i];
            for (var key in rowHash) {
                if ($.inArray(key, columnSet) == -1) {
                   
                        columnSet.push(key);   
                        headerTr$.append($('<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;" />').html(key));
                    
                }
            }
        }
        $(selector).append(Topheader$);
        $(selector).append(headerTr$);

        return columnSet;
       }

<code>.Bottom_performer{

background:red;}

.Top_performer{

background:green;

}</code>

<code>.Bottom_performer{ background:red;} .Top_performer{ background:green; }</code>

.Bottom_performer{
    background:red;}
    .Top_performer{
    background:green;
    }

<tr>

<th colspan="3" class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Bottom Performance</th>

<th colspan="3" class="Top_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Top Performance</th>

</tr>

<tr>

<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">ProFamily</th>

<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Region</th>

<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;"> no of columns</th>

<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">no of columns</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></code>

<code> <table> <tr> <th colspan="4"></th> <th colspan="3" class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Bottom Performance</th> <th colspan="3" class="Top_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Top Performance</th> </tr> <tr> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">abc</th> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">xyz</th> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">ProFamily</th> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Region</th> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">01-2023</th> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">02-2023</th> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;"> no of columns</th> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">01-20231</th> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">02-20231</th> <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">no of columns</th> </tr> <tr> </tr> <tr> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">no of data</td> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td> <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">no of data</td> </tr> </table></code>

    <table>
      <tr>
        <th colspan="4"></th>
        <th colspan="3" class="Bottom_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Bottom Performance</th>
        <th colspan="3" class="Top_performer" style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Top Performance</th>
      </tr>
      <tr>
        <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">abc</th>
        <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">xyz</th>
        <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">ProFamily</th>
        <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">Region</th>
        <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">01-2023</th>
        <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">02-2023</th>
<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;"> no of columns</th>
        <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">01-20231</th>
        <th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">02-20231</th>
<th style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed;">no of columns</th>
      </tr>
      <tr>
      </tr>
      <tr>
        <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td>
        <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td>
        <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td>
        <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">ALL</td>
        <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td>
        <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td>
<td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">no of data</td>
        <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td>
        <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">100</td>
        <td style="padding: 8px; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; ">no of data</td>
      </tr>
    </table>

Thanks in Advance, anybody please help me. I try with lots of time.

Thiết kế website giá rẻ

Danh mục

dynamic colspan mix object with string, numbers, date string in c# javascript