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

how to create table row in javascript

PanosG answered on February 21, 2022 Popularity 9/10 Helpfulness 6/10

answer how to create table row in javascript

related javascript add table row

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 html javascript row

Link to this answer
Share Copy Link

Contributed on Feb 21 2022

PanosG

0 Answers Avg Quality 2/10

Closely Related Answers

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

Link to this answer
Share Copy Link

Contributed on May 22 2023

Readul Ahmed

0 Answers Avg Quality 2/10

how to create table row in javascript

Contents

More Related Answers

how to create table row in javascript

Closely Related Answers

javascript add table row

Grepper

Documentation

Social

Legal

Contact

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