how to remove all elements from a table row except first th

See also questions close to this topic

• Transform the JSON file into a matrix using javascript

  I try to create a chord diagram using D3. Unfortunately, I do not understand how I could change my data into a matrix. Example of result:

  matrix = [ [ 0  20  34  24],   // A
             [ 20  0  16  23],   // B
             [ 34  16  0  14],   // C
             [ 24  23  14  0], ] // D
  

  My data is separated in 2 json files. The first one describe the circle labeling and size.

      [{
            "id": 1,
            "value": 40,
            "label": "A",
          },
          {
             "id": 2,
             "value": 68,
             "label": "B",    
          {
             "id": 3,
             "value": 23,
             "label": "C",
          {
             "id": 4,
             "value": 53,
             "label": "D",
          }
      ....
      ]
  

  On the other hand, the second file describes the relationship between each label by id in the chord chart.

       [{
            "source": 1,
            "target": 2,
            "val": 20
          },
          {
            "source": 1,
            "target": 3,
            "val": 34
          },
          {
            "source": 1,
            "target": 4,
            "val": 24
          },
          {
            "source": 1,
            "target": 5,
            "val": 0
          }
      .....
          ],
  

  How do I convert the above relationship file to a proper matrix?

  Thank you in advance.
• three.js Line disappears on updating the vertices of its geometry

  I am learning three.js library in JS. I used the Line objects to create my own coordinate axes. I am trying to move them. The problem is when I update the vertices, two of the lines work fine, but the third line disappears completely. I tried printing its vertices on console but they are within visibility range. So, what is the reason I am facing this problem? My code:

  // create and axes to the scene
      //// X axis
      var material = new THREE.LineBasicMaterial({
          color: 0x00ff00
      })
      var geometry = new THREE.Geometry();
      geometry.vertices.push(new THREE.Vector3(1500,0,0), new THREE.Vector3(-1500,0,0));
      Xaxis = new THREE.Line(geometry,material);
      scene.add(Xaxis);
  
      //// Y axis
      var material = new THREE.LineBasicMaterial({
          color: 0xff0000
      })
      var geometry = new THREE.Geometry();
      geometry.vertices.push(new THREE.Vector3(0,1500,0), new THREE.Vector3(0,-1500,0));
      Yaxis = new THREE.Line(geometry,material);
      scene.add(Yaxis);
  
      //// Z axis
      var material = new THREE.LineBasicMaterial({
          color: 0x0000ff
      })
      var geometry = new THREE.Geometry();
      geometry.vertices.push(new THREE.Vector3(0,0,1500), new THREE.Vector3(0,0,-1500));
      Zaxis = new THREE.Line(geometry,material);
      scene.add(Zaxis);
  
  function changePosition(newVal)
  {
      if(!transformCo_ordinate) {
          sphere.position.set((vx/100)*newVal,(vy/100)*newVal,(vz/100)*newVal);
      }
      else{
          Xaxis.geometry.vertices[0].set(1500,-(vy/100)*newVal,-(vz/100)*newVal);
          Xaxis.geometry.vertices[1].set(-1500,-(vy/100)*newVal,-(vz/100)*newVal);
  
          Yaxis.geometry.vertices[0].set(-(vx/100)*newVal,1500,-(vz/100)*newVal);
          Yaxis.geometry.vertices[1].set(-(vx/100)*newVal,-1500,-(vz/100)*newVal);
  
          Zaxis.geometry.vertices[0].set(-(vx/100)*newVal,-(vy/100)*newVal,1500);
          Zaxis.geometry.vertices[0].set(-(vx/100)*newVal,-(vy/100)*newVal,-1500);
  
          Xaxis.geometry.verticesNeedUpdate = true;
          Yaxis.geometry.verticesNeedUpdate = true;
          Zaxis.geometry.verticesNeedUpdate = true;
          console.log(Xaxis.geometry.vertices[1]);
      }
  
  }
  

  THe function changePosition is being called by a slider which passes its current value as newVal within range 0-100. vx = 100, vy = 100, vz = -300

  Xaxis is the line that disappears. transformCo_ordinate is a boolean controlled by a checkbox. I am new to three.js so please understand if I am doing some stupid mistake.
• How to use variable in another file?

  I want to pass an variable to another file. I use the lat variable in new js file but not working.

  In address.php:

  <div class="saveaddress">Click me</div>
  
  <script>
      var lat;
      var lng;
      function displayLocation(position) {
          var lat = position.coords.latitude;
          var lng = position.coords.longitude;
      } 
  </script>
  .
  .
  .
  <script src="js/save.js"></script>
  

  save.js file:

  $('.saveaddress').click(function(){
      alert(lat);
  }
  

  How can I do that? (How can I do that? (I followed other questions but not worked for me.)
• How to find the current element index which is dynamically generated?

  I have coded some simple function which allow me to add order. I have also dynamically created the button which when called will remove the current html element which is a table row. Now, I am stuck with finding the current element index which I needed so I can use splice to remove it from the array.

  const order = [];
  
  const customer = {
    name: '',
    totalCups: 0
  }
  
  $('#btnAdd').click(function() {
    debugger
  
    var itemName = $('#customerName');
    var itemTotalCups = $('#customerTotalCups');
  
    customer.name = itemName.val();
    customer.totalCups = itemTotalCups.val();
  
    // Data structure Queue
    order.push(Object.assign({}, customer));
  
    // UI - HTML rendering - start
    if (order.length === 1) {
      // Create table column name
      $('#AllOrders').append('<table id="tbl" class="table table-bordered"><tr><td>Customer</td><td>Cups</td><td></td></tr></table>');
  
    }
  
    var itemElement = `<tr><td>${itemName.val()}</td><td>${itemTotalCups.val()}</td><td><a class='del' href='#'>Cancel order</a></td></tr>`;
  
    $('#tbl').append(itemElement);
    // UI - HTML rendering - end
  
    $('.del').click(function(e) {
  
      e.stopImmediatePropagation();
  
      // Delete order object
      debugger
      //var elm = $(this).parent().text().substr(0, $(this).parent().text().length-1);
      console.log(elm);
      console.log(order.indexOf(elm));
  
      //order.splice(order.indexOf(elm),1);
      //order.splice(2,1);
  
      // Delete HTML element
      $(this).parent().parent().remove();
    })
  
    // Reset textbox
    itemName.val("");
    itemTotalCups.val("");
  
    // Optional Design
    $('#ViewAllOrders').click();
    debugger;
  })

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <input id="customerName" type="text" />
  <input id="customerTotalCups" type="number" />
  <button id="btnAdd">Add</button>
  <div id="AllOrders"></div>

  I search for the solution but can't figure out the commented code below to find the element

   //var elm = $(this).parent().text().substr(0, $(this).parent().text().length-1);
  

  I am stuck inside $('.del').click event handler.
• The code works on localhost but does not work on the site

  I found a script It is very suitable for me, but it works when I start it from the desktop and does not work on the hosting. I clarify! CODE DOES NOT WORK ON WEB SITE (when transferring to web hosting) BUT WORKS ON LOCAL (if opened from the desktop with a browser) Select the first line and close and see: The code doesn't work on web hosting On the local output different values as it should be

  <!DOCTYPE html>
  <html>
  
  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
    <script src='http://code.jquery.com/jquery-latest.js'></script>
    <style type='text/css'>
  
    </style>
    <script type='text/javascript'>
      $(function() {
        $('select').change(function() {
          $('section li').show();
          $('select').each(function() {
            var val = this.value
            if (val != '') {
              val = this.id.valueOf()[0] + '-' + val;
              $('section li:not([data-game*="' + val + '"])').hide();
            };
          });
        });
      });
    </script>
  </head>
  
  <body>
    <header>
      <ul>
        <li>
          <select name="" id="genre">
            <option value="">Genre(all)</option>
            <option value="rpg">RPG</option>
            <option value="shooter">Shooter</option>
            <option value="strategy">Strategy</option>
            <option value="action">Action</option>
            <option value="arcade">Arcade</option>
          </select>
        </li>
        <li>
          <select name="" id="platform">
            <option value="">Platform(all)</option>
            <option value="pc">PC</option>
            <option value="android">Android</option>
            <option value="ps3">PS3</option>
          </select>
        </li>
        <li>
          <select name="" id="country">
            <option value="">Country(all)</option>
            <option value="usa">USA</option>
            <option value="russia">Russia</option>
            <option value="england">England</option>
            <option value="ukraine">Ukraine</option>
          </select>
        </li>
      </ul>
    </header>
    <section>
      <ul>
        <li data-game="g-rpg p-pc c-usa">
          <div class="img"></div>
          <p>World of Tanks</p>
        </li>
        <li data-game="g-shooter p-pc c-usa">
          <div class="img"></div>
          <p>Counter Strike</p>
        </li>
        <li class="n" data-game="g-strategy p-pc c-russia">
          <div class="img"></div>
          <p>Heroes of Might and Magic</p>
        </li>
        <li class="n" data-game="g-strategy p-pc c-england">
          <div class="img"></div>
          <p>Civilization</p>
        </li>
        <li class="n" data-game="g-shooter p-pc c-usa">
          <div class="img"></div>
          <p>Crysis</p>
        </li>
        <li class="n" data-game="g-arcade p-android c-ukraine">
          <div class="img"></div>
          <p>Boxes</p>
        </li>
        <li class="n" data-game="g-action p-ps3 c-usa">
          <div class="img"></div>
          <p>The last of us</p>
        </li>
      </ul>
    </section>
  </body>
  
  </html>
• Font Color Not Changing Even With !important

  I am trying to change the font color of my active navigation bar item but it will not change. However, the background color does change.

  I have tried using the !important tag, inserting a style= directly into the tag, and putting my .active class css code at the top of my stylesheet. None of which has worked.

  p,
  h1,
  h2,
  h3 {
    font-family: Georgia;
    color: #62666a;
  }
  
  .nav {
    width: 100%;
    text-align: center;
  }
  
  ul#navBar {
    list-style-type: none;
    margin: 0;
    border-radius: 4px;
    padding-left: 31%;
    overflow: hidden;
    background-color: white;
    position: relative;
    top: 0;
    text-align: center;
    box-shadow: 0px 3px 10px#888888;
  }
  
  li#navBar {
    float: left;
  }
  
  li#navBar a {
    display: inline-block;
    color: grey;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li#navBar a:hover {
    background-color: #004b65;
    color: white;
  }
  
  .active {
    background-color: #0084a2;
    color: #FFFFFF !important;
  }
  
  .site-footer {
    background: #e7e7ef;
    border-radius: 4px;
  }
  
  #footer-content {
    color: white;
    overflow: hidden;
  }
  
  #footer-left {
    float: left;
    padding-left: 1%;
  }
  
  #footer-right {
    float: right;
    padding-right: 1%;
  }
  
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    text-align: left;
  }
  
  button {
    background-color: #0084a2;
    border-radius: 8px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }
  
  button:hover {
    background-color: #004b65;
  }
  
  .index-button {
    background-color: #e7e7ef;
    height: 100%;
    width: 100%;
    vertical-align: middle;
    align-content: center;
  }
  
  #index-button-content {
    padding: 10%;
    text-align: center;
  }
  
  .menu-content {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding: 3%;
    box-shadow: 0px 5px 10px#888888;
  }

  <div class="nav">
    <ul id="navBar">
      <li id="navBar" class="active"><a href="index.php">Home</a></li>
      <li id="navBar"><a href="menu.php">Menu</a></li>
      <li id="navBar"><a href="catering.php">Catering</a></li>
      <li id="navBar"><a href="about.php">About Us</a></li>
      <li id="navBar"><a href="contact.php">Contact</a></li>
    </ul>
  </div>

  I want both the background color and font color to change when active, but right now only the background color is changing.
• how to to automaticly get a multiple form

  I'm doing a HTML form, it's meant to create step to pass on a game and I want to be able to enter a number and when for example I enter 5 it instantly show me 5 form to fill and create new step but when I try it doesn't appear how can I do please?

  <h3>Insertion des étape :</h3>
  
  <form action="InsertionEtape.php" method="post">
      <input type="number" name="quantity" min="1" max="5">
      <br>
      <?php for ($i=0; $i < $_GET['quantity']; $i++) {
         ?>
          <h5>Nom de l'étape</h5>
          <input type="text" name="NomEtape" size="40" maxlength="40">
          <br>
  
          <h5> Description de l'étape </h5>
          <textarea name="DescriptionEtape" rows="8" cols="80"></textarea>
          <br>
          <br>
          <input type="submit" value="Valider">
          <?php
       } ?>
  </form>