问:
How to give specific width to HTML table and columns
I have created an HTML table with JSON data which I am dividing into four columns to show up on display Screen, and at one go showing 5 rows then after 5 seconds next five row, This how my table is working

Now I have to show that Table on a display screen which has a resolution of 1336*768 soi am trying to give the full with so that it fitted to screen without any scroll

Due to Some reasons I want to give width to my columns also but that too is not taking the width, I don't know what I am doing wrong It is coming

Code

$(document).ready(function() {

  var tableValue = [{
    "Item Name": "MANCHOW  V SOUP",
    "SellingPrice": 100
  }, {
    "Item Name": "MANCHOW NV SOUP ",
    "SellingPrice": 125
  }, {
    "Item Name": "CEASER SALAD V",
    "SellingPrice": 175
  }, {
    "Item Name": "CEASER SALAD NV",
    "SellingPrice": 230
  }, {
    "Item Name": "GAMBUS REBOZADAS",
    "SellingPrice": 350
  }, {
    "Item Name": "PANCO FISH FINGER",
    "SellingPrice": 270
  }, {
    "Item Name": "MUSHROOM DUPLEX",
    "SellingPrice": 160
  }, {
    "Item Name": "FRENCH FRIES",
    "SellingPrice": 99
  }, {
    "Item Name": "HONEY GARLIC PRAWN",
    "SellingPrice": 350
  }, {
    "Item Name": "CHICKEN MANCHURIAN",
    "SellingPrice": 180
  }, {
    "Item Name": "MUSHROOM CHILLY",
    "SellingPrice": 120
  }, {
    "Item Name": "SALT N PEPPER BABY CORN",
    "SellingPrice": 120
  }, {
    "Item Name": "SOUTHERN STYLE CHICKEN",
    "SellingPrice": 210
  }, {
    "Item Name": "PANEER NAGGETS",
    "SellingPrice": 210
  }, {
    "Item Name": "HARA BHARA KEBAB",
    "SellingPrice": 160
  }, {
    "Item Name": "CHICKEN TIKKA",
    "SellingPrice": 210
  }, {
    "Item Name": "KALMI KEBAB",
    "SellingPrice": 250
  }, {
    "Item Name": "PIZZA MARGARITTA",
    "SellingPrice": 200
  }, {
    "Item Name": "PIZZA VEG FARMHOUSE",
    "SellingPrice": 200
  }, {
    "Item Name": "BBQ CHICKEN PIZZA",
    "SellingPrice": 225
  }, {
    "Item Name": "CHICKEN TIKKA PIZZA",
    "SellingPrice": 225
  }, {
    "Item Name": "PESTO SAUCE",
    "SellingPrice": 175
  }, {
    "Item Name": "ARABIATA",
    "SellingPrice": 160
  }, {
    "Item Name": "PINK SAUCE",
    "SellingPrice": 160
  }, {
    "Item Name": "GARBANZO BEAN SALAD",
    "SellingPrice": 90
  }, {
    "Item Name": "MASALA PAPAD",
    "SellingPrice": 50
  }, {
    "Item Name": "PEANUT MASALA",
    "SellingPrice": 60
  }, {
    "Item Name": "GAJAR KA HALWA",
    "SellingPrice": 90
  }, {
    "Item Name": "WATERMELON MARTINI",
    "SellingPrice": 281
  }, {
    "Item Name": "Kiwi martini",
    "SellingPrice": 281
  }, {
    "Item Name": " Apple gin",
    "SellingPrice": 225
  }, {
    "Item Name": "Cucumber  cooler ",
    "SellingPrice": 281
  }, {
    "Item Name": "Martini",
    "SellingPrice": 225
  }, {
    "Item Name": "Pink lady",
    "SellingPrice": 225
  }, {
    "Item Name": " Bloody marry",
    "SellingPrice": 281
  }, {
    "Item Name": "Cosmopolitan",
    "SellingPrice": 281
  }, {
    "Item Name": "Sex on the beach",
    "SellingPrice": 281
  }, {
    "Item Name": "Bull frog",
    "SellingPrice": 506
  }, {
    "Item Name": "Long  island iced tea ",
    "SellingPrice": 393
  }, {
    "Item Name": "Pinacolada",
    "SellingPrice": 225
  }, {
    "Item Name": "Daiquiri",
    "SellingPrice": 225
  }, {
    "Item Name": "Mojito ",
    "SellingPrice": 281
  }, {
    "Item Name": "Whisky sour",
    "SellingPrice": 281
  }, {
    "Item Name": "Hot toddy",
    "SellingPrice": 225
  }, {
    "Item Name": "Margarita",
    "SellingPrice": 337
  }, {
    "Item Name": "Tequila sunrise",
    "SellingPrice": 337
  }, {
    "Item Name": "Red sangria",
    "SellingPrice": 225
  }, {
    "Item Name": "White sangria",
    "SellingPrice": 247
  }, {
    "Item Name": "Rose sangria",
    "SellingPrice": 247
  }, {
    "Item Name": "By chance special ",
    "SellingPrice": 168
  }, {
    "Item Name": "Made in heaven",
    "SellingPrice": 168
  }, {
    "Item Name": "Strawberry delight",
    "SellingPrice": 168
  }, {
    "Item Name": "DRAGON",
    "SellingPrice": 168
  }, {
    "Item Name": "Mangochil ",
    "SellingPrice": 168
  }, {
    "Item Name": "Cucumber cola",
    "SellingPrice": 168
  }, {
    "Item Name": "Virgin mojito",
    "SellingPrice": 168
  }, {
    "Item Name": "Virgin mary",
    "SellingPrice": 168
  }, {
    "Item Name": "Virgin pinacolada",
    "SellingPrice": 168
  }, {
    "Item Name": "CORONA",
    "SellingPrice": 438
  }, {
    "Item Name": "CRAFT BEERS",
    "SellingPrice": 337
  }, {
    "Item Name": "BIRA WHITE 330",
    "SellingPrice": 157
  }, {
    "Item Name": "BIRA BLONDE 330",
    "SellingPrice": 135
  }, {
    "Item Name": "BIRA STRONG 650",
    "SellingPrice": 213
  }, {
    "Item Name": "KINGFISHER PREMIUM 330",
    "SellingPrice": 123
  }, {
    "Item Name": "KINGFISHER PREMIUM 650",
    "SellingPrice": 202
  }, {
    "Item Name": "KINGFISHER STRONG 330",
    "SellingPrice": 135
  }, {
    "Item Name": "KINGFISHER STRONG 650",
    "SellingPrice": 213
  }, {
    "Item Name": "KINGFISHER ULTRA 330",
    "SellingPrice": 146
  }, {
    "Item Name": "KINGFISHER ULTRA 650",
    "SellingPrice": 281
  }, {
    "Item Name": "KINGFISHER ULTRA MAX 330",
    "SellingPrice": 146
  }, {
    "Item Name": "KINGFISHER ULTRA MAX 650",
    "SellingPrice": 281
  }, {
    "Item Name": "BUDWIESER 330",
    "SellingPrice": 146
  }, {
    "Item Name": "BUDWIESER 650",
    "SellingPrice": 270
  }, {
    "Item Name": "BUDWIESER MAGNUM 330",
    "SellingPrice": 168
  }, {
    "Item Name": "BUDWIESER MAGNUM 650",
    "SellingPrice": 281
  }, {
    "Item Name": "TUBORG 330",
    "SellingPrice": 123
  }, {
    "Item Name": "TUBORG 650",
    "SellingPrice": 191
  }, {
    "Item Name": "TUBORG STRONG 330",
    "SellingPrice": 123
  }, {
    "Item Name": "TUBORG STRONG 650",
    "SellingPrice": 213
  }, {
    "Item Name": "CRANBERRY ",
    "SellingPrice": 157
  }, {
    "Item Name": "ORANGE",
    "SellingPrice": 157
  }, {
    "Item Name": "JAMICAN",
    "SellingPrice": 157
  }, {
    "Item Name": "BLACK BERRY",
    "SellingPrice": 157
  }, {
    "Item Name": "BLUE BERRY",
    "SellingPrice": 157
  }, {
    "Item Name": "MOET CHANDON",
    "SellingPrice": 7875
  }, {
    "Item Name": "SULA BRUT",
    "SellingPrice": 1687
  }, {
    "Item Name": "MATEUS ROSE",
    "SellingPrice": 2137
  }, {
    "Item Name": "HARDYS SIRAZ CABERNET 750",
    "SellingPrice": 1890
  }, {
    "Item Name": "HARDYS SIRAZ CABERNET BY GLASS",
    "SellingPrice": 382
  }, {
    "Item Name": "JACOB CREEK SIRAZ 750",
    "SellingPrice": 1800
  }, {
    "Item Name": "JACOB CREEK SIRAZ BY GLASS",
    "SellingPrice": 360
  }, {
    "Item Name": "BIG BANAYAN CHENNIN BLANC 750",
    "SellingPrice": 990
  }, {
    "Item Name": "BIG BANAYAN CHENNIN BLANC BY GLASS",
    "SellingPrice": 202
  }, {
    "Item Name": "SULA CHENIN BLANC 750 ",
    "SellingPrice": 1293
  }, {
    "Item Name": "SULA CHENIN BLANC BY GLASS",
    "SellingPrice": 258
  }, {
    "Item Name": "FOUR SEAZON CLASSIC CHENNIN BLANC 7",
    "SellingPrice": 1125
  }, {
    "Item Name": "FOUR SEAZON CLASSIC CHENNIN BLANC B",
    "SellingPrice": 225
  }, {
    "Item Name": "BIG BANAYAN CARBINET SAUVIGNON 750",
    "SellingPrice": 1125
  }, {
    "Item Name": "BIG BANAYAN CARBINET SAUVIGNON BY G",
    "SellingPrice": 225
  }, {
    "Item Name": "SULA SATORI MERLOT 750",
    "SellingPrice": 1237
  }, {
    "Item Name": "SULA SATORI MERLOT BY GLASS",
    "SellingPrice": 247
  }, {
    "Item Name": "GROVERS LA RESERVE 750",
    "SellingPrice": 1800
  }, {
    "Item Name": "GROVERS LA RESERVE 100",
    "SellingPrice": 360
  }, {
    "Item Name": "GLENFIDDICH 12 YEARS 700 ",
    "SellingPrice": 9225
  }, {
    "Item Name": "GLENFIDDICH 12 YEARS 30",
    "SellingPrice": 405
  }, {
    "Item Name": "TALISKER 750",
    "SellingPrice": 8775
  }, {
    "Item Name": "TALISKER 30",
    "SellingPrice": 360
  }, {
    "Item Name": "GLENNLIVET 750",
    "SellingPrice": 8887
  }, {
    "Item Name": "GLENNLIVET 30",
    "SellingPrice": 360
  }, {
    "Item Name": "THE SINGLETON 750",
    "SellingPrice": 7942
  }, {
    "Item Name": "THE SINGLETON 30",
    "SellingPrice": 326
  }, {
    "Item Name": "AMRUT FUSION 750",
    "SellingPrice": 5062
  }, {
    "Item Name": "AMRUT FUSION 30",
    "SellingPrice": 202
  }, {
    "Item Name": "JACK DANIELS 750",
    "SellingPrice": 7312
  }, {
    "Item Name": "JACK DANIELS 30",
    "SellingPrice": 292
  }, {
    "Item Name": "JIM BEAM WHITE 750",
    "SellingPrice": 4095
  }, {
    "Item Name": "JIM BEAM WHITE 30",
    "SellingPrice": 168
  }, {
    "Item Name": "JAMESON 750",
    "SellingPrice": 4950
  }, {
    "Item Name": "JAMESON 30",
    "SellingPrice": 202
  }, {
    "Item Name": "JW BLACK LABEL 750",
    "SellingPrice": 8212
  }, {
    "Item Name": "JW BLACK LABEL 200",
    "SellingPrice": 2925
  }, {
    "Item Name": "JW BLACK LABEL 30",
    "SellingPrice": 337
  }, {
    "Item Name": "JW RED LABEL 200",
    "SellingPrice": 1158
  }, {
    "Item Name": "BALLENTINSE FINEST BLENDED 750",
    "SellingPrice": 4545
  }, {
    "Item Name": "BALLENTINSE FINEST BLENDED 30",
    "SellingPrice": 180
  }, {
    "Item Name": "BLACK \u0026 WHITE 375",
    "SellingPrice": 1575
  }, {
    "Item Name": "BLACK \u0026 WHITE 180",
    "SellingPrice": 787
  }, {
    "Item Name": "BLACK \u0026 WHITE 60",
    "SellingPrice": 258
  }, {
    "Item Name": "BLACK \u0026 WHITE 30",
    "SellingPrice": 135
  }, {
    "Item Name": "100 PIPERS 180",
    "SellingPrice": 787
  }, {
    "Item Name": "100 PIPERS 60",
    "SellingPrice": 258
  }, {
    "Item Name": "100 PIPERS 30",
    "SellingPrice": 135
  }, {
    "Item Name": "VAT 69 180",
    "SellingPrice": 675
  }, {
    "Item Name": "VAT 69 60",
    "SellingPrice": 225
  }, {
    "Item Name": "VAT 69 30",
    "SellingPrice": 112
  }, {
    "Item Name": "TEACHERS HIGHLAND 180",
    "SellingPrice": 787
  }, {
    "Item Name": "TEACHERS HIGHLAND 60",
    "SellingPrice": 258
  }, {
    "Item Name": "TEACHERS HIGHLAND 30",
    "SellingPrice": 135
  }, {
    "Item Name": "TEACHERS 50 60",
    "SellingPrice": 393
  }, {
    "Item Name": "TEACHERS 50 30",
    "SellingPrice": 202
  }, {
    "Item Name": "BLACK DOG TRIPPLE GOLD 180",
    "SellingPrice": 1215
  }, {
    "Item Name": "BLACK DOG TRIPPLE GOLD 30",
    "SellingPrice": 213
  }, {
    "Item Name": "BLACK DOG 8 YEARS 180",
    "SellingPrice": 731
  }, {
    "Item Name": "BLACK DOG 8 YEARS 60",
    "SellingPrice": 247
  }, {
    "Item Name": "BLACK DOG 8 YEARS 30",
    "SellingPrice": 123
  }, {
    "Item Name": "BLENDERS PRIDE 750",
    "SellingPrice": 2283
  }, {
    "Item Name": "BLENDERS PRIDE 375",
    "SellingPrice": 1147
  }, {
    "Item Name": "BLENDERS PRIDE 180",
    "SellingPrice": 573
  }, {
    "Item Name": "BLENDERS PRIDE 60",
    "SellingPrice": 191
  }, {
    "Item Name": "BLENDERS PRIDE 30",
    "SellingPrice": 90
  }, {
    "Item Name": "SIGNATURE 180",
    "SellingPrice": 450
  }, {
    "Item Name": "SIGNATURE 60",
    "SellingPrice": 168
  }, {
    "Item Name": "SIGNATURE 30",
    "SellingPrice": 90
  }, {
    "Item Name": "GREY GOOSE 750",
    "SellingPrice": 8190
  }, {
    "Item Name": "GREY GOOSE 30",
    "SellingPrice": 326
  }, {
    "Item Name": "BELVEDERE 700",
    "SellingPrice": 8122
  }, {
    "Item Name": "BELVEDERE 30",
    "SellingPrice": 360
  }, {
    "Item Name": "CIROC 750",
    "SellingPrice": 7425
  }, {
    "Item Name": "CIROC 30",
    "SellingPrice": 303
  }, {
    "Item Name": "ABSOLUT 750",
    "SellingPrice": 4556
  }, {
    "Item Name": "ABSOLUT 30",
    "SellingPrice": 191
  }, {
    "Item Name": "SMIRNOFF RED 180",
    "SellingPrice": 551
  }, {
    "Item Name": "SMIRNOFF RED 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMIRNOFF RED30",
    "SellingPrice": 101
  }, {
    "Item Name": "SMIRNOFF ORANGE 180",
    "SellingPrice": 551
  }, {
    "Item Name": "SMIRNOFF ORANGE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMINOFF ORANGE30",
    "SellingPrice": 101
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE 180",
    "SellingPrice": 551
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE30",
    "SellingPrice": 101
  }, {
    "Item Name": "BOMBAY SAPHIRE 750",
    "SellingPrice": 4725
  }, {
    "Item Name": "BOMBAY SAPHIRE 30",
    "SellingPrice": 191
  }, {
    "Item Name": "BLUE RIBBAND 750",
    "SellingPrice": 877
  }, {
    "Item Name": "BLUE RIBBAND 60",
    "SellingPrice": 78
  }, {
    "Item Name": "BACCARDI WHITE 750",
    "SellingPrice": 2418
  }, {
    "Item Name": "BACCARDI WHITE 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI WHITE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "BACCARDI WHITE 30",
    "SellingPrice": 101
  }, {
    "Item Name": "BACCARDI LEMON 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI LEMON 60",
    "SellingPrice": 202
  }, {
    "Item Name": "BACCARDI LEMON 30",
    "SellingPrice": 101
  }, {
    "Item Name": "BACCARDI ORANGE 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI ORANGE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "BACCARDI LEMON 30",
    "SellingPrice": 101
  }, {
    "Item Name": "BACCARDI BLACK 180",
    "SellingPrice": 393
  }, {
    "Item Name": "BACCARDI BLACK 30",
    "SellingPrice": 67
  }, {
    "Item Name": "BACCARDI GOLD 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI GOLD30",
    "SellingPrice": 101
  }, {
    "Item Name": "OLD MONK 180",
    "SellingPrice": 225
  }, {
    "Item Name": "OLD MONK 90",
    "SellingPrice": 168
  }, {
    "Item Name": "OLD MONK 60",
    "SellingPrice": 90
  }, {
    "Item Name": "OLD MONK 30 ",
    "SellingPrice": 45
  }, {
    "Item Name": "DON ANGEL 750",
    "SellingPrice": 4668
  }, {
    "Item Name": "DON ANGEL 30",
    "SellingPrice": 191
  }, {
    "Item Name": "SAUZA SILVER 700",
    "SellingPrice": 6153
  }, {
    "Item Name": "SAUZA SILVER 30",
    "SellingPrice": 270
  }, {
    "Item Name": "JAGERBOMB",
    "SellingPrice": 506
  }, {
    "Item Name": "KAMAKAZI",
    "SellingPrice": 168
  }, {
    "Item Name": "JAGERMASTER",
    "SellingPrice": 303
  }, {
    "Item Name": "COINTTRAEU",
    "SellingPrice": 303
  }, {
    "Item Name": "SAMBUCA",
    "SellingPrice": 258
  }, {
    "Item Name": "KHALUA",
    "SellingPrice": 168
  }, {
    "Item Name": "MARTINI BLANCO",
    "SellingPrice": 90
  }, {
    "Item Name": "MARTINI ROSSO",
    "SellingPrice": 90
  }, {
    "Item Name": "HENESSY VS 700",
    "SellingPrice": 7875
  }, {
    "Item Name": "HENESSY VS 30",
    "SellingPrice": 348
  }, {
    "Item Name": "MORPHEUS 750",
    "SellingPrice": 2182
  }, {
    "Item Name": "MORPHEUS 180",
    "SellingPrice": 540
  }, {
    "Item Name": "MORPHEUS 60",
    "SellingPrice": 191
  }, {
    "Item Name": "MORPHEUS 30",
    "SellingPrice": 101
  }, {
    "Item Name": "MANSION HOUSE 180",
    "SellingPrice": 292
  }, {
    "Item Name": "MANSION HOUSE 90",
    "SellingPrice": 168
  }, {
    "Item Name": "MANSION HOUSE 60",
    "SellingPrice": 90
  }, {
    "Item Name": "MC BRANDY 60",
    "SellingPrice": 90
  }, {
    "Item Name": "RED BULL ",
    "SellingPrice": 157
  }, {
    "Item Name": "COKE",
    "SellingPrice": 45
  }, {
    "Item Name": "SPRITE",
    "SellingPrice": 45
  }, {
    "Item Name": "SODA",
    "SellingPrice": 33
  }, {
    "Item Name": "DIET COKE",
    "SellingPrice": 56
  }, {
    "Item Name": "TONIC WATER",
    "SellingPrice": 67
  }, {
    "Item Name": "GINGER ALE",
    "SellingPrice": 67
  }, {
    "Item Name": "LIME SODA",
    "SellingPrice": 45
  }, {
    "Item Name": "LIME WATER",
    "SellingPrice": 45
  }, {
    "Item Name": "PACKEGED WATER 1L",
    "SellingPrice": 39
  }, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
  }, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
  }, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
  }, {
    "Item Name": "Dhai",
    "SellingPrice": 20
  }, {
    "Item Name": "Rice",
    "SellingPrice": 55
  }, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
  }, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
  }, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
  }, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
  }, {
    "Item Name": "Dhai",
    "SellingPrice": 20
  }, {
    "Item Name": "Rice",
    "SellingPrice": 55
  }, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
  }]

  myFun();
  window.setInterval(showRows, 5000);
  showRows();

  function myFun() {
    addTable(tableValue);
  }

  function showRows() {
    // Any TRs that are not hidden and not already shown get "already-shown" applied
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    // Then your previous code
    $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five
  }

  function addTable(tableValue) {
    var $tbl = $("
", {
        "class": "table"
      }),

      $tb = $("
"),
      $trh = $("
");

    var split = Math.round(tableValue.length / 4);
    for (i = 0; i < split; i++) {
      $tr = $("
", {
        class: "hidden"
      }); //ading class
      for (j = 0; j < 4; j++) {
        $.each(tableValue[split * j + i], function(key, value) {

          $("", {
            "class": "text-left color" + (j + 1)
          }).html(value).appendTo($tr);
        });
      }
      $tr.appendTo($tb);
    }
    $tbl.append($tb);
    $("#DisplayTable").html($tbl);
  }
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>tbody>tr>td {
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 1.1rem;
  font-weight: bold;
  white-space: nowrap;
  width: 100%;
}

td:nth-child(1),
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
  width: 50px;
  /*change*/
  max-width: 50px;
  /*new add*/
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

/* added .already-shown to have the same properties as hidden */

.hidden,
.already-shown {
  display: none;
}</code>```

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

```

EDIT

I am trying to fix the column width of itemname while doing that the texts are over lapping

答:
you have added extra commas in td styles. see worked working

$(document).ready(function() {

  var tableValue = [{
      "Item Name": "MANCHOW  V SOUP",
      "SellingPrice": 100
    },
    {
      "Item Name": "MANCHOW NV SOUP ",
      "SellingPrice": 125
    },
    {
      "Item Name": "CEASER SALAD V",
      "SellingPrice": 175
    },
    {
      "Item Name": "CEASER SALAD NV",
      "SellingPrice": 230
    },
    {
      "Item Name": "GAMBUS REBOZADAS",
      "SellingPrice": 350
    },
    {
      "Item Name": "PANCO FISH FINGER",
      "SellingPrice": 270
    },
    {
      "Item Name": "MUSHROOM DUPLEX",
      "SellingPrice": 160
    },
    {
      "Item Name": "FRENCH FRIES",
      "SellingPrice": 99
    },
    {
      "Item Name": "HONEY GARLIC PRAWN",
      "SellingPrice": 350
    },
    {
      "Item Name": "CHICKEN MANCHURIAN",
      "SellingPrice": 180
    },
    {
      "Item Name": "MUSHROOM CHILLY",
      "SellingPrice": 120
    },
    {
      "Item Name": "SALT N PEPPER BABY CORN",
      "SellingPrice": 120
    },
    {
      "Item Name": "SOUTHERN STYLE CHICKEN",
      "SellingPrice": 210
    },
    {
      "Item Name": "PANEER NAGGETS",
      "SellingPrice": 210
    },
    {
      "Item Name": "HARA BHARA KEBAB",
      "SellingPrice": 160
    },
    {
      "Item Name": "CHICKEN TIKKA",
      "SellingPrice": 210
    },
    {
      "Item Name": "KALMI KEBAB",
      "SellingPrice": 250
    },
    {
      "Item Name": "PIZZA MARGARITTA",
      "SellingPrice": 200
    },
    {
      "Item Name": "PIZZA VEG FARMHOUSE",
      "SellingPrice": 200
    },
    {
      "Item Name": "BBQ CHICKEN PIZZA",
      "SellingPrice": 225
    },
    {
      "Item Name": "CHICKEN TIKKA PIZZA",
      "SellingPrice": 225
    },
    {
      "Item Name": "PESTO SAUCE",
      "SellingPrice": 175
    },
    {
      "Item Name": "ARABIATA",
      "SellingPrice": 160
    },
    {
      "Item Name": "PINK SAUCE",
      "SellingPrice": 160
    },
    {
      "Item Name": "GARBANZO BEAN SALAD",
      "SellingPrice": 90
    },
    {
      "Item Name": "MASALA PAPAD",
      "SellingPrice": 50
    },
    {
      "Item Name": "PEANUT MASALA",
      "SellingPrice": 60
    },
    {
      "Item Name": "GAJAR KA HALWA",
      "SellingPrice": 90
    },
    {
      "Item Name": "WATERMELON MARTINI",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Kiwi martini",
      "SellingPrice": 281.25
    },
    {
      "Item Name": " Apple gin",
      "SellingPrice": 225
    },
    {
      "Item Name": "Cucumber  cooler ",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Martini",
      "SellingPrice": 225
    },
    {
      "Item Name": "Pink lady",
      "SellingPrice": 225
    },
    {
      "Item Name": " Bloody marry",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Cosmopolitan",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Sex on the beach",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Bull frog",
      "SellingPrice": 506.25
    },
    {
      "Item Name": "Long  island iced tea ",
      "SellingPrice": 393.75
    },
    {
      "Item Name": "Pinacolada",
      "SellingPrice": 225
    },
    {
      "Item Name": "Daiquiri",
      "SellingPrice": 225
    },
    {
      "Item Name": "Mojito ",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Whisky sour",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Hot toddy",
      "SellingPrice": 225
    },
    {
      "Item Name": "Margarita",
      "SellingPrice": 337.5
    },
    {
      "Item Name": "Tequila sunrise",
      "SellingPrice": 337.5
    },
    {
      "Item Name": "Red sangria",
      "SellingPrice": 225
    },
    {
      "Item Name": "White sangria",
      "SellingPrice": 247.5
    },
    {
      "Item Name": "Rose sangria",
      "SellingPrice": 247.5
    },
    {
      "Item Name": "By chance special ",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Made in heaven",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Strawberry delight",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "DRAGON",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Mangochil ",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Cucumber cola",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Virgin mojito",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Virgin mary",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Virgin pinacolada",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "CORONA",
      "SellingPrice": 438.75
    },
    {
      "Item Name": "CRAFT BEERS",
      "SellingPrice": 337.5
    },
    {
      "Item Name": "BIRA WHITE 330",
      "SellingPrice": 157.5
    },
    {
      "Item Name": "BIRA BLONDE 330",
      "SellingPrice": 135
    },
    {
      "Item Name": "BIRA STRONG 650",
      "SellingPrice": 213.75
    },
    {
      "Item Name": "KINGFISHER PREMIUM 330",
      "SellingPrice": 123.75
    },
    {
      "Item Name": "KINGFISHER PREMIUM 650",
      "SellingPrice": 202.5
    },
    {
      "Item Name": "KINGFISHER PREMIUM 330",
      "SellingPrice": 123.75
    },
    {
      "Item Name": "KINGFISHER PREMIUM 650",
      "SellingPrice": 202.5
    },
    {
      "Item Name": "TESTING ITEM",
      "SellingPrice": 22
    }
  ]

  myFun();
  window.setInterval(showRows, 5000);
  showRows();

  function myFun() {
    addTable(tableValue);
  }

  function showRows() {
    // Any TRs that are not hidden and not already shown get "already-shown" applied
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    // Then your previous code
    $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five
  }

  function addTable(tableValue) {
    var $tbl = $("
", {
        "class": "table"
      }),

      $tb = $("
"),
      $trh = $("
");

    var split = Math.round(tableValue.length / 4);
    for (i = 0; i < split; i++) {
      $tr = $("
", {
        class: "hidden"
      }); //ading class
      for (j = 0; j < 4; j++) {
        $.each(tableValue[split * j + i], function(key, value) {

          $("", {
            "class": "text-left color" + (j + 1)
          }).html(value).appendTo($tr);
        });
      }
      $tr.appendTo($tb);
    }
    $tbl.append($tb);
    $("#DisplayTable").html($tbl);
  }
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>tbody>tr>td {
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 1.1rem;
  font-weight: bold;
  white-space: nowrap;
  width: 100%;
}

td:nth-child(1),
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
  width: 10px;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

/* added .already-shown to have the same properties as hidden */

.hidden,
.already-shown {
  display: none;
}</code>```

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

```

Body:
I have created an HTML table with JSON data which I am dividing into four columns to show up on display Screen, and at one go showing 5 rows then after 5 seconds next five row, This how my table is working

Now I have to show that Table on a display screen which has a resolution of 1336*768 soi am trying to give the full with so that it fitted to screen without any scroll

Due to Some reasons I want to give width to my columns also but that too is not taking the width, I don't know what I am doing wrong It is coming

Code

$(document).ready(function() {

  var tableValue = [{
    "Item Name": "MANCHOW  V SOUP",
    "SellingPrice": 100
  }, {
    "Item Name": "MANCHOW NV SOUP ",
    "SellingPrice": 125
  }, {
    "Item Name": "CEASER SALAD V",
    "SellingPrice": 175
  }, {
    "Item Name": "CEASER SALAD NV",
    "SellingPrice": 230
  }, {
    "Item Name": "GAMBUS REBOZADAS",
    "SellingPrice": 350
  }, {
    "Item Name": "PANCO FISH FINGER",
    "SellingPrice": 270
  }, {
    "Item Name": "MUSHROOM DUPLEX",
    "SellingPrice": 160
  }, {
    "Item Name": "FRENCH FRIES",
    "SellingPrice": 99
  }, {
    "Item Name": "HONEY GARLIC PRAWN",
    "SellingPrice": 350
  }, {
    "Item Name": "CHICKEN MANCHURIAN",
    "SellingPrice": 180
  }, {
    "Item Name": "MUSHROOM CHILLY",
    "SellingPrice": 120
  }, {
    "Item Name": "SALT N PEPPER BABY CORN",
    "SellingPrice": 120
  }, {
    "Item Name": "SOUTHERN STYLE CHICKEN",
    "SellingPrice": 210
  }, {
    "Item Name": "PANEER NAGGETS",
    "SellingPrice": 210
  }, {
    "Item Name": "HARA BHARA KEBAB",
    "SellingPrice": 160
  }, {
    "Item Name": "CHICKEN TIKKA",
    "SellingPrice": 210
  }, {
    "Item Name": "KALMI KEBAB",
    "SellingPrice": 250
  }, {
    "Item Name": "PIZZA MARGARITTA",
    "SellingPrice": 200
  }, {
    "Item Name": "PIZZA VEG FARMHOUSE",
    "SellingPrice": 200
  }, {
    "Item Name": "BBQ CHICKEN PIZZA",
    "SellingPrice": 225
  }, {
    "Item Name": "CHICKEN TIKKA PIZZA",
    "SellingPrice": 225
  }, {
    "Item Name": "PESTO SAUCE",
    "SellingPrice": 175
  }, {
    "Item Name": "ARABIATA",
    "SellingPrice": 160
  }, {
    "Item Name": "PINK SAUCE",
    "SellingPrice": 160
  }, {
    "Item Name": "GARBANZO BEAN SALAD",
    "SellingPrice": 90
  }, {
    "Item Name": "MASALA PAPAD",
    "SellingPrice": 50
  }, {
    "Item Name": "PEANUT MASALA",
    "SellingPrice": 60
  }, {
    "Item Name": "GAJAR KA HALWA",
    "SellingPrice": 90
  }, {
    "Item Name": "WATERMELON MARTINI",
    "SellingPrice": 281
  }, {
    "Item Name": "Kiwi martini",
    "SellingPrice": 281
  }, {
    "Item Name": " Apple gin",
    "SellingPrice": 225
  }, {
    "Item Name": "Cucumber  cooler ",
    "SellingPrice": 281
  }, {
    "Item Name": "Martini",
    "SellingPrice": 225
  }, {
    "Item Name": "Pink lady",
    "SellingPrice": 225
  }, {
    "Item Name": " Bloody marry",
    "SellingPrice": 281
  }, {
    "Item Name": "Cosmopolitan",
    "SellingPrice": 281
  }, {
    "Item Name": "Sex on the beach",
    "SellingPrice": 281
  }, {
    "Item Name": "Bull frog",
    "SellingPrice": 506
  }, {
    "Item Name": "Long  island iced tea ",
    "SellingPrice": 393
  }, {
    "Item Name": "Pinacolada",
    "SellingPrice": 225
  }, {
    "Item Name": "Daiquiri",
    "SellingPrice": 225
  }, {
    "Item Name": "Mojito ",
    "SellingPrice": 281
  }, {
    "Item Name": "Whisky sour",
    "SellingPrice": 281
  }, {
    "Item Name": "Hot toddy",
    "SellingPrice": 225
  }, {
    "Item Name": "Margarita",
    "SellingPrice": 337
  }, {
    "Item Name": "Tequila sunrise",
    "SellingPrice": 337
  }, {
    "Item Name": "Red sangria",
    "SellingPrice": 225
  }, {
    "Item Name": "White sangria",
    "SellingPrice": 247
  }, {
    "Item Name": "Rose sangria",
    "SellingPrice": 247
  }, {
    "Item Name": "By chance special ",
    "SellingPrice": 168
  }, {
    "Item Name": "Made in heaven",
    "SellingPrice": 168
  }, {
    "Item Name": "Strawberry delight",
    "SellingPrice": 168
  }, {
    "Item Name": "DRAGON",
    "SellingPrice": 168
  }, {
    "Item Name": "Mangochil ",
    "SellingPrice": 168
  }, {
    "Item Name": "Cucumber cola",
    "SellingPrice": 168
  }, {
    "Item Name": "Virgin mojito",
    "SellingPrice": 168
  }, {
    "Item Name": "Virgin mary",
    "SellingPrice": 168
  }, {
    "Item Name": "Virgin pinacolada",
    "SellingPrice": 168
  }, {
    "Item Name": "CORONA",
    "SellingPrice": 438
  }, {
    "Item Name": "CRAFT BEERS",
    "SellingPrice": 337
  }, {
    "Item Name": "BIRA WHITE 330",
    "SellingPrice": 157
  }, {
    "Item Name": "BIRA BLONDE 330",
    "SellingPrice": 135
  }, {
    "Item Name": "BIRA STRONG 650",
    "SellingPrice": 213
  }, {
    "Item Name": "KINGFISHER PREMIUM 330",
    "SellingPrice": 123
  }, {
    "Item Name": "KINGFISHER PREMIUM 650",
    "SellingPrice": 202
  }, {
    "Item Name": "KINGFISHER STRONG 330",
    "SellingPrice": 135
  }, {
    "Item Name": "KINGFISHER STRONG 650",
    "SellingPrice": 213
  }, {
    "Item Name": "KINGFISHER ULTRA 330",
    "SellingPrice": 146
  }, {
    "Item Name": "KINGFISHER ULTRA 650",
    "SellingPrice": 281
  }, {
    "Item Name": "KINGFISHER ULTRA MAX 330",
    "SellingPrice": 146
  }, {
    "Item Name": "KINGFISHER ULTRA MAX 650",
    "SellingPrice": 281
  }, {
    "Item Name": "BUDWIESER 330",
    "SellingPrice": 146
  }, {
    "Item Name": "BUDWIESER 650",
    "SellingPrice": 270
  }, {
    "Item Name": "BUDWIESER MAGNUM 330",
    "SellingPrice": 168
  }, {
    "Item Name": "BUDWIESER MAGNUM 650",
    "SellingPrice": 281
  }, {
    "Item Name": "TUBORG 330",
    "SellingPrice": 123
  }, {
    "Item Name": "TUBORG 650",
    "SellingPrice": 191
  }, {
    "Item Name": "TUBORG STRONG 330",
    "SellingPrice": 123
  }, {
    "Item Name": "TUBORG STRONG 650",
    "SellingPrice": 213
  }, {
    "Item Name": "CRANBERRY ",
    "SellingPrice": 157
  }, {
    "Item Name": "ORANGE",
    "SellingPrice": 157
  }, {
    "Item Name": "JAMICAN",
    "SellingPrice": 157
  }, {
    "Item Name": "BLACK BERRY",
    "SellingPrice": 157
  }, {
    "Item Name": "BLUE BERRY",
    "SellingPrice": 157
  }, {
    "Item Name": "MOET CHANDON",
    "SellingPrice": 7875
  }, {
    "Item Name": "SULA BRUT",
    "SellingPrice": 1687
  }, {
    "Item Name": "MATEUS ROSE",
    "SellingPrice": 2137
  }, {
    "Item Name": "HARDYS SIRAZ CABERNET 750",
    "SellingPrice": 1890
  }, {
    "Item Name": "HARDYS SIRAZ CABERNET BY GLASS",
    "SellingPrice": 382
  }, {
    "Item Name": "JACOB CREEK SIRAZ 750",
    "SellingPrice": 1800
  }, {
    "Item Name": "JACOB CREEK SIRAZ BY GLASS",
    "SellingPrice": 360
  }, {
    "Item Name": "BIG BANAYAN CHENNIN BLANC 750",
    "SellingPrice": 990
  }, {
    "Item Name": "BIG BANAYAN CHENNIN BLANC BY GLASS",
    "SellingPrice": 202
  }, {
    "Item Name": "SULA CHENIN BLANC 750 ",
    "SellingPrice": 1293
  }, {
    "Item Name": "SULA CHENIN BLANC BY GLASS",
    "SellingPrice": 258
  }, {
    "Item Name": "FOUR SEAZON CLASSIC CHENNIN BLANC 7",
    "SellingPrice": 1125
  }, {
    "Item Name": "FOUR SEAZON CLASSIC CHENNIN BLANC B",
    "SellingPrice": 225
  }, {
    "Item Name": "BIG BANAYAN CARBINET SAUVIGNON 750",
    "SellingPrice": 1125
  }, {
    "Item Name": "BIG BANAYAN CARBINET SAUVIGNON BY G",
    "SellingPrice": 225
  }, {
    "Item Name": "SULA SATORI MERLOT 750",
    "SellingPrice": 1237
  }, {
    "Item Name": "SULA SATORI MERLOT BY GLASS",
    "SellingPrice": 247
  }, {
    "Item Name": "GROVERS LA RESERVE 750",
    "SellingPrice": 1800
  }, {
    "Item Name": "GROVERS LA RESERVE 100",
    "SellingPrice": 360
  }, {
    "Item Name": "GLENFIDDICH 12 YEARS 700 ",
    "SellingPrice": 9225
  }, {
    "Item Name": "GLENFIDDICH 12 YEARS 30",
    "SellingPrice": 405
  }, {
    "Item Name": "TALISKER 750",
    "SellingPrice": 8775
  }, {
    "Item Name": "TALISKER 30",
    "SellingPrice": 360
  }, {
    "Item Name": "GLENNLIVET 750",
    "SellingPrice": 8887
  }, {
    "Item Name": "GLENNLIVET 30",
    "SellingPrice": 360
  }, {
    "Item Name": "THE SINGLETON 750",
    "SellingPrice": 7942
  }, {
    "Item Name": "THE SINGLETON 30",
    "SellingPrice": 326
  }, {
    "Item Name": "AMRUT FUSION 750",
    "SellingPrice": 5062
  }, {
    "Item Name": "AMRUT FUSION 30",
    "SellingPrice": 202
  }, {
    "Item Name": "JACK DANIELS 750",
    "SellingPrice": 7312
  }, {
    "Item Name": "JACK DANIELS 30",
    "SellingPrice": 292
  }, {
    "Item Name": "JIM BEAM WHITE 750",
    "SellingPrice": 4095
  }, {
    "Item Name": "JIM BEAM WHITE 30",
    "SellingPrice": 168
  }, {
    "Item Name": "JAMESON 750",
    "SellingPrice": 4950
  }, {
    "Item Name": "JAMESON 30",
    "SellingPrice": 202
  }, {
    "Item Name": "JW BLACK LABEL 750",
    "SellingPrice": 8212
  }, {
    "Item Name": "JW BLACK LABEL 200",
    "SellingPrice": 2925
  }, {
    "Item Name": "JW BLACK LABEL 30",
    "SellingPrice": 337
  }, {
    "Item Name": "JW RED LABEL 200",
    "SellingPrice": 1158
  }, {
    "Item Name": "BALLENTINSE FINEST BLENDED 750",
    "SellingPrice": 4545
  }, {
    "Item Name": "BALLENTINSE FINEST BLENDED 30",
    "SellingPrice": 180
  }, {
    "Item Name": "BLACK \u0026 WHITE 375",
    "SellingPrice": 1575
  }, {
    "Item Name": "BLACK \u0026 WHITE 180",
    "SellingPrice": 787
  }, {
    "Item Name": "BLACK \u0026 WHITE 60",
    "SellingPrice": 258
  }, {
    "Item Name": "BLACK \u0026 WHITE 30",
    "SellingPrice": 135
  }, {
    "Item Name": "100 PIPERS 180",
    "SellingPrice": 787
  }, {
    "Item Name": "100 PIPERS 60",
    "SellingPrice": 258
  }, {
    "Item Name": "100 PIPERS 30",
    "SellingPrice": 135
  }, {
    "Item Name": "VAT 69 180",
    "SellingPrice": 675
  }, {
    "Item Name": "VAT 69 60",
    "SellingPrice": 225
  }, {
    "Item Name": "VAT 69 30",
    "SellingPrice": 112
  }, {
    "Item Name": "TEACHERS HIGHLAND 180",
    "SellingPrice": 787
  }, {
    "Item Name": "TEACHERS HIGHLAND 60",
    "SellingPrice": 258
  }, {
    "Item Name": "TEACHERS HIGHLAND 30",
    "SellingPrice": 135
  }, {
    "Item Name": "TEACHERS 50 60",
    "SellingPrice": 393
  }, {
    "Item Name": "TEACHERS 50 30",
    "SellingPrice": 202
  }, {
    "Item Name": "BLACK DOG TRIPPLE GOLD 180",
    "SellingPrice": 1215
  }, {
    "Item Name": "BLACK DOG TRIPPLE GOLD 30",
    "SellingPrice": 213
  }, {
    "Item Name": "BLACK DOG 8 YEARS 180",
    "SellingPrice": 731
  }, {
    "Item Name": "BLACK DOG 8 YEARS 60",
    "SellingPrice": 247
  }, {
    "Item Name": "BLACK DOG 8 YEARS 30",
    "SellingPrice": 123
  }, {
    "Item Name": "BLENDERS PRIDE 750",
    "SellingPrice": 2283
  }, {
    "Item Name": "BLENDERS PRIDE 375",
    "SellingPrice": 1147
  }, {
    "Item Name": "BLENDERS PRIDE 180",
    "SellingPrice": 573
  }, {
    "Item Name": "BLENDERS PRIDE 60",
    "SellingPrice": 191
  }, {
    "Item Name": "BLENDERS PRIDE 30",
    "SellingPrice": 90
  }, {
    "Item Name": "SIGNATURE 180",
    "SellingPrice": 450
  }, {
    "Item Name": "SIGNATURE 60",
    "SellingPrice": 168
  }, {
    "Item Name": "SIGNATURE 30",
    "SellingPrice": 90
  }, {
    "Item Name": "GREY GOOSE 750",
    "SellingPrice": 8190
  }, {
    "Item Name": "GREY GOOSE 30",
    "SellingPrice": 326
  }, {
    "Item Name": "BELVEDERE 700",
    "SellingPrice": 8122
  }, {
    "Item Name": "BELVEDERE 30",
    "SellingPrice": 360
  }, {
    "Item Name": "CIROC 750",
    "SellingPrice": 7425
  }, {
    "Item Name": "CIROC 30",
    "SellingPrice": 303
  }, {
    "Item Name": "ABSOLUT 750",
    "SellingPrice": 4556
  }, {
    "Item Name": "ABSOLUT 30",
    "SellingPrice": 191
  }, {
    "Item Name": "SMIRNOFF RED 180",
    "SellingPrice": 551
  }, {
    "Item Name": "SMIRNOFF RED 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMIRNOFF RED30",
    "SellingPrice": 101
  }, {
    "Item Name": "SMIRNOFF ORANGE 180",
    "SellingPrice": 551
  }, {
    "Item Name": "SMIRNOFF ORANGE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMINOFF ORANGE30",
    "SellingPrice": 101
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE 180",
    "SellingPrice": 551
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE30",
    "SellingPrice": 101
  }, {
    "Item Name": "BOMBAY SAPHIRE 750",
    "SellingPrice": 4725
  }, {
    "Item Name": "BOMBAY SAPHIRE 30",
    "SellingPrice": 191
  }, {
    "Item Name": "BLUE RIBBAND 750",
    "SellingPrice": 877
  }, {
    "Item Name": "BLUE RIBBAND 60",
    "SellingPrice": 78
  }, {
    "Item Name": "BACCARDI WHITE 750",
    "SellingPrice": 2418
  }, {
    "Item Name": "BACCARDI WHITE 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI WHITE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "BACCARDI WHITE 30",
    "SellingPrice": 101
  }, {
    "Item Name": "BACCARDI LEMON 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI LEMON 60",
    "SellingPrice": 202
  }, {
    "Item Name": "BACCARDI LEMON 30",
    "SellingPrice": 101
  }, {
    "Item Name": "BACCARDI ORANGE 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI ORANGE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "BACCARDI LEMON 30",
    "SellingPrice": 101
  }, {
    "Item Name": "BACCARDI BLACK 180",
    "SellingPrice": 393
  }, {
    "Item Name": "BACCARDI BLACK 30",
    "SellingPrice": 67
  }, {
    "Item Name": "BACCARDI GOLD 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI GOLD30",
    "SellingPrice": 101
  }, {
    "Item Name": "OLD MONK 180",
    "SellingPrice": 225
  }, {
    "Item Name": "OLD MONK 90",
    "SellingPrice": 168
  }, {
    "Item Name": "OLD MONK 60",
    "SellingPrice": 90
  }, {
    "Item Name": "OLD MONK 30 ",
    "SellingPrice": 45
  }, {
    "Item Name": "DON ANGEL 750",
    "SellingPrice": 4668
  }, {
    "Item Name": "DON ANGEL 30",
    "SellingPrice": 191
  }, {
    "Item Name": "SAUZA SILVER 700",
    "SellingPrice": 6153
  }, {
    "Item Name": "SAUZA SILVER 30",
    "SellingPrice": 270
  }, {
    "Item Name": "JAGERBOMB",
    "SellingPrice": 506
  }, {
    "Item Name": "KAMAKAZI",
    "SellingPrice": 168
  }, {
    "Item Name": "JAGERMASTER",
    "SellingPrice": 303
  }, {
    "Item Name": "COINTTRAEU",
    "SellingPrice": 303
  }, {
    "Item Name": "SAMBUCA",
    "SellingPrice": 258
  }, {
    "Item Name": "KHALUA",
    "SellingPrice": 168
  }, {
    "Item Name": "MARTINI BLANCO",
    "SellingPrice": 90
  }, {
    "Item Name": "MARTINI ROSSO",
    "SellingPrice": 90
  }, {
    "Item Name": "HENESSY VS 700",
    "SellingPrice": 7875
  }, {
    "Item Name": "HENESSY VS 30",
    "SellingPrice": 348
  }, {
    "Item Name": "MORPHEUS 750",
    "SellingPrice": 2182
  }, {
    "Item Name": "MORPHEUS 180",
    "SellingPrice": 540
  }, {
    "Item Name": "MORPHEUS 60",
    "SellingPrice": 191
  }, {
    "Item Name": "MORPHEUS 30",
    "SellingPrice": 101
  }, {
    "Item Name": "MANSION HOUSE 180",
    "SellingPrice": 292
  }, {
    "Item Name": "MANSION HOUSE 90",
    "SellingPrice": 168
  }, {
    "Item Name": "MANSION HOUSE 60",
    "SellingPrice": 90
  }, {
    "Item Name": "MC BRANDY 60",
    "SellingPrice": 90
  }, {
    "Item Name": "RED BULL ",
    "SellingPrice": 157
  }, {
    "Item Name": "COKE",
    "SellingPrice": 45
  }, {
    "Item Name": "SPRITE",
    "SellingPrice": 45
  }, {
    "Item Name": "SODA",
    "SellingPrice": 33
  }, {
    "Item Name": "DIET COKE",
    "SellingPrice": 56
  }, {
    "Item Name": "TONIC WATER",
    "SellingPrice": 67
  }, {
    "Item Name": "GINGER ALE",
    "SellingPrice": 67
  }, {
    "Item Name": "LIME SODA",
    "SellingPrice": 45
  }, {
    "Item Name": "LIME WATER",
    "SellingPrice": 45
  }, {
    "Item Name": "PACKEGED WATER 1L",
    "SellingPrice": 39
  }, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
  }, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
  }, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
  }, {
    "Item Name": "Dhai",
    "SellingPrice": 20
  }, {
    "Item Name": "Rice",
    "SellingPrice": 55
  }, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
  }, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
  }, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
  }, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
  }, {
    "Item Name": "Dhai",
    "SellingPrice": 20
  }, {
    "Item Name": "Rice",
    "SellingPrice": 55
  }, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
  }]

  myFun();
  window.setInterval(showRows, 5000);
  showRows();

  function myFun() {
    addTable(tableValue);
  }

  function showRows() {
    // Any TRs that are not hidden and not already shown get "already-shown" applied
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    // Then your previous code
    $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five
  }

  function addTable(tableValue) {
    var $tbl = $("
", {
        "class": "table"
      }),

      $tb = $("
"),
      $trh = $("
");

    var split = Math.round(tableValue.length / 4);
    for (i = 0; i < split; i++) {
      $tr = $("
", {
        class: "hidden"
      }); //ading class
      for (j = 0; j < 4; j++) {
        $.each(tableValue[split * j + i], function(key, value) {

          $("", {
            "class": "text-left color" + (j + 1)
          }).html(value).appendTo($tr);
        });
      }
      $tr.appendTo($tb);
    }
    $tbl.append($tb);
    $("#DisplayTable").html($tbl);
  }
});

tbody>tr>td {
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 1.1rem;
  font-weight: bold;
  white-space: nowrap;
  width: 100%;
}

td:nth-child(1),
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
  width: 50px;
  /*change*/
  max-width: 50px;
  /*new add*/
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

/* added .already-shown to have the same properties as hidden */

.hidden,
.already-shown {
  display: none;
}

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

EDIT

I am trying to fix the column width of itemname while doing that the texts are over lapping

Body:
you have added extra commas in td styles. see worked working

$(document).ready(function() {

  var tableValue = [{
      "Item Name": "MANCHOW  V SOUP",
      "SellingPrice": 100
    },
    {
      "Item Name": "MANCHOW NV SOUP ",
      "SellingPrice": 125
    },
    {
      "Item Name": "CEASER SALAD V",
      "SellingPrice": 175
    },
    {
      "Item Name": "CEASER SALAD NV",
      "SellingPrice": 230
    },
    {
      "Item Name": "GAMBUS REBOZADAS",
      "SellingPrice": 350
    },
    {
      "Item Name": "PANCO FISH FINGER",
      "SellingPrice": 270
    },
    {
      "Item Name": "MUSHROOM DUPLEX",
      "SellingPrice": 160
    },
    {
      "Item Name": "FRENCH FRIES",
      "SellingPrice": 99
    },
    {
      "Item Name": "HONEY GARLIC PRAWN",
      "SellingPrice": 350
    },
    {
      "Item Name": "CHICKEN MANCHURIAN",
      "SellingPrice": 180
    },
    {
      "Item Name": "MUSHROOM CHILLY",
      "SellingPrice": 120
    },
    {
      "Item Name": "SALT N PEPPER BABY CORN",
      "SellingPrice": 120
    },
    {
      "Item Name": "SOUTHERN STYLE CHICKEN",
      "SellingPrice": 210
    },
    {
      "Item Name": "PANEER NAGGETS",
      "SellingPrice": 210
    },
    {
      "Item Name": "HARA BHARA KEBAB",
      "SellingPrice": 160
    },
    {
      "Item Name": "CHICKEN TIKKA",
      "SellingPrice": 210
    },
    {
      "Item Name": "KALMI KEBAB",
      "SellingPrice": 250
    },
    {
      "Item Name": "PIZZA MARGARITTA",
      "SellingPrice": 200
    },
    {
      "Item Name": "PIZZA VEG FARMHOUSE",
      "SellingPrice": 200
    },
    {
      "Item Name": "BBQ CHICKEN PIZZA",
      "SellingPrice": 225
    },
    {
      "Item Name": "CHICKEN TIKKA PIZZA",
      "SellingPrice": 225
    },
    {
      "Item Name": "PESTO SAUCE",
      "SellingPrice": 175
    },
    {
      "Item Name": "ARABIATA",
      "SellingPrice": 160
    },
    {
      "Item Name": "PINK SAUCE",
      "SellingPrice": 160
    },
    {
      "Item Name": "GARBANZO BEAN SALAD",
      "SellingPrice": 90
    },
    {
      "Item Name": "MASALA PAPAD",
      "SellingPrice": 50
    },
    {
      "Item Name": "PEANUT MASALA",
      "SellingPrice": 60
    },
    {
      "Item Name": "GAJAR KA HALWA",
      "SellingPrice": 90
    },
    {
      "Item Name": "WATERMELON MARTINI",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Kiwi martini",
      "SellingPrice": 281.25
    },
    {
      "Item Name": " Apple gin",
      "SellingPrice": 225
    },
    {
      "Item Name": "Cucumber  cooler ",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Martini",
      "SellingPrice": 225
    },
    {
      "Item Name": "Pink lady",
      "SellingPrice": 225
    },
    {
      "Item Name": " Bloody marry",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Cosmopolitan",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Sex on the beach",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Bull frog",
      "SellingPrice": 506.25
    },
    {
      "Item Name": "Long  island iced tea ",
      "SellingPrice": 393.75
    },
    {
      "Item Name": "Pinacolada",
      "SellingPrice": 225
    },
    {
      "Item Name": "Daiquiri",
      "SellingPrice": 225
    },
    {
      "Item Name": "Mojito ",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Whisky sour",
      "SellingPrice": 281.25
    },
    {
      "Item Name": "Hot toddy",
      "SellingPrice": 225
    },
    {
      "Item Name": "Margarita",
      "SellingPrice": 337.5
    },
    {
      "Item Name": "Tequila sunrise",
      "SellingPrice": 337.5
    },
    {
      "Item Name": "Red sangria",
      "SellingPrice": 225
    },
    {
      "Item Name": "White sangria",
      "SellingPrice": 247.5
    },
    {
      "Item Name": "Rose sangria",
      "SellingPrice": 247.5
    },
    {
      "Item Name": "By chance special ",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Made in heaven",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Strawberry delight",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "DRAGON",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Mangochil ",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Cucumber cola",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Virgin mojito",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Virgin mary",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "Virgin pinacolada",
      "SellingPrice": 168.75
    },
    {
      "Item Name": "CORONA",
      "SellingPrice": 438.75
    },
    {
      "Item Name": "CRAFT BEERS",
      "SellingPrice": 337.5
    },
    {
      "Item Name": "BIRA WHITE 330",
      "SellingPrice": 157.5
    },
    {
      "Item Name": "BIRA BLONDE 330",
      "SellingPrice": 135
    },
    {
      "Item Name": "BIRA STRONG 650",
      "SellingPrice": 213.75
    },
    {
      "Item Name": "KINGFISHER PREMIUM 330",
      "SellingPrice": 123.75
    },
    {
      "Item Name": "KINGFISHER PREMIUM 650",
      "SellingPrice": 202.5
    },
    {
      "Item Name": "KINGFISHER PREMIUM 330",
      "SellingPrice": 123.75
    },
    {
      "Item Name": "KINGFISHER PREMIUM 650",
      "SellingPrice": 202.5
    },
    {
      "Item Name": "TESTING ITEM",
      "SellingPrice": 22
    }
  ]

  myFun();
  window.setInterval(showRows, 5000);
  showRows();

  function myFun() {
    addTable(tableValue);
  }

  function showRows() {
    // Any TRs that are not hidden and not already shown get "already-shown" applied
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    // Then your previous code
    $(".hidden:lt(5)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five
  }

  function addTable(tableValue) {
    var $tbl = $("<table />", {
        "class": "table"
      }),

      $tb = $("<tbody/>"),
      $trh = $("<tr/>");

    var split = Math.round(tableValue.length / 4);
    for (i = 0; i < split; i++) {
      $tr = $("<tr/>", {
        class: "hidden"
      }); //ading class
      for (j = 0; j < 4; j++) {
        $.each(tableValue[split * j + i], function(key, value) {

          $("<td/>", {
            "class": "text-left color" + (j + 1)
          }).html(value).appendTo($tr);
        });
      }
      $tr.appendTo($tb);
    }
    $tbl.append($tb);
    $("#DisplayTable").html($tbl);
  }
});

tbody>tr>td {
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 1.1rem;
  font-weight: bold;
  white-space: nowrap;
  width: 100%;
}

td:nth-child(1),
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
  width: 10px;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

/* added .already-shown to have the same properties as hidden */

.hidden,
.already-shown {
  display: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<table class="table" id="DisplayTable">
</table>


来源: stackexchange

问:
How to calculate two averages of the same class, and get two outputs?
i am stuck in a little situation. I am making a plugin for my school grades to calculate the average.(The avarage might look rong but that's how our'e greades work.)The school site that show the grades is using the same class names. Until now i know how to calculate the average of 1 part.

But is there a way to call  2 classes in a querySelectorAll. like this: [0], [1]?

```<code><script
            var matches = document.querySelectorAll(".course_eval_cell");
            console.log(matches);

            let up = 0;
            let down = 0;

            matches.forEach(function(fraction) {
                var divided = fraction.innerHTML.split("/");
                console.log(divided);
                up += parseInt(divided[0]);
                down += parseInt(divided[1]);
                console.log(up);
                console.log(down);
            });

            var result =   (up / down ) * 100
            console.log(result);
            var result_fixed = result.toFixed(1) + "%";
            console.log(result_fixed);
            document.write('<p id="jstext">' + result_fixed + '</p>');

</script>

<div class="course_eval_row cf" style="width:770px;">
    <div class="course_eval_cell hasGrade" smsctip="true">10/10</div>
    <div class="course_eval_cell hasGrade  ">88/100</div>
</div>

<div class="course_eval_row cf" style="width:770px;">
    <div class="course_eval_cell hasGrade" smsctip="true">4/10</div>
    <div class="course_eval_cell hasGrade  ">34/50</div>
</div>

</code>```

I expect 2 different results, the average of the first grades and the average of the second grades. Thanks for your time.

答:
I think something more like this is whats needed:

const calculateAverage = (elem) => {
  const arrGrade = Array.from(elem.querySelectorAll('.hasGrade')).map(({innerText: txt})=> {
    const score = txt.split('/')[0];
    const max = txt.split('/')[1];
    return score/max;
  });
  return arrGrade.reduce((a,v) => a+=v)/arrGrade.length;
};

var matches = document.querySelectorAll(".course_eval_row");

matches.forEach(m => {
  const div = document.createElement('div');
  div.innerHTML = `Average - ${calculateAverage(m)}`;
  m.appendChild(div);
});
         ```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.course_eval_row {
  border: 1px solid red;
  margin-top: 10px;
}</code>```

10/10

88/100

4/10

34/50

             ```

ContentLicense: CC BY-SA 4.0

Body:
i am stuck in a little situation. I am making a plugin for my school grades to calculate the average.(The avarage might look rong but that's how our'e greades work.)The school site that show the grades is using the same class names. Until now i know how to calculate the average of 1 part.

But is there a way to call  2 classes in a querySelectorAll. like this: [0], [1]?

10/10

88/100

4/10

34/50

I expect 2 different results, the average of the first grades and the average of the second grades. Thanks for your time.

Body:
I think something more like this is whats needed:

const calculateAverage = (elem) => {
  const arrGrade = Array.from(elem.querySelectorAll('.hasGrade')).map(({innerText: txt})=> {
    const score = txt.split('/')[0];
    const max = txt.split('/')[1];
    return score/max;
  });
  return arrGrade.reduce((a,v) => a+=v)/arrGrade.length;
};

var matches = document.querySelectorAll(".course_eval_row");

matches.forEach(m => {
  const div = document.createElement('div');
  div.innerHTML = `Average - ${calculateAverage(m)}`;
  m.appendChild(div);
});

.course_eval_row {
  border: 1px solid red;
  margin-top: 10px;
}

<div class="course_eval_row cf" style="width:770px;">
    <div class="course_eval_cell hasGrade" smsctip="true">10/10</div>
    <div class="course_eval_cell hasGrade  ">88/100</div>
</div>

<div class="course_eval_row cf" style="width:770px;">
    <div class="course_eval_cell hasGrade" smsctip="true">4/10</div>
    <div class="course_eval_cell hasGrade  ">34/50</div>
</div>


问:
QLabel act strange on QMainWindow
I want to create a gui, with a Qlabel where to display an image, after this I want to make a selection (rectangle) on image and save the selection as another image in my computer. But I have a problem:

First, when I create the gui (withou QtDesigner) everything works fine, but when I create the gui on QtDesigner, and I want to display my new image and KpeWindow class on my box label  but it is displayed in top left corner, why?

gui.ui:

```<code><?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>GUI</class>
 <widget class="QMainWindow" name="GUI">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>770</width>
    <height>527</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>GUI</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <widget class="QPushButton" name="clear_btn">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>220</y>
      <width>71</width>
      <height>32</height>
     </rect>
    </property>
    <property name="text">
     <string>clear</string>
    </property>
   </widget>
   <widget class="QPushButton" name="save_btn">
    <property name="geometry">
     <rect>
      <x>70</x>
      <y>220</y>
      <width>69</width>
      <height>32</height>
     </rect>
    </property>
    <property name="text">
     <string>save</string>
    </property>
   </widget>
   <widget class="QPushButton" name="load_btn">
    <property name="geometry">
     <rect>
      <x>130</x>
      <y>220</y>
      <width>67</width>
      <height>32</height>
     </rect>
    </property>
    <property name="text">
     <string>load</string>
    </property>
   </widget>
   <widget class="QLabel" name="grafic">
    <property name="geometry">
     <rect>
      <x>218</x>
      <y>12</y>
      <width>531</width>
      <height>411</height>
     </rect>
    </property>
    <property name="frameShape">
     <enum>QFrame::Box</enum>
    </property>
    <property name="text">
     <string/>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>770</width>
     <height>22</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>
</code>```

First part of the code:

```<code>import sys
from PyQt5 import QtCore, QtWidgets
from PyQt5.QtCore import Qt, QRect
from PyQt5.QtGui import QPixmap
from PyQt5.QtWidgets import QApplication
from PyQt5.uic import loadUi

class KpeWindow(QtWidgets.QLabel):
    def __init__(self, parent=None):
        QtWidgets.QLabel.__init__(self,parent)
        self.selection = QtWidgets.QRubberBand(QtWidgets.QRubberBand.Rectangle, self)

    def mousePressEvent(self, event):
        if event.button() == QtCore.Qt.LeftButton:
            position = QtCore.QPoint(event.pos())
            if self.selection.isVisible():
                # visible selection
                print(self.upper_left.manhattanLength())
                if (self.upper_left - position).manhattanLength() < 20:
                    # close to upper left corner, drag it
                    self.mode = "drag_upper_left"
                elif (self.lower_right - position).manhattanLength() < 20:
                    # close to lower right corner, drag it
                    self.mode = "drag_lower_right"
                else:
                    # clicked somewhere else, hide selection
                    self.selection.hide()
            else:
                # no visible selection, start new selection
                self.upper_left = position
                self.lower_right = position
                self.mode = "drag_lower_right"
                self.selection.show()

    def mouseMoveEvent(self, event):
        '''
            Mouse moved. If selection is visible, drag it according to drag mode.
        '''

        if self.selection.isVisible():
            # visible selection
            if self.mode is "drag_lower_right":
                self.lower_right = QtCore.QPoint(event.pos())
                # print(str(self.lower_right))
            elif self.mode is "drag_upper_left":
                self.upper_left = QtCore.QPoint(event.pos())
                # print(str(self.upper_left))
            # update geometry
            self.selection.setGeometry(QtCore.QRect(self.upper_left, self.lower_right).normalized())
</code>```

MainWindow without QtDesigner

```<code>class MainWindow(QtWidgets.QWidget):
        def __init__(self):
            super(MainWindow, self).__init__()
            QtWidgets.QMainWindow.__init__(self)
            layout = QtWidgets.QVBoxLayout(self)
            label = KpeWindow(self)
            pixmap = QPixmap("image.JPG")
            label.setPixmap(pixmap)
            layout.addWidget(label)
            label.setFocusPolicy(Qt.StrongFocus)
            self.setFocusProxy(label)
            label.setFocus(True)
            self.setLayout(layout)
            self.setFixedSize(640, 480)
            self.show()

    if __name__ == '__main__':
        app = QApplication(sys.argv)
        mainWin = MainWindow()
        mainWin.show()
        sys.exit(app.exec_())
</code>```

MainWindow with QtDesigner:

class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        loadUi('GUI/gui.ui', self)
        #self.grafic <-- this is the box label
        self.grafic = KpeWindow(self)
        pixmap = QPixmap("image.JPG")
        self.grafic.setPixmap(pixmap)
        self.grafic.setFocusPolicy(Qt.StrongFocus)
        self.setFocusProxy(self.grafic)
        self.grafic.setFocus(True)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainWin = MainWindow()
    mainWin.show()
    sys.exit(app.exec_())
```

答:
The cause of the error is that you are assuming that if you create a widget with the same name of the QLabel it will replace it, but that is false, you are creating another QLabel whose parent is the window so it will be located in the topLeft.

So there are 2 solutions:

Promote the KpeWindow to be the grafic, there is an example in this answer.

Set the KpeWindow in the QLabel through a layout.

from PyQt5 import QtCore, QtGui, QtWidgets, uic

class KpeWindow(QtWidgets.QLabel):
    # ...

class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        uic.loadUi('GUI/gui.ui', self)
        kpe_window = KpeWindow()
        pixmap = QtGui.QPixmap("image.JPG")
        kpe_window.setPixmap(pixmap)
        kpe_window.setFocusPolicy(QtCore.Qt.StrongFocus)
        self.setFocusProxy(kpe_window)
        kpe_window.setFocus(True)
        lay = QtWidgets.QVBoxLayout(self.grafic)
        lay.addWidget(kpe_window)

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    mainWin = MainWindow()
    mainWin.show()
    sys.exit(app.exec_())
```

The second solution is the simplest.

Title: QLabel act strange on QMainWindow

Body:
I want to create a gui, with a Qlabel where to display an image, after this I want to make a selection (rectangle) on image and save the selection as another image in my computer. But I have a problem:

First, when I create the gui (withou QtDesigner) everything works fine, but when I create the gui on QtDesigner, and I want to display my new image and KpeWindow class on my box label  but it is displayed in top left corner, why?

gui.ui:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>GUI</class>
 <widget class="QMainWindow" name="GUI">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>770</width>
    <height>527</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>GUI</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <widget class="QPushButton" name="clear_btn">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>220</y>
      <width>71</width>
      <height>32</height>
     </rect>
    </property>
    <property name="text">
     <string>clear</string>
    </property>
   </widget>
   <widget class="QPushButton" name="save_btn">
    <property name="geometry">
     <rect>
      <x>70</x>
      <y>220</y>
      <width>69</width>
      <height>32</height>
     </rect>
    </property>
    <property name="text">
     <string>save</string>
    </property>
   </widget>
   <widget class="QPushButton" name="load_btn">
    <property name="geometry">
     <rect>
      <x>130</x>
      <y>220</y>
      <width>67</width>
      <height>32</height>
     </rect>
    </property>
    <property name="text">
     <string>load</string>
    </property>
   </widget>
   <widget class="QLabel" name="grafic">
    <property name="geometry">
     <rect>
      <x>218</x>
      <y>12</y>
      <width>531</width>
      <height>411</height>
     </rect>
    </property>
    <property name="frameShape">
     <enum>QFrame::Box</enum>
    </property>
    <property name="text">
     <string/>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>770</width>
     <height>22</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

First part of the code:

import sys
from PyQt5 import QtCore, QtWidgets
from PyQt5.QtCore import Qt, QRect
from PyQt5.QtGui import QPixmap
from PyQt5.QtWidgets import QApplication
from PyQt5.uic import loadUi

class KpeWindow(QtWidgets.QLabel):
    def __init__(self, parent=None):
        QtWidgets.QLabel.__init__(self,parent)
        self.selection = QtWidgets.QRubberBand(QtWidgets.QRubberBand.Rectangle, self)

    def mousePressEvent(self, event):
        if event.button() == QtCore.Qt.LeftButton:
            position = QtCore.QPoint(event.pos())
            if self.selection.isVisible():
                # visible selection
                print(self.upper_left.manhattanLength())
                if (self.upper_left - position).manhattanLength() < 20:
                    # close to upper left corner, drag it
                    self.mode = "drag_upper_left"
                elif (self.lower_right - position).manhattanLength() < 20:
                    # close to lower right corner, drag it
                    self.mode = "drag_lower_right"
                else:
                    # clicked somewhere else, hide selection
                    self.selection.hide()
            else:
                # no visible selection, start new selection
                self.upper_left = position
                self.lower_right = position
                self.mode = "drag_lower_right"
                self.selection.show()

    def mouseMoveEvent(self, event):
        '''
            Mouse moved. If selection is visible, drag it according to drag mode.
        '''

        if self.selection.isVisible():
            # visible selection
            if self.mode is "drag_lower_right":
                self.lower_right = QtCore.QPoint(event.pos())
                # print(str(self.lower_right))
            elif self.mode is "drag_upper_left":
                self.upper_left = QtCore.QPoint(event.pos())
                # print(str(self.upper_left))
            # update geometry
            self.selection.setGeometry(QtCore.QRect(self.upper_left, self.lower_right).normalized())

MainWindow without QtDesigner

class MainWindow(QtWidgets.QWidget):
        def __init__(self):
            super(MainWindow, self).__init__()
            QtWidgets.QMainWindow.__init__(self)
            layout = QtWidgets.QVBoxLayout(self)
            label = KpeWindow(self)
            pixmap = QPixmap("image.JPG")
            label.setPixmap(pixmap)
            layout.addWidget(label)
            label.setFocusPolicy(Qt.StrongFocus)
            self.setFocusProxy(label)
            label.setFocus(True)
            self.setLayout(layout)
            self.setFixedSize(640, 480)
            self.show()

    if __name__ == '__main__':
        app = QApplication(sys.argv)
        mainWin = MainWindow()
        mainWin.show()
        sys.exit(app.exec_())

MainWindow with QtDesigner:

class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        loadUi('GUI/gui.ui', self)
        #self.grafic <-- this is the box label
        self.grafic = KpeWindow(self)
        pixmap = QPixmap("image.JPG")
        self.grafic.setPixmap(pixmap)
        self.grafic.setFocusPolicy(Qt.StrongFocus)
        self.setFocusProxy(self.grafic)
        self.grafic.setFocus(True)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainWin = MainWindow()
    mainWin.show()
    sys.exit(app.exec_())

Body:
The cause of the error is that you are assuming that if you create a widget with the same name of the QLabel it will replace it, but that is false, you are creating another QLabel whose parent is the window so it will be located in the topLeft.

So there are 2 solutions:

Promote the KpeWindow to be the grafic, there is an example in this answer.

Set the KpeWindow in the QLabel through a layout.

from PyQt5 import QtCore, QtGui, QtWidgets, uic

class KpeWindow(QtWidgets.QLabel):
    # ...

class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        uic.loadUi('GUI/gui.ui', self)
        kpe_window = KpeWindow()
        pixmap = QtGui.QPixmap("image.JPG")
        kpe_window.setPixmap(pixmap)
        kpe_window.setFocusPolicy(QtCore.Qt.StrongFocus)
        self.setFocusProxy(kpe_window)
        kpe_window.setFocus(True)
        lay = QtWidgets.QVBoxLayout(self.grafic)
        lay.addWidget(kpe_window)

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    mainWin = MainWindow()
    mainWin.show()
    sys.exit(app.exec_())

The second solution is the simplest.


问:
Why is the error 'Cannot read property 'car' of undefined [ ]' returned even though I have a fallback for null lists?
I am trying to build a procedure to compare two lists (that are elements of a larger list) and return how similar they are.  The procedure will do this by summing the difference between the elements in the same index in both lists.  This is done recursively by comparing the car of both lists, calling on itself again with the running result being the comparison and the new lists being the cdr of both lists, and finally returning the result when both lists are empty.  However, when I test this, the following error is returned even though I have an  if statement to return the result when the lists are null:

Cannot read property 'car' of undefined [ ]

I'm fairly certain that my let syntax is correct, as that was fixed in a prior question, and the only other time car is used in the other procedure used doesn't have any errors when run by itself.  What is happening and how can it be fixed?

Code:

(define (get-list name arr)
  (if (eq? name (car (car arr)))
      (cdr (car arr))
      (get-list name (cdr arr))))
(define (similarity-arrays name1 name2 arrs result)
  (let ((arr1 (get-list name1 arrs))
        (arr2 (get-list name2 arrs)))
    (if (= (length arr1)(length arr2))
        (let ((x1 (car arr1))
              (x2 (car arr2)))
          (if (null? arr1))
              result
              (similarity-arrays
               (cdr arr1)
               (cdr arr2)
               (+ result (- x1 x2)))))
        #f))
(define dust
  (list (list 'akko 11 3 7 5 4 1 9 8 10 6 2)
        (list 'Jodast 10 7 4 6 5 1 11 9 8 3 2)

(similarity-arrays 'Jodast 'Akko dust 0)
```

答:
There are several issues with your code. For instance:

The (if (null? arr1)) expression is an if with no consequent or alternative, because the rightmost ) must not be closed there, only after the consequent and alternative.

The recursive call to similarity-arrays is incorrect, you're passing the wrong type of parameters and the number of parameters is also incorrect.

Related to the previous one: both in get-list and similarity-arrays sometimes you assume that the parameters are elements and other times that they're lists

There are other parts with unbalanced brackets, for example, in the definition of dust. Use a good IDE and properly indent the code to show you where the parentheses are missing

We should try to avoid using length, the way to find out if we've reached the end of a list if by asking it it's null?.

For this problem you should use equal? for testing equality, not eq?.

Passing a list of two lists makes iteration harder, have you considered passing two lists instead?


问:
Error: <memory> no such file or directory on Android with JNI
I am trying to compile Crypto++ library on Android using JNI. I have cloned the project of https://github.com/morgwai/ndktutorial. I imported the project into android studio, I am able to call the JNI class and read the Crypto++, but when the library gets called I get an inside error which says "memory" no such file or directory pointing to #include <memory>.

Here is my build.gradle:

apply plugin: 'com.android.model.application'
model {
    android {
        compileSdkVersion 23
        buildToolsVersion "23.0.3"

        defaultConfig {
            applicationId "com.moham.myapplication"
            minSdkVersion.apiLevel 22
            targetSdkVersion.apiLevel 23
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles.add(file('proguard-android.txt'))
            }

        }
        ndk {
            moduleName "crypt_user.cpp"
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.2.1'
}
```

<p>Also here is the error I get when I compile:</p>

<pre class="lang-none prettyprint-override"><code>MYPATH\Android\sdk\ndk-bundle\platforms\android-23\arch-arm64\usr\include\stdcpp.h
Error:(10, 18) memory: No such file or directory
compilation terminated.
Error:Execution failed for task ':app:compileCrypt_userArm64-v8aDebugSharedLibra
ryCrypt_userMainCpp'.
> A build operation failed.
      C++ compiler failed while compiling crypt_user.cpp.
  See the complete log at: file:///D:/MyApplication/app/build/tmp/compileCrypt_u
serArm64-v8aDebugSharedLibraryCrypt_userMainCpp/output.txt
</code>```

Thank you in advance.

答:
Add

```<code>APP_STL = c++_shared
</code>```

to your Application.mk

ContentLicense: CC BY-SA 3.0

Body:
I am trying to compile Crypto++ library on Android using JNI. I have cloned the project of https://github.com/morgwai/ndktutorial. I imported the project into android studio, I am able to call the JNI class and read the Crypto++, but when the library gets called I get an inside error which says "memory" no such file or directory pointing to #include <memory>.

Here is my build.gradle:

apply plugin: 'com.android.model.application'
model {
    android {
        compileSdkVersion 23
        buildToolsVersion "23.0.3"

        defaultConfig {
            applicationId "com.moham.myapplication"
            minSdkVersion.apiLevel 22
            targetSdkVersion.apiLevel 23
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles.add(file('proguard-android.txt'))
            }

        }
        ndk {
            moduleName "crypt_user.cpp"
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.2.1'
}

Also here is the error I get when I compile:

MYPATH\Android\sdk\ndk-bundle\platforms\android-23\arch-arm64\usr\include\stdcpp.h
Error:(10, 18) memory: No such file or directory
compilation terminated.
Error:Execution failed for task ':app:compileCrypt_userArm64-v8aDebugSharedLibra
ryCrypt_userMainCpp'.
> A build operation failed.
      C++ compiler failed while compiling crypt_user.cpp.
  See the complete log at: file:///D:/MyApplication/app/build/tmp/compileCrypt_u
serArm64-v8aDebugSharedLibraryCrypt_userMainCpp/output.txt

Thank you in advance.

Body:
Add

APP_STL = c++_shared

to your Application.mk


问:
Binary operator '*' cannot be applied to operands of type 'Float' and 'Double'
I am implementing AudioVisualizer and I am trying to calculate time of audio but I am getting below error

Binary operator '*' cannot be applied to operands of type 'Float' and 'Double'

Here is my code:

```<code> var lowPassReslts: Double = 0.0
 var lowPassReslts1: Double = 0.0

 let ALPHA: Float = 1.05

 let averagePowerForChannel = pow(10, (0.05 * audioPlayer.averagePower(forChannel: 0)))
 lowPassReslts = ALPHA * averagePowerForChannel + (1.0 - ALPHA) * lowPassReslts //HERE i am getting error which i mention above

 let averagePowerForChannel1 = pow(10, (0.05 * audioPlayer.averagePower(forChannel: 1)))
 lowPassReslts1 = ALPHA * averagePowerForChannel1 + (1.0 - ALPHA) * lowPassReslts1 //HERE i am getting error
</code>```

This above code have converted from Objective-C. This code works perfect in Objective-C but it is not working in Swift. Can anyone please tell me how to solve this error?

答:
Pow(Double, Double) it accepts the double and returns the double.

let ALPHA: Float = 1.05, you explicitly declared the Float(change the naming convention, should not be all caps).

in swift, you cannot do any binary operation with two different types.

Solution: change the alpha type to double or don't declare the data type else convert it to double during operation.

Body:
I am implementing AudioVisualizer and I am trying to calculate time of audio but I am getting below error

Binary operator '*' cannot be applied to operands of type 'Float' and 'Double'

Here is my code:

 var lowPassReslts: Double = 0.0
 var lowPassReslts1: Double = 0.0

 let ALPHA: Float = 1.05

 let averagePowerForChannel = pow(10, (0.05 * audioPlayer.averagePower(forChannel: 0)))
 lowPassReslts = ALPHA * averagePowerForChannel + (1.0 - ALPHA) * lowPassReslts //HERE i am getting error which i mention above

 let averagePowerForChannel1 = pow(10, (0.05 * audioPlayer.averagePower(forChannel: 1)))
 lowPassReslts1 = ALPHA * averagePowerForChannel1 + (1.0 - ALPHA) * lowPassReslts1 //HERE i am getting error

This above code have converted from Objective-C. This code works perfect in Objective-C but it is not working in Swift. Can anyone please tell me how to solve this error?


问:
Use an external Link as the WordPress profile picture
I want to write a Single Sign On (SSO) plugin for WordPress. I want to use an external image link as user's profile picture after user login.
This image has a link which is located in http://www.example.com/image.png.

How can I do this in WordPress?

答:
These Hooks ('get_avatar', 'avatar_defaults') are also available by WordPress, as an example:
you can check the documentation here:
https://codex.wordpress.org/Function_Reference/get_avatar</p>

```<code>function my_custom_avatar($avatar, $id_or_email, $size, $default, $alt)
{
 echo $avatar . ' -> ' . $id_or_email .  ' -> ' . $size .  ' -> ' . $default .  ' -> ' .$alt;
 $avatar = 'https://www.example.com/yourImage';
 $avatar = "<img alt='{$alt}' src='{$avatar}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
 return $avatar;
}

add_filter( 'get_avatar', 'my_custom_avatar', 10, 5 );

add_filter( 'avatar_defaults', 'my_custom_avatar', 10, 1 );```
</code>```

Body:
These Hooks ('get_avatar', 'avatar_defaults') are also available by WordPress, as an example:
you can check the documentation here:
https://codex.wordpress.org/Function_Reference/get_avatar

function my_custom_avatar($avatar, $id_or_email, $size, $default, $alt)
{
 echo $avatar . ' -> ' . $id_or_email .  ' -> ' . $size .  ' -> ' . $default .  ' -> ' .$alt;
 $avatar = 'https://www.example.com/yourImage';
 $avatar = "<img alt='{$alt}' src='{$avatar}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
 return $avatar;
}

add_filter( 'get_avatar', 'my_custom_avatar', 10, 5 );

add_filter( 'avatar_defaults', 'my_custom_avatar', 10, 1 );```


问:
laravel 5.8 access other table's property in one to many relation
I have 3 tables

hotel

province

city

the hotel has a relation to the city and the city has a relation to the province.
city id will save in the city field in the hotel table.
how can I access city name and province name in the Hotel model?

in hotel model I wrote this :

```<code>  public function city(){
        return $this->belongsTo(City::class);
    }
</code>```

and in the city model I have this:

```<code>   public function hotel(){
        return $this->hasMany(Hotel::class);
    }

    public function province(){
        return $this->belongsTo(Province::class);
    }
</code>```

and in province

```<code>  public function cities(){
        return $this->hasMany(City::class);
    }
</code>```

答: Has Many Through relationship is what you are looking for.</p>

Body:
I have 3 tables

hotel

province

city

the hotel has a relation to the city and the city has a relation to the province.
city id will save in the city field in the hotel table.
how can I access city name and province name in the Hotel model?

in hotel model I wrote this :

  public function city(){
        return $this->belongsTo(City::class);
    }

and in the city model I have this:

   public function hotel(){
        return $this->hasMany(Hotel::class);
    }

    public function province(){
        return $this->belongsTo(Province::class);
    }

and in province

  public function cities(){
        return $this->hasMany(City::class);
    }


问:
F:\Android\...: Error: Can't determine type for tag '<item name="activity_horizontal_margin">16dp</item>
I made the dimensionValues.xml file for keeping all the dimension values.Right now, it has three items.I used these items names/values in some activity pages.I don't know why the android studio can't recognize these items although I provided the correct syntax for it.The same works for color.xml, string.xml files and studio can recognize their values/items. I could not und[enter image description here][1]erstand why it does not identify the values.P.S I am entirely new in Android learning. I hope no one gives me a negative vote even if it is a straightforward question. I could not find an excellent direct solution for it. </p>

```<code><--Default screen margins, per the Android Design guidelines. this is in the dimensionValues.xml file-->
    <item name="activity_horizontal_margin">16dp</item>
    <item name="activity_vertical_margin">24dp</item>

<-- this is how I am trying to catch the values, it is written in an activity page -->
android:paddingBottom="@dimensionValues/activity_vertical_margin"
android:layout_marginLeft="@dimensionValues/activity_horizontal_margin"
<-- this is the error I am facing-->
Error: Can't determine type for tag '<item name="activity_horizontal_margin">16dp</item>'

  [1]: https://i.stack.imgur.com/CEEkR.png
</code>```

答:
In XML file you can not use capital letters for file name.

Replace your dimensionValues.xml file name with dimension_values.xml

Body:
I made the dimensionValues.xml file for keeping all the dimension values.Right now, it has three items.I used these items names/values in some activity pages.I don't know why the android studio can't recognize these items although I provided the correct syntax for it.The same works for color.xml, string.xml files and studio can recognize their values/items. I could not und[enter image description here][1]erstand why it does not identify the values.P.S I am entirely new in Android learning. I hope no one gives me a negative vote even if it is a straightforward question. I could not find an excellent direct solution for it.

<--Default screen margins, per the Android Design guidelines. this is in the dimensionValues.xml file-->
    <item name="activity_horizontal_margin">16dp</item>
    <item name="activity_vertical_margin">24dp</item>

<-- this is how I am trying to catch the values, it is written in an activity page -->
android:paddingBottom="@dimensionValues/activity_vertical_margin"
android:layout_marginLeft="@dimensionValues/activity_horizontal_margin"
<-- this is the error I am facing-->
Error: Can't determine type for tag '<item name="activity_horizontal_margin">16dp</item>'

  [1]: https://i.stack.imgur.com/CEEkR.png


问:
requests_toolbelt.exceptions.VersionMismatchError: The toolbelt requires at least Requests 2.10.0 to be installed. Version 2.6.0 was found instead
I need to use Requests in my app. I have followed the instructions on issuing HTTP(S) requests as is described here.

I am calling request_toolbels in my code like so

```<code>from flask import Flask
from routes import configure_blueprints
from modules.filters import init_babel
import requests
import requests_toolbelt.adapters.appengine

def create_app():
    """Create the Flask App"""
    v = requests.__version__

    requests_toolbelt.adapters.appengine.monkeypatch()
    app = Flask(__name__)
    configure_blueprints(app)
    init_babel(app)
    return app
</code>```

When I debug the value of v is 2.6.0. but I am certain I have installed requests 2.11.1

I get the following error when I run my unit tests.

```<code>C:\Python27\python.exe "C:\Program Files (x86)\JetBrains\PyCharm 2016.2.3\helpers\pycharm\utrunner.py" C:\Code\zion-alpha\Tests\ZionTestSuite.py true
Testing started at 3:04 PM ...
C:\Code\zion-alpha\Tests\ZionTestSuite.py:1: RuntimeWarning: Parent module 'Tests' not found while handling absolute import
  import unittest2
C:\Code\zion-alpha\Tests\ZionTestSuite.py:2: RuntimeWarning: Parent module 'Tests' not found while handling absolute import
  from Tests.TestCases.handler_tests import AppTest
Traceback (most recent call last):
  File "C:\Program Files (x86)\JetBrains\PyCharm 2016.2.3\helpers\pycharm\utrunner.py", line 153, in <module>
    modules = [loadSource(a[0])]
  File "C:\Program Files (x86)\JetBrains\PyCharm 2016.2.3\helpers\pycharm\utrunner.py", line 65, in loadSource
    module = imp.load_source(moduleName, fileName)
  File "C:\Code\zion-alpha\Tests\ZionTestSuite.py", line 2, in <module>
    from Tests.TestCases.handler_tests import AppTest
  File "C:\Code\zion-alpha\Tests\TestCases\handler_tests.py", line 1, in <module>
    from Tests.TestCases.Base.base_test import TestBase, app
  File "C:\Code\zion-alpha\Tests\TestCases\Base\base_test.py", line 12, in <module>
    app = TestApp(create_app())
  File "C:\Code\zion-alpha\app\__init__.py", line 12, in create_app
    requests_toolbelt.adapters.appengine.monkeypatch()
  File "C:\Code\zion-alpha\lib\requests_toolbelt\adapters\appengine.py", line 133, in monkeypatch
    _check_version()
  File "C:\Code\zion-alpha\lib\requests_toolbelt\adapters\appengine.py", line 145, in _check_version
    requests.__version__
requests_toolbelt.exceptions.VersionMismatchError: The toolbelt requires at least Requests 2.10.0 to be installed. Version 2.6.0 was found instead.
</code>```

答: pip install requests==2.10.0 will solve this issue

Body:
I need to use Requests in my app. I have followed the instructions on issuing HTTP(S) requests as is described here.

I am calling request_toolbels in my code like so

from flask import Flask
from routes import configure_blueprints
from modules.filters import init_babel
import requests
import requests_toolbelt.adapters.appengine

def create_app():
    """Create the Flask App"""
    v = requests.__version__

    requests_toolbelt.adapters.appengine.monkeypatch()
    app = Flask(__name__)
    configure_blueprints(app)
    init_babel(app)
    return app

When I debug the value of v is 2.6.0. but I am certain I have installed requests 2.11.1

I get the following error when I run my unit tests.

C:\Python27\python.exe "C:\Program Files (x86)\JetBrains\PyCharm 2016.2.3\helpers\pycharm\utrunner.py" C:\Code\zion-alpha\Tests\ZionTestSuite.py true
Testing started at 3:04 PM ...
C:\Code\zion-alpha\Tests\ZionTestSuite.py:1: RuntimeWarning: Parent module 'Tests' not found while handling absolute import
  import unittest2
C:\Code\zion-alpha\Tests\ZionTestSuite.py:2: RuntimeWarning: Parent module 'Tests' not found while handling absolute import
  from Tests.TestCases.handler_tests import AppTest
Traceback (most recent call last):
  File "C:\Program Files (x86)\JetBrains\PyCharm 2016.2.3\helpers\pycharm\utrunner.py", line 153, in <module>
    modules = [loadSource(a[0])]
  File "C:\Program Files (x86)\JetBrains\PyCharm 2016.2.3\helpers\pycharm\utrunner.py", line 65, in loadSource
    module = imp.load_source(moduleName, fileName)
  File "C:\Code\zion-alpha\Tests\ZionTestSuite.py", line 2, in <module>
    from Tests.TestCases.handler_tests import AppTest
  File "C:\Code\zion-alpha\Tests\TestCases\handler_tests.py", line 1, in <module>
    from Tests.TestCases.Base.base_test import TestBase, app
  File "C:\Code\zion-alpha\Tests\TestCases\Base\base_test.py", line 12, in <module>
    app = TestApp(create_app())
  File "C:\Code\zion-alpha\app\__init__.py", line 12, in create_app
    requests_toolbelt.adapters.appengine.monkeypatch()
  File "C:\Code\zion-alpha\lib\requests_toolbelt\adapters\appengine.py", line 133, in monkeypatch
    _check_version()
  File "C:\Code\zion-alpha\lib\requests_toolbelt\adapters\appengine.py", line 145, in _check_version
    requests.__version__
requests_toolbelt.exceptions.VersionMismatchError: The toolbelt requires at least Requests 2.10.0 to be installed. Version 2.6.0 was found instead.


问:
scipy.misc.imresize not working in GCP ml-engine
I'm trying to submit the following toy snippet as a job in GCP ml-engine:

```<code>import tensorflow as tf
import numpy as np
import scipy.misc

x = np.zeros([10, 10, 1])
y = scipy.misc.imresize(x[:, :, 0], [50, 50, 1], interp='nearest')
print(y)
print(y.shape)
</code>```

It is giving the following error after the job starts on server:

```<code>File "/root/.local/lib/python2.7/site-packages/teste/test.py", line 6, in <module>
y = scipy.misc.imresize(x[:, :, 0], [50, 50, 1], interp='nearest')
AttributeError: 'module' object has no attribute 'imresize'
</code>```

It works perfectly on local, and according to Cloud-ML docs, the scipy package is supported. Apparently it is not an issue with the module itself, as the import statement is not giving any error.

答:
It was deprecated in 1.3.0.
Contrary to using Pillow, reinstall scipy 1.0.0

```<code>pip install scipy==1.0.0
</code>```

Or

```<code>pip3 install scipy==1.0.0
</code>```

Body:
I'm trying to submit the following toy snippet as a job in GCP ml-engine:

import tensorflow as tf
import numpy as np
import scipy.misc

x = np.zeros([10, 10, 1])
y = scipy.misc.imresize(x[:, :, 0], [50, 50, 1], interp='nearest')
print(y)
print(y.shape)

It is giving the following error after the job starts on server:

File "/root/.local/lib/python2.7/site-packages/teste/test.py", line 6, in <module>
y = scipy.misc.imresize(x[:, :, 0], [50, 50, 1], interp='nearest')
AttributeError: 'module' object has no attribute 'imresize'

It works perfectly on local, and according to Cloud-ML docs, the scipy package is supported. Apparently it is not an issue with the module itself, as the import statement is not giving any error.

Body:
It was deprecated in 1.3.0.
Contrary to using Pillow, reinstall scipy 1.0.0

pip install scipy==1.0.0

Or

pip3 install scipy==1.0.0


问:
Clustering Weblogic JMS
I have 8 instances of Weblogic, dispatched on 4 machines. Those 8 instances are grouped in a cluster.

Those 8 instances are great for EJB containers, but I have also 8 instances of Weblogic JMS server. In consequence, all my JMS messages are dispatched on those 8 instances...

My volume is too low to need so many JMS servers. I'd like to have only one JMS Weblogic instance by machine.

Is it possible to disable JMS Messaging on some instance?

答:
I believe you can target your JMS Server to an individual WL Server within the cluster. See the theory and console help for instructions.

You dont need 8 JMS Servers, just keep 1 and use a Migratable Target so that it takes care of failover for you.

Title: Clustering Weblogic JMS


问:
Add item to specific position otherwise push zero in array in javascript
I have empty array in that I want to add specific items at specific position which are coming from web api and want to add zero(0) to remaining positions dynamically using javscript.
Here is my Code :-

```<code>let arraydata = [0, 0, 0, 0, 0,0,0,0,0,0,0,0]
arraydata.splice(5, 0, 4)
document.querySelector("#app").innerHTML = arraydata;
</code>```

My Code

Right now I have added zero manually,I want to add 0 upto 12 index and want to add 4 at 5th position synamicaaly.

答:
You could just assign the value at the wanted index without splicing, which increases the length of the array.

let arraydata = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
arraydata[5] = 4;

console.log(...arraydata);```
</div>
</div>
</p>

<p>If you like to keep the splicing, you could keep the length by assigning the wwanted length.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let arraydata = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
arraydata.splice(5, 0, 4);
arraydata.length = 12;

console.log(...arraydata);</code>```

Body:
I have empty array in that I want to add specific items at specific position which are coming from web api and want to add zero(0) to remaining positions dynamically using javscript.
Here is my Code :-

let arraydata = [0, 0, 0, 0, 0,0,0,0,0,0,0,0]
arraydata.splice(5, 0, 4)
document.querySelector("#app").innerHTML = arraydata;

My Code

Right now I have added zero manually,I want to add 0 upto 12 index and want to add 4 at 5th position synamicaaly.

Body:
You could just assign the value at the wanted index without splicing, which increases the length of the array.

let arraydata = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
arraydata[5] = 4;

console.log(...arraydata);

If you like to keep the splicing, you could keep the length by assigning the wwanted length.

let arraydata = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
arraydata.splice(5, 0, 4);
arraydata.length = 12;

console.log(...arraydata);


答:
Use Array.fill

let array = new Array(12).fill(0);
array.splice(5,0,4);
console.log(array);```

If you want to update an index rather than adding a new value at particular index, rather than splice, you should simply do array[5] = 4

Title: Add item to specific position otherwise push zero in array in javascript

Body:
Use Array.fill

let array = new Array(12).fill(0);
array.splice(5,0,4);
console.log(array);

If you want to update an index rather than adding a new value at particular index, rather than splice, you should simply do array[5] = 4


问:
Remove complete string with special character
In a sentence, I want to remove a complete string which contains special characters.

Input is ["i am in jersey1&2","this code is %bdn2*nn"]

Expected output is ["i am in","this code is"]

```<code>import re

Dsp = ["i am in jersey1&2","this code is %bdn2*nn"]

Dsp1 = []

for i in Dsp:
    Dsp = [re.sub('^\W+$'," ",j) for j in i]
    Dsp1.append("".join(Dsp))
</code>```

I got

```<code>Dsp1 = ["i am in jersey12","this code is bdn2nn"]
</code>```

but the expected output is

```<code>Dsp1 = ["i am in", "this code is"]
</code>```

答:
Using str.isalpha

```<code>Input = ["i am in jersey1&2","this code is %bdn2*nn"]

for i in Input:
    print(" ".join(j for j in i.split() if j.isalpha()))
</code>```

Output:

```<code>i am in
this code is
</code>```

Body:
In a sentence, I want to remove a complete string which contains special characters.

Input is ["i am in jersey1&2","this code is %bdn2*nn"]

Expected output is ["i am in","this code is"]

import re

Dsp = ["i am in jersey1&2","this code is %bdn2*nn"]

Dsp1 = []

for i in Dsp:
    Dsp = [re.sub('^\W+$'," ",j) for j in i]
    Dsp1.append("".join(Dsp))

I got

Dsp1 = ["i am in jersey12","this code is bdn2nn"]

but the expected output is

Dsp1 = ["i am in", "this code is"]

Body:
Using str.isalpha

Input = ["i am in jersey1&2","this code is %bdn2*nn"]

for i in Input:
    print(" ".join(j for j in i.split() if j.isalpha()))

Output:

i am in
this code is


问:
How can I show an ampersand in XAML text string?
I am trying to add an ampersand like this:

```<code><Label Text="Phrase & Meaning Visible" />
</code>```

This doesn't work so I tried to delimit with a \ and that also does not work.  Does anyone have any suggestions on how I can do this?

Body:
I am trying to add an ampersand like this:

This doesn't work so I tried to delimit with a \ and that also does not work.  Does anyone have any suggestions on how I can do this?

Body: Actually this question is not about XAML, it's just a pure XML question. Some characters need to be escaped in XML, the correct escaping of & is &amp;


问:
Eclipse's "Outline" window equivalent in IntelliJ
I am thinking to switch from Eclipse to IntelliJ. But I want first make sure that my favorite tools exists in IntelliJ.

Does IntelliJ has an equivalent to Eclipse's docked Outline window?

答:
File structure popup shortcut:

Windows: CTRL+F12

Mac: ⌘+F12


问:
I want to plus the number form string datatype
I have the following input as string:

```<code>Num: 12345
</code>```

I would like to print out the sum of digits from the input (1+2+3+4+5 = 15):

```<code>total:15
</code>```

I tried, but there is a problem with atoi() in the for loop and I got an error:

[Error] invalid conversion from 'char' to 'const char*'

How can I fix that or how can I resolve it in an easier way?

```<code> #include <stdio.h>
 #include <ctype.h>
 #include <stdlib.h>
 #include <string.h>

 char numstr[100];
 int total = 0;

 main(){
     printf("Num:");
     scanf("%s", numstr);

     for(int i = 0; i < strlen(numstr); i++){
         total += atoi(numstr[i]);
     }
     printf("%d", total);
 }
</code>```

答:
Simple! Take the input as string and subtract the character by '0'. This will give you the number at that particular position. See my code below :

```<code>#include <stdio.h>
#include <ctype.h>
#include <stdlib.h>
#include <string.h>
char numstr[100];
int total=0;
main(){
printf("Num:");
scanf("%s",numstr);

for(int i = 0;i<strlen(numstr);i++){
 total += (numstr[i]-'0');
}
printf("%d",total);
}
</code>```

Saves the hassle of using atoi() or other functions.

Body:
I have the following input as string:

Num: 12345

I would like to print out the sum of digits from the input (1+2+3+4+5 = 15):

total:15

I tried, but there is a problem with atoi() in the for loop and I got an error:

[Error] invalid conversion from 'char' to 'const char*'

How can I fix that or how can I resolve it in an easier way?

 #include <stdio.h>
 #include <ctype.h>
 #include <stdlib.h>
 #include <string.h>

 char numstr[100];
 int total = 0;

 main(){
     printf("Num:");
     scanf("%s", numstr);

     for(int i = 0; i < strlen(numstr); i++){
         total += atoi(numstr[i]);
     }
     printf("%d", total);
 }

Body:
Simple! Take the input as string and subtract the character by '0'. This will give you the number at that particular position. See my code below :

#include <stdio.h>
#include <ctype.h>
#include <stdlib.h>
#include <string.h>
char numstr[100];
int total=0;
main(){
printf("Num:");
scanf("%s",numstr);

for(int i = 0;i<strlen(numstr);i++){
 total += (numstr[i]-'0');
}
printf("%d",total);
}

Saves the hassle of using atoi() or other functions.


答:
You can fill() array with 0

let arraydata = Array(12).fill(0)
arraydata.splice(5, 0, 4)
console.log(arraydata)```