Trying to append a html table multipe time, but my 'th' is appearing always on top not after 'tr' as I reclick it

user_14725561 0
Viewed 75

I am trying to append a table multiple times by 'th' and 'tr' tag. but my 'th' is appearing always together at the top. Image link in this image image1 is hover dropdown. image2 is single onclick event. and on re-click image3 which is the issue. I want the table to appear as image4 or image5.

var pinCode=814112;
 var Dealers = ["Ramesh", "Suresh", "Mukesh", "Hitesh", 
 "Barjesh", "Bhupesh"]; 

 $("#zipCode").text(pinCode);
// script to append dealerList     
function showDealer() { 
for (var i = 0; i < Dealers.length; i++) 
{ 
$("#DealerList").append('<option>' + Dealers[i] + '</option>'); 
} 
} 

var spans = $("#zipCode"),index,span;
for (index = 0; index < spans.length; ++index) {
    span = spans[index];
    if (span.contentEditable) 
    { span.onblur = function() {
        var text = this.innerHTML;
        pinCode = text.replace(/&/g, "&amp").replace(/</g, "&lt;");
        console.log(pinCode);
        };
    }
}

var scrapI= ["Plastic" ,"Paper ","Book", "Steel", "Wood Items" ,"Wire","Electrical", "Copper","Glass"," Aluminium","Battery","Antique"];
var Plastic=10;
 var Paper =14;
 var Book=17;
 var Steel=0;
 var WoodItems=34;
 var Wire =28;
 var Electrical=33;
 var Copper=39;
 var Glass=13;
 var Aluminium=51;
 var Battery=69;
 var Antique=101;
 var selItemPri;  
// console.log(scrapI);

// append price data
function myFunction(){
    var row = document.createElement("tbody");
    var sItem = document.createElement('th');
    var pRate = document.createElement('th');
      row.appendChild(sItem);
      sItem.appendChild(document.createTextNode("Scrap Item"));
      row.appendChild(pRate);
      pRate.appendChild(document.createTextNode("Price Value"));
      headerPrice.appendChild(row); 
for (let i = 0; i < scrapI.length; i++) {
  var itemName = scrapI[i];
  switch(itemName)
  {
    case  'Plastic':
      selItemPri= Plastic; 
      if( selItemPri > 0)
      {
      console.log(selItemPri);
      var row = document.createElement("tr");
      var iSel = document.createElement('td');
      var iPri = document.createElement('td');
      row.appendChild(iSel);
      iSel.appendChild(document.createTextNode(itemName));
      row.appendChild(iPri);
      iPri.appendChild(document.createTextNode(selItemPri));
      priceChart.appendChild(row); 
      }
      else
      break;
     break;
    case  'Paper':
    selItemPri= Paper;  
    if( selItemPri > 0)
    {
    itemName ='Paper';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else
    break;
    break;
    case  'Book':
    
    selItemPri= Book;  
    if( selItemPri > 0)
    {
    itemName ='Book';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else
    break;
    break;
    case  'Steel':
   
    selItemPri= Steel;  
    if( selItemPri > 0)
    {
    itemName ='Steel';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else
    break;
    break;
    case 'Copper': 
   
    selItemPri= Copper;
    if( selItemPri > 0)
    {
    itemName ='Copper';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else  
    break;
    break;
    case 'Glass': 
   
    selItemPri= Glass; 
    if( selItemPri > 0)
    {
    itemName ='Glass';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else 
    break;
    break;
    case 'Aluminium': 
   
    selItemPri= Aluminium;  
    if( selItemPri > 0)
    {
    itemName ='Aluminium';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else
    break;
    case 'Battery': 
  
    selItemPri= Battery;  
    if( selItemPri > 0)
    {
    itemName ='Battery';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else
    break;
    break;
    case  'Wood' : 
   
    selItemPri= WoodItems;
    if( selItemPri > 0)
    {
    itemName ='Wood';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else 
    break; 
    break;
    case  'Wire': 
    selItemPri= Wire;  
    if( selItemPri > 0)
    {
    itemName ='Wire';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else
    break;
    break;
    case  'Electrical':
    selItemPri= Electrical; 
    if( selItemPri > 0)
    {
    itemName ='Electrical';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else 
    break;
    break;
    case  'Antique' : 

    selItemPri= Antique;  
    if( selItemPri > 0)
    {
    itemName ='Antique';
    console.log(selItemPri);
    var row = document.createElement("tr");
    var iSel = document.createElement('td');
    var iPri = document.createElement('td');
    row.appendChild(iSel);
    iSel.appendChild(document.createTextNode(itemName));
    row.appendChild(iPri);
    iPri.appendChild(document.createTextNode(selItemPri));
    priceChart.appendChild(row); 
    }
    else
    break;
    break;
}  
}
}
.peekDealer select{
    width: 20rem;
} 
.table{
    display: flex;
}
.dropbtn {
    background-color: #4c66af;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
      background-color: #42b396;
    color: black;
    padding: 20px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }
  
  .dropdown-content a:hover {background-color: rgb(122, 87, 187);}
  
  .dropdown:hover .dropdown-content {display: block;}
  
  .dropdown:hover .dropbtn {background-color: #42b396;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section onload="showDealer()">
     <div class="selDealer">
      <div class="showLocation">
      <h2>Your Current Address is:</h2>
      <p><span id="zipCode" contenteditable="true" ></span></p>
      </div>
      <div class="peekDealer">
        <h2>Select a Dealer:</h2>
        <div class="dropdown">
          <button class="dropbtn" >Select Dealer</button>
          <div class="dropdown-content"  onclick="myFunction()">
          <a id="DealerList"></a>
          </div>
        </div>
     
      </div>
     </div>
   </section>
   <section class="priList">
    <table >     
      <thead id="headerPrice"></thead>
      <tbody  class="tablePrice" id="priceChart"> </tbody>
      </table>
    </section>

html jquery javascript
1 Answers

A problem with your code is that information is added to existing items. In order to be able to format the result the way you want, you need to create new elements and direct the content to the new elements.

This code creates a new table with its own "thead" and "tbody" elements each time you press the button.

I added the following lines to your code. I have marked the new lines in the code with a comment.

var wrap = document.getElementsByClassName('priList')[0];
var newTable = document.createElement('table');
var headerPrice = document.createElement('thead');

wrap.appendChild(newTable);
newTable.appendChild(headerPrice);

var priceChart = document.createElement('tbody');
newTable.appendChild(priceChart);

Result Example:

var pinCode = 814112;
var Dealers = ["Ramesh", "Suresh", "Mukesh", "Hitesh",
    "Barjesh", "Bhupesh"];

$("#zipCode").text(pinCode);
// script to append dealerList     
function showDealer() {
    for (var i = 0; i < Dealers.length; i++) {
        $("#DealerList").append('<option>' + Dealers[i] + '</option>');
    }
}

var spans = $("#zipCode"), index, span;
for (index = 0; index < spans.length; ++index) {
    span = spans[index];
    if (span.contentEditable) {
        span.onblur = function () {
            var text = this.innerHTML;
            pinCode = text.replace(/&/g, "&amp").replace(/</g, "&lt;");
            console.log(pinCode);
        };
    }
}

var scrapI = ["Plastic", "Paper ", "Book", "Steel", "Wood Items", "Wire", "Electrical", "Copper", "Glass", " Aluminium", "Battery", "Antique"];
var Plastic = 10;
var Paper = 14;
var Book = 17;
var Steel = 0;
var WoodItems = 34;
var Wire = 28;
var Electrical = 33;
var Copper = 39;
var Glass = 13;
var Aluminium = 51;
var Battery = 69;
var Antique = 101;
var selItemPri;
// console.log(scrapI);

// append price data
function myFunction() {
    var row = document.createElement("tbody");
    var sItem = document.createElement('th');
    var pRate = document.createElement('th');
    row.appendChild(sItem);
    sItem.appendChild(document.createTextNode("Scrap Item"));
    row.appendChild(pRate);
    pRate.appendChild(document.createTextNode("Price Value"));


    /////////////////////////////////////////////////////
    // START NEW LINES
    var wrap = document.getElementsByClassName('priList')[0];
    var newTable = document.createElement('table');
    var headerPrice = document.createElement('thead');

    wrap.appendChild(newTable);
    newTable.appendChild(headerPrice);

    var priceChart = document.createElement('tbody');
    newTable.appendChild(priceChart);
    // END NEW LINES
    /////////////////////////////////////////////////////


    headerPrice.appendChild(row);
    for (let i = 0; i < scrapI.length; i++) {
        var itemName = scrapI[i];
        switch (itemName) {
            case 'Plastic':
                selItemPri = Plastic;
                if (selItemPri > 0) {
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Paper':
                selItemPri = Paper;
                if (selItemPri > 0) {
                    itemName = 'Paper';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Book':

                selItemPri = Book;
                if (selItemPri > 0) {
                    itemName = 'Book';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Steel':

                selItemPri = Steel;
                if (selItemPri > 0) {
                    itemName = 'Steel';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Copper':

                selItemPri = Copper;
                if (selItemPri > 0) {
                    itemName = 'Copper';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Glass':

                selItemPri = Glass;
                if (selItemPri > 0) {
                    itemName = 'Glass';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Aluminium':

                selItemPri = Aluminium;
                if (selItemPri > 0) {
                    itemName = 'Aluminium';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
            case 'Battery':

                selItemPri = Battery;
                if (selItemPri > 0) {
                    itemName = 'Battery';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Wood':

                selItemPri = WoodItems;
                if (selItemPri > 0) {
                    itemName = 'Wood';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Wire':
                selItemPri = Wire;
                if (selItemPri > 0) {
                    itemName = 'Wire';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Electrical':
                selItemPri = Electrical;
                if (selItemPri > 0) {
                    itemName = 'Electrical';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
            case 'Antique':

                selItemPri = Antique;
                if (selItemPri > 0) {
                    itemName = 'Antique';
                    console.log(selItemPri);
                    var row = document.createElement("tr");
                    var iSel = document.createElement('td');
                    var iPri = document.createElement('td');
                    row.appendChild(iSel);
                    iSel.appendChild(document.createTextNode(itemName));
                    row.appendChild(iPri);
                    iPri.appendChild(document.createTextNode(selItemPri));
                    priceChart.appendChild(row);
                }
                else
                    break;
                break;
        }
    }
}
.peekDealer select {
    width: 20rem;
}

.table {
    display: flex;
}

.dropbtn {
    background-color: #4c66af;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    background-color: #42b396;
    color: black;
    padding: 20px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.dropdown-content a:hover {
    background-color: rgb(122, 87, 187);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #42b396;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section onload="showDealer()">
    <div class="selDealer">
        <div class="showLocation">
            <h2>Your Current Address is:</h2>
            <p><span id="zipCode" contenteditable="true"></span></p>
        </div>
        <div class="peekDealer">
            <h2>Select a Dealer:</h2>
            <div class="dropdown">
                <button class="dropbtn">Select Dealer</button>
                <div class="dropdown-content" onclick="myFunction()">
                    <a id="DealerList"></a>
                </div>
            </div>

        </div>
    </div>
</section>
<section class="priList">
    <!-- 
    <table>
        <thead id="headerPrice"></thead>
        <tbody class="tablePrice" id="priceChart"> </tbody>
    </table> 
    -->
</section>

user_109681340
Related