"Vanishing Act: Why Bootstrap Table Rows Myster

When I click the buttons, rows are added and deleted successfully. However, when I resize the window to check mobile responsiveness, the rows disappear. I am new to Bootstrap and unsure if I have made any mistakes.

$(document).ready(function() {
  //Try to get tbody first with jquery children. works faster!

  var tbody = $('#myTable').children('tbody');

  //Then if no tbody just select your table 
  var table = tbody.length ? tbody : $('#myTable');

  $('#addrow').click(function() {
    //Add row

    table.append('<tr scope="row"><td ><select  id="ex1"  required ><option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select>  </td>  <td >  <input  id="ex2" type="number">  </td> <td ><input  id="ex3" type="number"> </td> <td > <input  id="ex4" type="number"> </td> <td >  <button   class="btnDelete btn-outline-success"   id="delrow"  >Delete</button>  </td>  </tr>  ');
  })

  $("#myTable").on('click', '.btnDelete', function() {
    $(this).closest('tr').remove();
  });

});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5b8e1f4f7f9f0d5a4bba4a3bba5">[email protected]</a>/dist/bootstrap-table.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809540d181b151c394857484f5749">[email protected]</a>/dist/bootstrap-table.min.js"></script>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8ad78e9b98969fbacbd4cbccd4ca">[email protected]</a>/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>

<table class="table table-striped" data-toggle="table" data-pagination="true" data-mobile-responsive="true" id="myTable">

  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">QTY</th>
      <th scope="col">Price</th>
      <th scope="col">Total</th>
      <th scope="col">Option</th>
    </tr>
  </thead>
  <tbody>
    <tr scope="row">
      <td>
        <select id="ex1" required>
          <option value="">Iphone</option>
          <option value="">IPod</option>
          <option value="">Galaxy Tab</option>
          <option value="">PocoPhone</option>
        </select>
      </td>
      <td>
        <input id="ex2" type="number">
      </td>
      <td>
        <input id="ex3" type="number">
      </td>
      <td>
        <input id="ex4" type="number">
      </td>
      <td>
        <button class="btn btn-outline-success" id="addrow" class="addnew"> Add </button>
      </td>
    </tr>
  </tbody>
</table>

javascripthtmljquerycssbootstrap-4

Answer №1

This Code Performs Flawlessly

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    
    
    <form class="form-horizontal">
        <div class="table-responsive">
            <table class="table ">
                <thead>
                    <th>Product</th>
                    <th>QTY</th>
                    <th>Cost</th>
                    <th>Price</th>
                    <th>Total</th>
                    <th>Option</th>
                   
                </thead>
                <tbody>
                    <tr>
                         <td>
            <select id="ex1" required>
              <option value="">Iphone</option>
              <option value="">IPod</option>
              <option value="">Galaxy Tab</option>
              <option value="">PocoPhone</option>
            </select>
          </td>
                        <td><input  class="form-control" id="ex2" type="number" ></td>
                        <td><input class="form-control" id="ex3" type="number"></td>
                        <td>
                            <select class="form-control">
                                <option>Monthly</option>
                                <option>Yearly</option>
                            </select>
                        </td>
                        <td><input class="form-control" id="ex2" type="number" ></td>
                        <td><button class="btn btn-outline-success" id="addrow" class="addnew"> Add </button></td>
                        
                    </tr>
                </tbody>
            </table>
        </div>
    </form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through React components and accessing the properties of a specific element can

When I declared a top bar element as shown below: export default Class MyClass extends React.Component { static router = TopTabNavigator.router; render() { return() { <View> <TopTabNabiagtor navigation = {this.pro ...

javascriptreactjsreact-nativereact-navigation

Teach Google Bot how to recognize AJAX content

I'm facing a major issue while developing a website for someone else. The problem lies in the modals that are supposed to open when a user clicks on a product. My goal is to ensure that Google Bot recognizes these modals as individual pages. When a mo ...

javascriptphpajaxmodal-dialogseo

The order of array elements in the AJAX server response appears to have been altered when accessed on the client side

After receiving a JSON response from my server side, the content looks like this - echo json_encode(array("result"=>"success", "networks" => $adNetworkListFinal)); For example, the value of $adNetworkListFinal is as follows - Array ( ...

phpjqueryajaxjson

Troubleshooting the intermittent issues of JavaScript image setting with S3 CORS

While experimenting with the canvas element to save images, I encountered issues specifically in Chrome related to setting the initial image. <a href="#" data-src="https://s3.amazonaws.com/imphotos/uploads/thumb_IM_17592186048618_17592186048643.jpg"&g ...

javascriptgoogle-chromecanvasamazon-s3

Searching in jquery not functioning as intended

Greetings! I'm in the process of creating a live search feature similar to what's demonstrated at this link. However, I've encountered a minor issue with this snippet of code: jQuery("#result").on("click",function(e){ var $clicked = $(e.ta ...

javascriptphpjquery

convert the datatype of JSON values in JavaScript

I am facing an issue with my JSON object which contains timestamp values in string format. Here is a snippet of the data: var json = [{ "Time": "2017-08-17 16:35:28.000", "Value": "3.85" }, { "Time": ...

javascriptjsonhighcharts

Troubleshooting Issue: XMLHttpRequest Incompatibility with Internet Explorer

I'm having an issue with the script below. It works fine on Firefox and Chrome but doesn't seem to work on IE. I've tried various solutions, including lowering the security settings on my browser, but it still won't work. function se ...

javascriptjqueryxmlajax

Count the number of distinct values in an array of objects

Could you assist me with a JavaScript problem I'm experiencing? I have an array and need to extract the count key from the response. Here is a sample response: var events = [ ... I would like the array response to look like this: var events = [ ... ...

javascriptnode.jsarrayssorting

Navigate vertically using the pointer lock feature in THREE.js

I am seeking a way to achieve vertical movement using three.js's pointerlockcontrols. Specifically, I desire the movement to be similar to three.js's flycontrols, where the vertical direction of movement is proportional to the direction the user ...

javascriptthree.js3dcameratrigonometry

A guide on embedding a jpg or png image into an HTML button

I need a button that includes an image. Here is the code I am using: <input type="submit" name="submit" src="images/stack.png" /> However, the image is not displaying on the button as intended. My goal is for the entire button to be the image. ...

javascripthtml

Using Node.js for a game loop provides a more accurate alternative to setInterval

In my current setup, I have a multiplayer game that utilizes sockets for asynchronous data transfer. The game features a game loop that should tick every 500ms to handle player updates such as position and appearance. var self = this; this.gameLoop = se ...

javascriptnode.jstimergame-loop

Tips on organizing and designing buttons within a canvas

let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d"); // for canvas size var window_width = window.innerWidth; var window_height = window.innerHeight; canvas.style.background="yellow" canvas.wid ...

javascripthtmlcsscanvashtml5-canvas

Making adjustments to regular expressions

In my asp.net application, I have a text box where users input a URL and I am using a regular expression for validation. The current regular expression looks like this: ^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(&bsol ...

javascriptasp.netregex

AngularJS application: the button requires two clicks to activate

In my attempt to develop a simple CRUD app using AngularJS, I encountered an issue. The initial step involves clicking a button that fetches data from a REST API and populates an array. This array is then iterated using ng-repeat to generate Bootstrap card ...

javascriptangularjs

Jquery-based dropdown plugin for creating interactive dropdown menus

I've been creating a dropdown plugin that utilizes lists. Everything is working well, except for the fact that when there are multiple dropdowns on the same page, I want to close all the other ones except for the one that I'm triggering. Here&ap ...

jquerypluginsdrop-down-menu

When selecting a different file after initially choosing one, the Javascript file upload event will return e.target as null

Currently, I have implemented file uploading using <input>. However, when attempting to change the file after already selecting one, the website crashes and states that event.target is null. <Button label="Upload S3 File"> <input ...

javascriptreactjstypescriptreact-hooks

Using React, update the checkbox so that it dynamically changes from checked to unchecked

Hey there, I'm currently working on a table that includes checkboxes. The idea is that when I click on "Add Entries", a modal opens up; and when I click on "Done", I want the checkboxes to become unchecked without having to refresh the page. Do you ha ...

javascriptreactjs

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really app ...

javascripthtmlcssdeployment

Utilizing JavaScript, HTML, and CSS to incorporate images within circular frames

After finding inspiration from this question about rotating objects around a circle using CSS, I decided to modify the code to include images of Earth orbiting the Sun. The challenge was to make one image orbit another like a planet circling its star. Ear ...

javascripthtmlcss

Numerous web pages featuring the same title and navigation menus

Creating my personal academic website involves multiple pages that share a common structure. Question: I'm searching for a method to avoid duplicating the header and menu code in each HTML file. Is there an approach where I can store the code for the ...

htmlcss