content logo

Bootstrap Tables:

Bootstrap Table Codes with Add and Remove Options

In some advanced websites, the administrations try to contact the audience and gain information. If you like to add this feature to your website, pay attention to this post carefully. We have placed the Bootstrap Table Codes with Add and Remove Options with incredible performance here. These Bootstrap Table Codes allow the website’s owner to add needed information about the audience and mention all these data in a row category. Using these Bootstrap Table Options helps you to organize your website regularly.

By looking at this preview, you understand that the following code contains four parts for the first name, last name, email address, and telephone number that audiences easily write. This information is placed in some fields with white backgrounds. The represented code has different rows, and they are separated with some lines. If you like to add a row, you can press the plus icon at the top right of the page. This Bootstrap Table Add Row icon is placed in a light gray field. You can also remove a row by pressing the negative icon on the right side. This part is presented in a red field in this Bootstrap Table Remove Row.

#

Bootstrap Table Codes

#

Bootstrap Table Add Row

#

Bootstrap Table Remove Row

#

Bootstrap Table Options

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <h2>simple GRID</h2>
    </div>
    <div class="row">
        <h3 class="text-center text-primary">Persons</h3>
        <div class="col-md-12">
            <table class="table table-hover" id="worked">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Telephone</th>
                        <th>
                            <button type="button" class="btn btn-blue add-row">+</button>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
$(function () { $('#worked .add-row').click(function () { var template = '<tr><td><input class="form-control" type="text" /></td><td><input class="form-control" type="text" /></td><td><input class="form-control" type="text" /></td><td><input class="form-control" type="text" /></td><td><button type="button" class="btn btn-danger delete-row">-</button></td></tr>';
$('#worked tbody').append(template); }); $('#worked').on('click', '.delete-row', function () { $(this).parent().parent().remove(); }); })
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <h2>simple GRID</h2>
    </div>
    <div class="row">
        <h3 class="text-center text-primary">Persons</h3>
        <div class="col-md-12">
            <table class="table table-hover" id="worked">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Telephone</th>
                        <th>
                            <button type="button" class="btn btn-blue add-row">+</button>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <input class="form-control" type="text" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(function () { $('#worked .add-row').click(function () { var template = '<tr><td><input class="form-control" type="text" /></td><td><input class="form-control" type="text" /></td><td><input class="form-control" type="text" /></td><td><input class="form-control" type="text" /></td><td><button type="button" class="btn btn-danger delete-row">-</button></td></tr>';
$('#worked tbody').append(template); }); $('#worked').on('click', '.delete-row', function () { $(this).parent().parent().remove(); }); })
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
Preview