How To Become A Programmer Without A Degree & Experience

How to Add, Remove, and Sort Table Rows Dynamically using jQuery

How to Add Remove Sort Table Rows Dynamically using jQuery




In this video, I’m going to share how to:

  • Add table rows (input fields) dynamically.
  • Remove table rows.
  • Use jQuery UI Sortable.
  • Get multiple text input values.

I’ve implemented this kind of function many times, so I’m sure it’s worth knowing about this.

Hope you enjoy 🙂



Browser: Google Chrome
Text Editor: Coda2


Sample Code

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <link rel="stylesheet" href="">
        .container {
            width: 500px;
            margin: 100px auto;
        input {
            width: 300px;
            font-size: 18px;
            margin: 10px;
            padding: 10px;
        .remove {
            width: 30px;
            height: 30px;
            font-size: 20px;
            background-color: tomato;
            color: white;
            border: none;
            border-radius: 15px;
        #addRow, #getValues {
            width: 130px;
            height: 40px;
            font-size: 16px;
            background-color: lightseagreen;
            color: white;
            border: none;
            margin: 20px;
        button:hover {
            cursor: pointer;
        tr:hover {
            cursor: move;
<div class="container">
                <td><input type="text" name="name"></td>
                <td><button class="remove">-</button></td>
                <td><input type="text" name="name"></td>
                <td><button class="remove">-</button></td>
    <button id="addRow">+ Add</button>
    <button id="getValues">Get Values</button>

<script src=""></script>
<script src=""></script>
var html = '<tr><td><input type="text" name="name"></td><td><button class="remove">-</button></td></tr>';

$(function() {


    $(document).on('click', '.remove', function() {

        var values = [];
        $('input[name="name"]').each(function(i, elem){
        alert(values.join(', '));