Breaking News: Grepper is joining You.com. Read the official announcement!

javascript add table row

Add Answer

Readul Ahmed answered on February 21, 2022 Popularity 9/10 Helpfulness 1/10

answer javascript add table row

related how to create table row in javascript

javascript add table row

Comment

-1

 // css 
 
  body {
     background-color: #f9f9fa
 }

 .flex {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 auto;
     flex: 1 1 auto
 }

 @media (max-width:991.98px) {
     .padding {
         padding: 1.5rem
     }
 }

 @media (max-width:767.98px) {
     .padding {
         padding: 1rem
     }
 }

 .padding {
     padding: 5rem
 }

 .card {
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     -ms-box-shadow: none
 }

 .pl-3,
 .px-3 {
     padding-left: 1rem !important
 }

 .card {
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-color: #fff;
     background-clip: border-box;
     border: 1px solid #d2d2dc;
     border-radius: 0
 }

 .card .card-title {
     color: #000000;
     margin-bottom: 0.625rem;
     font-size: 0.875rem;
     font-weight: 500
 }

 .card .card-description {
     margin-bottom: .875rem;
     font-weight: 400;
     color: #76838f
 }

 p {
     font-size: 0.875rem;
     margin-bottom: .5rem;
     line-height: 1.5rem
 }

 .table-responsive {
     display: block;
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: -ms-autohiding-scrollbar
 }

 .table,
 .jsgrid .jsgrid-table {
     width: 100%;
     max-width: 100%;
     margin-bottom: 1rem;
     background-color: transparent
 }

 .table thead th,
 .jsgrid .jsgrid-table thead th {
     border-top: 0;
     border-bottom-width: 1px;
     font-weight: 500;
     font-size: .875rem;
     text-transform: uppercase
 }

 .table td,
 .jsgrid .jsgrid-table td {
     font-size: 0.875rem;
     padding: .475rem 0.4375rem
 }

 .mt-10 {
     padding: 0.875rem 0.3375rem !important
 }

 button {
     outline: 0 !important
 }

 .form-control:focus {
     box-shadow: 0 0 0 0rem rgba(0, 123, 255, .25) !important
 }

 .badge {
     border-radius: 0;
     font-size: 12px;
     line-height: 1;
     padding: .375rem .5625rem;
     font-weight: normal;
     border: none
 }
 
 // html 
 <div class="page-content page-container" id="page-content">
     <div class="padding">
         <div class="row container d-flex justify-content-center">
             <div class="col-lg-8 grid-margin stretch-card">
                 <div class="card">
                     <div class="card-body">
                         <h4 class="card-title text-center">Add and remove row in table using jquery</h4>
                         <hr>
                         <div class="table-responsive">
                             <table id="faqs" class="table table-hover">
                                 <thead>
                                     <tr>
                                         <th>User</th>
                                         <th>Product</th>
                                         <th>Sale</th>
                                         <th>Status</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     <tr>
                                         <td><input type="text" class="form-control" placeholder="User name"></td>
                                         <td><input type="text" placeholder="Product name" class="form-control"></td>
                                         <td class="text-warning mt-10"> 18.76% <i class="fa fa-arrow-up"></i></td>
                                         <td class="mt-10"><button class="badge badge-danger"><i class="fa fa-trash"></i> Delete</button></td>
                                     </tr>
                                 </tbody>
                             </table>
                         </div>
                         <div class="text-center"><button onclick="addfaqs();" class="badge badge-success"><i class="fa fa-plus"></i> ADD NEW</button></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
 
 
 
 
 // js
 
<script>

                            var faqs_row = 0;
function addfaqs() {
html = '<tr id="faqs-row' + faqs_row + '">';
    html += '<td><input type="text" class="form-control" placeholder="User name"></td>';
    html += '<td><input type="text" placeholder="Product name" class="form-control"></td>';
    html += '<td class="text-danger mt-10"> 18.76% <i class="fa fa-arrow-down"></i></td>';
    html += '<td class="mt-10"><button class="badge badge-danger" onclick="$(\'#faqs-row' + faqs_row + '\').remove();"><i class="fa fa-trash"></i> Delete</button></td>';

    html += '</tr>';

$('#faqs tbody').append(html);

faqs_row++;
}
                           
</script>

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: add javascript row

Link to this answer
Share Copy Link

Contributed on May 22 2023

Readul Ahmed

0 Answers Avg Quality 2/10

Closely Related Answers

how to create table row in javascript

Comment

<script>
  function AddRow(){
	const tableElement = document.getElementById('table')

	const newRow = '<tr><td>new Row</td></tr>'

	tableElement.innerHTML+=newRow
    //OR
    
    // Add a single row element with `tableElemenet.appendChild('tr')`
    
  }
</script>
<button onclick='AddRow()'>Add Row</button>
<table id='table'>
  <tr><td>row1</td></tr>
</table>

Popularity 9/10 Helpfulness 6/10 Language html

Source: Grepper

Tags: create-table create-tab

Link to this answer
Share Copy Link

Contributed on Feb 21 2022

PanosG

0 Answers Avg Quality 2/10

javascript add table row

Contents

More Related Answers

javascript add table row

Closely Related Answers

how to create table row in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.