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

See also questions close to this topic

• Why is my JavaScript object property inaccessible, when it IS, in fact, defined?

  Here is the object. It is a second-level object in the data tree:

  user: {
    userId: 3,
    username: 'aragorn',
  },
  

  My React component is destructuring its parent object and making it available to the entire component. When I render the full user object using this code:

  <p className="small">
    {`Submitted by ${JSON.stringify(user)}`}
  </p>
  

  I get a complete stringified object with all of user's properties:

  

  When I try to access only the 'username' property from the 'user' object:

  <p className="small">
    {`Submitted by ${JSON.stringify(user.username)}`}
  </p>
  

  I get this error:

  

  Have you ever faced this weird issue before?

  For further study, here is the full data object. This is coming from a mock data object being exported from a neighboring file in the same app. No network requests to a backend or anything, so there shouldn't be any async stuff going on here (I may be wrong):

  {
  title: "The Hefalump's Tale",
  page: '32',
  line: '1',
  author: 'Joni E. Driskill',
  genre: 'Sci-fi',
  type: 'Motivational',
  content: 'The grass is greener on the other side, unless, in actuality and reality, it is not. I guess in that case, you can just give up on anything nice in life.',
  claps: 23,
  id: 4,
  user: {
    userId: 3,
    username: 'aragorn',
  },
  comments: [
    {
      commentId: 0,
      quoteId: 0,
      content: 'Comment content',
      userId: 'userId',
      claps: 2,
      date: 2,
    },
    {
      commentId: 1,
      quoteId: 1,
      content: 'Comment content',
      userId: 'userId',
      claps: 4,
      date: 1,
    },
    {
      commentId: 2,
      quoteId: 2,
      content: 'Comment content',
      userId: 'userId',
      claps: 12,
      date: 0,
    },
  ],
  

  },

  And HERE is my React component, called 'Meta,' bringing in the 'quote' object as a prop. The primary line in question is toward the bottom, but feel free to look at my props destructuring, too, if you like:

  import React from 'react';
  import Clap from '../mechanics/Clap';
  import Report from '../mechanics/Report';
  
  const Meta = ({
    quote: {
      content,
      title,
      author,
      page,
      line,
      genre,
      type,
      claps,
      id,
      user,
    },
  }) => (
    <div className="discussion-meta mb2">
      <h1>&ldquo;{content}&rdquo;</h1>
      <hr />
      <div className="columns is-spaced-around pb3 text-align-left">
        <div className="column">
          <h3>{title}</h3>
          <p>
            <small>by {author}</small>
          </p>
          {page ?
            <p>
              <small>page {page}{line ? `, line ${line}` : ''}</small>
            </p>
            : null
          }
        </div>
        <div className="column text-align-right">
          <p>
            <span className="tag-purple small">{genre}</span>
          </p>
          <p>
            <span className="tag-green small">{type}</span>
          </p>
        </div>
      </div>
      <div className="columns">
        <div className="column">
          <p className="small">
            {`Submitted by ${JSON.stringify(user.username)}`}
          </p>
        </div>
      </div>
      <div className="columns">
        <div className="column">
          <Clap claps={claps} />
        </div>
        <div className="column">
          <Report id={id} />
        </div>
      </div>
    </div>
  );
  
  export default Meta;
  

  I've recreated in CodeSandbox, and it works! WTF! https://codesandbox.io/s/4q9nlywl1x
• Mongoose Save Nested Array of Objects - Node.js

  I've created my model and can save an array of objects by manually listing them out, however this won't work in production because my array will not always be the same size.

  Below is an example of my code. The issue I'm having when saving an array of objects under the stackRank field.

  If anyone has any suggestions that would be great and a life saver!

  Mongoose Model

  const MySchema = mongoose.Schema({
    userId: {type: mongoose.Schema.Types.ObjectId, ref: 'User', require: true},
    startDate: {type: Date, require: true},
    endDate: {type: Date, require: false}, 
    length: {type: Number, require: true},
    inProgress: {type: Boolean, require: true, default: true}, 
    stackRank:[{
      appUsers: {type: mongoose.Schema.Types.ObjectId, ref: 'Users', require: true}
    }]
  });
  

  Saving Code in Express

  const mySchema = new MySchema({  
        userId: req.body.userId,
        startDate: today,
        length: req.body.startLength,
        stackRank: [          //TODO this is the part I need to change
          {appUsers: Array[0]}, 
          {appUsers: Array[1]},
          {appUsers: Array[2]}
        ]
      });
  
      instantComp.save()
      .then((result) => {
        console.log('result from save', result)
      })
      .catch(err => console.log('error promise all', err))
  

  Desired Functionality

  Instead of saving each value of the array individually for the field appUsers nested in stackRank, I want to be able to save the entire array at once because it will not always have a length of three. It will almost always vary in length so while the code I've written works for an array of this size, it won't actually function properly for me.

  Picture of how I want the data to be saved in Mongo
• Android WebView: how to scroll to an <a name=here> position

  I'm loading a self-created HTML page into a WebView in an Android app.

  The HTML page contains a tag like <a name="here"></a> somewhere in the middle.

  After loading that page, I'd like to be able to programmatically scroll to that position, as if I had clicked on a <a href="#here">here</a> link.

  I tried with loadURL and with loadDataWithBaseURL, with every possible parameter combinations that I could think of, without success.

  Note 1: I want to be able to scroll to that position after the page has been already displayed.

  Note 2: I cannot use scrollTo(x,y) because I don't know the y position of that <a name="here"> anchor within the page. If I could figure out the y position in the page of that <a name> tag, that would also solve the problem, but I don't know how to find that y value either.

  (P.S. I'm loading the self-created HTML page by calling loadDataWithBaseURL(null, _html, null, null, null); where _html is the string with my HTML page)
• Only toggle certain elements based on class

  I have a simple table:

  <table>
      <tr class="header">
          <th>
              ....
          </th>
      </tr>
      <tr class="level2">
          <th>
              ....
          </th>
      </tr>
      <tr class="level3">
          <th>
              ....
          </th>
      </tr>
      <tr class="level3">
          <th>
              ....
          </th>
      </tr>
      <tr class="level2">
          <th>
              ....
          </th>
      </tr>
      <tr class="level3">
          <th>
              ....
          </th>
      </tr>
      <tr class="level3">
          <th>
              ....
          </th>
      </tr>
  </table>
  

  This works great to toggle everything from one "header" to the next.

  $('.header').click(function () {
      $(this).nextUntil('tr.header').toggle();
  });
  

  But what I can't figure out how to do is to ONLY toggle the elements with class of "level2" and leave "level3" hidden.

  I've been playing around for a while with .toggleClass() and .netAll() but I am not getting it.
• Unable to change the div color dynamically using VueJS

  I am developing an application using Bootstrap and VueJS.

  I am developing a Google drive like folder structure, wherein I want to highlight a div in blue when it is selected.

  Here is the code:

  export default{
    mounted(){  
      $(document).ready(function () {
  
        let that = this;
        $("#div").on("click", ".folderRectangle", function () {
            $(that).css("background-color", "blue");
            $(".folderRectangle").not(that).css("background-color", "white");
        }); 
      });
    }
  }

  .folderRectangle { 
    x: 220px; 
    y: 473px; 
    width: 299px; 
    height: 62px; 
    background-color: #FFFFFF; 
    border: 1px solid #BDBDBD; 
    border-radius: 0px;
  }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <div class="row">
  
    <div class="col-xl-3 col-md-6">
      <stats-card>
        <div slot="header" class="folderRectangle" id="div">
          <div class="row">
            <div class="col-3">
              <div class="clearfix">
  
                <i class="material-icons" id="folder-image">&#xe2c9;</i>
  
              </div>
            </div>
            <div class="col-9">
              <div class="clearfix" style="position: relative">
                <div>
                  <p style="text-align: left">Folder Name</p>
                </div>
                <div>
                  <p style="text-align:left">20 files</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </stats-card>
    </div>
    
    <div class="col-xl-3 col-md-6">
      <stats-card>
        <div slot="header" class="folderRectangle" id="div">
          <div class="row">
            <div class="col-3">
              <div class="clearfix">
                <i class="material-icons" id="folder-image">&#xe2c9;</i>
              </div>
            </div>
            <div class="col-9">
              <div class="clearfix" style="position: relative">
                <div>
                  <p style="text-align: left">Folder Name</p>
                </div>
                <div>
                  <p style="text-align:left">20 files</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </stats-card>
    </div>
    
   </div>

  When I try clicking on the div, I am unable to change the css color of the div using onClick. What wrong am I doing? Can someone please help me out?
• How do I submit form without page reload taking into consideration the php script?

  So basically I have to work on this loan calculator loancalc.000webhostapp.com

  I have looked at other pages on this site "how to submit form without page reload?" but this isn't completely relevant to what i'm working on. So far i've added this into the jquery part of the page...

  jQuery('qis-register').on('submit', 'input', function(){
          event.preventDefault();
          var name = $("input#yourname").val();
          var email = $("input#youremail").val();
          if (name == ""){
              $("input#yourname").focus;
              return false;
          }
          else{
  
          }
          if (email == ""){
              $("input#youremail").focus;
              return false;
          }
      });

  But i'm told there is also two other scripts that I need to work with, I'm not really too experienced with php so not sure what's going on, the two php scripts I have to work with are called quick-interest-slider.php and register.php,

  //qis_verify_application in register.php
  
      function qis_verify_application(&$values, &$errors) {
      $application = qis_get_stored_application();
      $register = qis_get_stored_application_messages();
  
      $arr = array_map('array_shift', $application);
      foreach ($arr as $key => $value) {
          if ($application[$key]['type'] == 'multi') {
              $d = explode(",",$application[$key]['options']);
                  foreach ($d as $item) {
                      $values[$key] .= $values[$key.$item];
                  }
          }
          if ($application[$key]['required'] == 'checked' && $register['use'.$application[$key]['section']] && (empty($values[$key]) || $values[$key] == 'Select...')) 
              $errors[$key] = 'error';
          }
  
      $filenames = array('identityproof','addressproof');
  
      foreach($filenames as $item) {
          $tmp_name = $_FILES[$item]['tmp_name'];
          $name = $_FILES[$item]['name'];
          $size = $_FILES[$item]['size'];
          if (file_exists($tmp_name)) {
              if ($size > $register['attach_size']) $errors['attach'.$item] = $register['attach_error_size']; 
              $ext = strtolower(substr(strrchr($name,'.'),1));
              if (strpos($register['attach_type'],$ext) === false) $errors['attach'.$item] = $register['attach_error_type'];
          }
      }
      return (count($errors) == 0);   
  }
  
  //qis_process_application in register.php
  
      function qis_process_application($values) {
      global $post;
      $content='';
      $register = qis_get_stored_register ('default');
      $applicationmessages = qis_get_stored_application_messages();
      $settings = qis_get_stored_settings();
      $auto = qis_get_stored_autoresponder();
      $application = qis_get_stored_application();
      $message = get_option('qis_messages');
  
      $arr = array_map('array_shift', $application);
  
      if ($message) {
          $count = count($message);
          for($i = 0; $i <= $count; $i++) {
          if ($message[$i]['reference'] == $values['reference']) {
              $values['complete'] = 'Completed';
              $message[$i] = $values;
              update_option('qis_messages',$message);
              }
          }    
      }
  
      $filenames = array('identityproof','addressproof');
  
      $attachments = array();
      if ( ! function_exists( 'wp_handle_upload' ) ) {
          require_once( ABSPATH . 'wp-admin/includes/file.php' );
      }
      add_filter( 'upload_dir', 'qis_upload_dir' );
  
      $dir = (realpath(WP_CONTENT_DIR . '/uploads/qis/') ? '/uploads/qis/' : '/uploads/');
      foreach($filenames as $item) {
          $filename = $_FILES[$item]['tmp_name'];
          if (file_exists($filename)) {
              $name = $values['reference'].'-'.$_FILES[$item]['name'];
              $name = trim(preg_replace('/[^A-Za-z0-9. ]/', '', $name));
              $name = str_replace(' ','-',$name);
              $_FILES[$item]['name'] = $name;
              $uploadedfile = $_FILES[$item];
              $upload_overrides = array( 'test_form' => false );
              $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );
              array_push($attachments , WP_CONTENT_DIR .$dir.$name);
          }
      }
  
      remove_filter( 'upload_dir', 'qis_upload_dir' );
  
      $content = qis_build_complete_message($values,$application,$arr,$register);
  
      qis_send_full_notification ($register,$values,$content,true,$attachments);
  
      qis_send_full_confirmation ($auto,$values,$content,$register);
  }
  

  function qis_loop in quick-interest-slider.php

  function qis_loop($atts) {
  
      $qppkey = get_option('qpp_key');
      if (!$qppkey['authorised']) {
          $atts['formheader'] = $atts['loanlabel'] = $atts['termlabel'] = $atts['application'] = $atts['applynow'] = $atts['interestslider'] = $atts['intereselector']= $atts['usecurrencies'] = $atts['usefx'] = $atts['usedownpayment'] = false;
          if ($atts['interesttype'] == 'amortization' || $atts['interesttype'] == 'amortisation') $atts['interesttype'] = 'compound';
      }
  
      global $post;
  
      // Apply Now Button
  
      if (!empty($_POST['qisapply'])) {
          $settings = qis_get_stored_settings();
          $formvalues = $_POST;
          $url = $settings['applynowaction'];
          if ($settings['applynowquery']) $url = $url.'?amount='.$_POST['loan-amount'].'&period='.$_POST['loan-period'];
          echo "<p>".__('Redirecting....','quick-interest-slider')."</p><meta http-equiv='refresh' content='0;url=$url' />";
          die();
  
      // Application Form
  
      } elseif (!empty($_POST['qissubmit'])) {
          $formvalues = $_POST;
          $formerrors = array();
          if (!qis_verify_form($formvalues, $formerrors)) {
              return qis_display($atts,$formvalues, $formerrors,null);
          } else {
              qis_process_form($formvalues);
              $apply = qis_get_stored_application_messages();
              if ($apply['enable'] || $atts['parttwo']) return qis_display_application($formvalues,array(),'checked');
              else return qis_display($atts,$formvalues, array(),'checked');
          }
  
      // Part 2 Application
  
      } elseif (!empty($_POST['part2submit'])) {
          $formvalues = $_POST;
          $formerrors = array();
          if (!qis_verify_application($formvalues, $formerrors)) {
              return qis_display_application($formvalues, $formerrors,null);
          } else {
              qis_process_application($formvalues);
              return qis_display_result($formvalues);
          }
  
      // Default Display
  
      } else {
          $formname = $atts['formname'] == 'alternate' ? 'alternate' : '';
          $settings = qis_get_stored_settings();
          $values = qis_get_stored_register($formname);
          $values['formname'] = $formname;
          $arr = explode(",",$settings['interestdropdownvalues']);
          $values['interestdropdown'] = $arr[0];
          $digit1 = mt_rand(1,10);
          $digit2 = mt_rand(1,10);
          if( $digit2 >= $digit1 ) {
              $values['thesum'] = "$digit1 + $digit2";
              $values['answer'] = $digit1 + $digit2;
          } else {
              $values['thesum'] = "$digit1 - $digit2";
              $values['answer'] = $digit1 - $digit2;
          }
          return qis_display($atts,$values ,array(),null);
      }
  }
  

  Do I have to edit any of the php and I also don't know what I have to write considering the php.
• Why is my background image animation not running?

  I'm making a website to tell you the weather as a personal project to understand jquery and working with APIs. I'm trying to map the speed of the clouds moving along the screen to the wind speed. the problem is i can't get the clouds animation to work.

  #clouds{
      background-size: 300px 217px;
      height:300px;
      width:300px;
      margin: auto;
      background-repeat: repeat-x;
      animation:mymove infinite 10s;  
  }
  
  @keyframes mymove {
      from {
              background-position: left bottom;
      }
      to {
          background-position: right bottom;
      }
  }
  

  I expect the clouds to be moving from left to right but they're stationary

  the html just in case

   <!DOCTYPE html>
   <html lang="en">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Weather</title>
          <link rel="stylesheet" href="../static/css/style.css">
          <script src="../app/jquery-3.3.1.min.js"></script>
          <script src="../static/js/getWeather.js"></script>
          <script src="../static/js/pageChange.js"></script>
  </head>
  <body>
      <div id="sun">
          <div id="clouds">
  
          </div>
      </div>
  </body>
  
• Access to a C# object in a Javascript script

  I'm working in a C# project. In a view, I need to work with a script (in Javascript) provided by my teacher. First of all, my view receive a List. For example: [location1,location2,location3]. Location has latitude and longitude parametres. In my Javascript, I have the function "L.marker([x,y]).addTo(mapa).on('click', onClick);". What I want is to pass location1.longitude and location1.latitude as parametrs of the marker function. How can I do it?

  @model List<SistemaGestion.Helpers.JsonApiGoogle.Location>
  
  (some HTML code)
  
  <script>
  (code)
         for (var coordenadas in Model) {
              L.marker([coordenadas.latitude, coordenadas.longitude]).addTo(mapa).on('click', onClick);
          }
  </script>