Question

fiddle link

    
    var tableValue = [
                      {
                    	    "5": "15942",
                    	    "6": "46456",
                    	    "7": "149079",
                    	    "8": "231616",
                    	    "9": "221235",
                    	    "10": "189642",
                    	    "11": "144417",
                    	    "12": "188025",
                    	    "13": "335321",
                    	    "14": "405479",
                    	    "15": "280150",
                    	    "16": "234051",
                    	    "17": "243563",
                    	    "18": "276148",
                    	    "19": "258459",
                    	    "20": "228403",
                    	    "21": "145696",
                    	    "22": "14966",
                    	    "OUTLET": "",
                    	    "BILLDATE": "TOTAL",
                    	    "TOTAL": "3608648"
                    	  },
                    	  {
                    	    "1": "0",
                    	    "2": "0",
                    	    "3": "0",
                    	    "4": "0",
                    	    "5": "605",
                    	    "6": "6073",
                    	    "7": "8324",
                    	    "8": "15596",
                    	    "9": "13424",
                    	    "10": "15865",
                    	    "11": "12101",
                    	    "12": "16792",
                    	    "13": "31889",
                    	    "14": "39439",
                    	    "15": "19949",
                    	    "16": "17571",
                    	    "17": "21105",
                    	    "18": "20803",
                    	    "19": "22551",
                    	    "20": "19865",
                    	    "21": "9632",
                    	    "22": "5",
                    	    "OUTLET": "JAYANAGAR",
                    	    "BILLDATE": "2018-08-01",
                    	    "TOTAL": "291589"
                    	  },
                    	  {
                    	    "1": "0",
                    	    "2": "0",
                    	    "3": "0",
                    	    "4": "0",
                    	    "5": "3736",
                    	    "6": "5177",
                    	    "7": "10598",
                    	    "8": "12227",
                    	    "9": "12020",
                    	    "10": "12329",
                    	    "11": "11412",
                    	    "12": "20662",
                    	    "13": "32000",
                    	    "14": "37438",
                    	    "15": "21690",
                    	    "16": "18499",
                    	    "17": "23042",
                    	    "18": "22779",
                    	    "19": "19878",
                    	    "20": "16754",
                    	    "21": "14371",
                    	    "22": "1513",
                    	    "OUTLET": "",
                    	    "BILLDATE": "2018-08-02",
                    	    "TOTAL": "296125"
                    	  
                    	
                    	  }
                    	]
    

 function addTable() {
    	 var col = Object.keys(tableValue[0]);     // get all the keys from first object
    	 
    	
    	     var countNum = col.filter(i => !isNaN(i)).length;        
    	    var num = col.splice(0, countNum);                            
    	    col = col.concat(num); 
    	    
    	  
    	    
                                                                        // shift the first item to last
                                                                        // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

                                                        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1);                       // TABLE ROW.


      for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");             // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

                                                            // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < tableValue.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = tableValue[i][col[j]];
        }
    }

                                                              // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("newTable");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
}
addTable()

  table, th, td 
            {
                border: solid 1px #DDD;
               
               
            }

<table id="newTable" class="table table-striped">
</table>

我正在制作一个html表，并且HTML表的数据来自Java端，并且以JSON形式来自Java端，我将在其中填充html表。

我想要的是将所有数字数据向右对齐，并将字母数据向左对齐，并希望将单行文本的颜色设置为深黑色。

以下是我的代码

<table id="newTable" class="table table-striped">
</table>

    <script>

        var tableValue = [
                          {
                                "5": "15942",
                                "6": "46456",
                                "7": "149079",
                                "8": "231616",
                                "9": "221235",
                                "10": "189642",
                                "11": "144417",
                                "12": "188025",
                                "13": "335321",
                                "14": "405479",
                                "15": "280150",
                                "16": "234051",
                                "17": "243563",
                                "18": "276148",
                                "19": "258459",
                                "20": "228403",
                                "21": "145696",
                                "22": "14966",
                                "OUTLET": "",
                                "BILLDATE": "TOTAL",
                                "TOTAL": "3608648"
                              },
                              {
                                "1": "0",
                                "2": "0",
                                "3": "0",
                                "4": "0",
                                "5": "605",
                                "6": "6073",
                                "7": "8324",
                                "8": "15596",
                                "9": "13424",
                                "10": "15865",
                                "11": "12101",
                                "12": "16792",
                                "13": "31889",
                                "14": "39439",
                                "15": "19949",
                                "16": "17571",
                                "17": "21105",
                                "18": "20803",
                                "19": "22551",
                                "20": "19865",
                                "21": "9632",
                                "22": "5",
                                "OUTLET": "JAYANAGAR",
                                "BILLDATE": "2018-08-01",
                                "TOTAL": "291589"
                              },
                              {
                                "1": "0",
                                "2": "0",
                                "3": "0",
                                "4": "0",
                                "5": "3736",
                                "6": "5177",
                                "7": "10598",
                                "8": "12227",
                                "9": "12020",
                                "10": "12329",
                                "11": "11412",
                                "12": "20662",
                                "13": "32000",
                                "14": "37438",
                                "15": "21690",
                                "16": "18499",
                                "17": "23042",
                                "18": "22779",
                                "19": "19878",
                                "20": "16754",
                                "21": "14371",
                                "22": "1513",
                                "OUTLET": "",
                                "BILLDATE": "2018-08-02",
                                "TOTAL": "296125"


                              }
                            ]
        function addTable() {
             var col = Object.keys(tableValue[0]);     // get all the keys from first object


                 var countNum = col.filter(i => !isNaN(i)).length;        
                var num = col.splice(0, countNum);                            
                col = col.concat(num); 



                                                                            // shift the first item to last
                                                                            // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

                                                            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                       // TABLE ROW.


          for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");             // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

                                                                // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < tableValue.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = tableValue[i][col[j]];
            }
        }

                                                                  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("newTable");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }
    addTable()

        </script>

这是我的CSS

    table, th, td 
    {
        border: solid 1px #DDD;
        text-align: right;

    }
</style>

我只想知道如何将文本向左或向右对齐，以及如何使用javascript给行中的任何一个加粗文本或为彩色

Answer 1

在表中添加与您在标头中使用的类相同的tr或仅在下面添加

style="font-weight:bold"

对于leftalign，请转到td并在下方添加

<td align="left">

Answer 2

我在这里创建了示例代码，希望对您有所帮助。默认情况下，每个元素都采用float：left属性。

table {
  border: 1px solid black;
  width: 100%;
}

th,
td {
  text-align: left;
  padding: 8px;
}

tr {
  border: 1px solid black;
}

.right {
  float: right;
}

tr:nth-child(even) {
  background-color: #ccc;
}

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>jhon</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td class="right">Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td></td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>

</table>

使用jquery这样做

$(document).ready(function(){
    $('#tablecontent tr:eq(2) > td:first-child').addClass('right');
     $('#tablecontent tr:nth-child(even)').css('background-color', '#cccccc');
});

如何右对齐或左对齐表数据并为JSON数据中HTML表中的任何行着色

2 个答案: