Search jQuery

jQuery Forum

Screen name:
Amit Kanti

Amit Kanti's Profile

2 Posts

4 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Add Multiple Row In A Table and Sub Row

[2Replies]

06-Aug-2020 02:04 PM
Forum: Getting Started

With jQuery, most of the time we add rows one by one in a table or delete them. But in my case, the requirement is bit different. Say I've a table and have to add new row and tested the below:

HTML:

<button class="addRow"> 
    Add New Row
</button> 

<table> 
    <thead> 
        <tr> 
            <th>Rows</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>Row 0</td> 
        </tr> 
    </tbody> 
</table>

Script:

<script> 
    var lineNo = 1; 
    var html = ""; 

    $(document).ready(function () { 
        $(".addRow").click(function () { 
            html = "<tr><td>Row" + lineNo + "</td></tr>"; //Binding line no 
            tableBody = $("table tbody"); //Getting table element with selector 
            tableBody.append(html); //Appending the table row 
            lineNo++; //Counter to keep track of added rows
        }); 
    });  
</script>

So with a click event, I am adding multiple rows or rows one by one. But I am not sure if I can achieve this feature. Say with adding new rows to a table, I've to add more rows in the same row. As an example, adding multiple rows seem like this:

product size color price //Column

product1 size1 color1 price1 //Row
product2 size2 color2 price2

In my case, I require to do the following:

product size color price //Column

product1 size1 color1(+) price1 //Row
product2 size2 color2(+) price2
               color2(-)
               color2(-)
               color2(-)
product3 size3 color3(+) price3
product4 size4 color4(+) price4
               color4(-)
               color4(-)
               color4(-)

There will be add row option (+) in the newly created row, so user can add or remove rows and require to keep the track, say product1 with multiple colors will be assigned to that specific product 1 and so on. I am expecting ideas to implement this feature efficiently and look 
forward to hear from experts. Thanks.

Show Data With Previous and Next Button Using jQuery
[5Replies]
- 10-Jul-2020 01:45 AM
- Forum: Getting Started
I am working on a project where I've to show data using **Next** and **Previous** button clicked accordingly. My requirement is something like this: (By default, data will be loaded from database and will be rendered as follows)

    1
    1.1

Clicking on next button, it should render the following and vice-versa:

    2
    2.1
    2.2

I did few researches and got one that worked perfectly but unfortunately it didn't work as expected because it simply works on individual div as below:
1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
          $(".divs div").each(function(e) {
              if (e != 0)
                  $(this).hide();
          });
  
           $("#prev").click(function(){
              if ($(".divs div:visible").prev().length != 0)
                  $(".divs div:visible").prev().show().next().hide();
              else {
                  $(".divs div:visible").hide();
                  $(".divs div:last").show();
              }
              return false;
          });
  
          $("#next").click(function(){
              if ($(".divs div:visible").next().length != 0)
                  $(".divs div:visible").next().show().prev().hide();
              else {
                  $(".divs div:visible").hide();
                  $(".divs div:first").show();
              }
              return false;
          });
      });
  </script>
      <div class="divs">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
          <div>10</div>
      </div>
  
      <a id="prev">Previous</a>
      <a id="next">Next</a>
Pretty cool! But when I tried mine one with few tweaks, it started showing weird results. Here is the code snippet:
1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
2. <script>
3.     $(document).ready(function () {
              $(".divs .heading .heading2").each(function (e) {
                  if (e != 0)
                      $(this).hide();
              });
  
              $("#prev").click(function () {
                  if ($(".divs .heading:visible").prev().length != 0)
                      $(".divs .heading:visible").prev().show().next().hide();
                  else {
                      $(".divs .heading:visible").hide();
                      $(".divs .heading:last").show();
                  }
                  return false;
              });
  
              $("#next").click(function () {
                  if ($(".divs .heading:visible").next().length != 0) {
                      $(".divs .heading:visible").next().show().prev().hide();
                      $(".divs .heading2:visible").next().show().prev().hide();
                  }
                  else {
                      $(".divs .heading:visible").hide();
                      $(".divs .heading:first").show();
  
                      $(".divs .heading2:visible").hide();
                      $(".divs .heading2:first").show();
                  }
                  return false;
              });
          });
4. </script>
      <div class="divs">
          <div class="heading">
              <div>1</div>
          </div>
  
          <div class="heading2">
              <div>1.1</div>
          </div>
  
          <div class="heading">
              <div>2</div>
          </div>
  
          <div class="heading2">
              <div>2.1</div>
          </div>
          <div class="heading2">
              <div>2.2</div>
          </div>
  
          <div class="heading">
              <div>3</div>
          </div>
  
          <div class="heading2">
              <div>3.1</div>
          </div>
          <div class="heading2">
              <div>3.2</div>
          </div>
          <div class="heading2">
              <div>3.3</div>
          </div>
      </div>
  
      <a id="prev">Previous</a>
      <a id="next">Next</a>
I am sure missed few things out here and would appreciate if pointed out the reason though am struggling a bit with it.

N:B: The purpose of this is to use a quiz system where user can go forward or backward with the given features. So initially data has to be loaded from database and this will work on the loaded data respectively. I would expect any better approach or open to any better idea for this. Again, you can see the working code snippet here - jQuery With Previous and Next Button

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend