JSFiddle - React, Tailwind, and code Playground

by Suprotim Agarwal

HTML

<h2>Add New Rows in a Table and Delete Existing Ones</h2>
<table id="someTable">
    <thead>
        <tr>
            <th class="empid">EmpId</th>
            <th class="fname">First Name</th>
            <th class="lname">Last Name</th>
            <th class="email">Email</th>
            <th class="age">Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="empid">E342</td>
            <td class="fname">Bill</td>
            <td class="lname">Evans</td>
            <td class="email">[email protected]</td>
            <td class="age">35</td>
        </tr>
        <tr>
            <td class="empid">E343</td>
            <td class="fname">Laura</td>
            <td class="lname">Matt</td>
            <td class="email">[email protected]</td>
            <td class="age">26</td>
        </tr>
        <tr>
            <td class="empid">E344</td>
            <td class="fname">Ram</td>
            <td class="lname">Kumar</td>
            <td class="email">[email protected]</td>
            <td class="age">56</td>
        </tr>
        <tr>
            <td class="empid">E345</td>
            <td class="fname">Yuri</td>
            <td class="lname">Gagrin</td>
            <td class="email">[email protected]</td>
            <td class="age">39</td>
        </tr>
        <tr>
            <td class="empid">E340</td>
            <td class="fname">Asha</td>
            <td class="lname">Singh</td>
            <td class="email">[email protected]</td>
            <td class="age">42</td>
        </tr>
    </tbody>
</table>

CSS

.highlite{  
    font-weight: bold;
    color: #0a9600 !important; 
}

/* Css for table obtained from http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ */

#someTable
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 13px;
	margin: 45px 0 0 5px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}

#someTable th
{
	font-size: 14px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: #039;
}

#someTable td
{
	padding: 8px;
	background: #e8edff; 
	border-bottom: 1px solid #fff;
	border-top: 1px solid transparent;
}

#someTable tr:hover td
{
	background: #d0dafd;
	color: #339;
}

#btn {
    margin: 10px 0 0 45px ;
}

p#result {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 13px;
    margin: 10px 0 0 45px ;
}

.jumpRow {
    background-color: red;
}

JavaScript

// To use this example, uncomment blocks of code 
// one at a time and hit 'RUN' (Ctrl + Return)

// add new row as last row
//newRow = "<tr>" +
//    "<td class='empid'>E333</td>" +
//    "<td class='fname'>Fujita</td>" +
//    "<td class='lname'>Makoto</td>" +
//    "<td class='email'>[email protected]</td>" +
//    "<td class='age'>52</td>" +
//"</tr>";
//$('#someTable > tbody > tr:last').after(newRow);


//add a new row 
// **begin example**
//var index = 2;
//newRow = "<tr>" +
//                "<td class='empid'>E333</td>" +
//                "<td class='fname'>Fujita</td>" +
//                "<td class='lname'>Makoto</td>" +
//                "<td class='email'>[email protected]</td>" + 
//                "<td class='age'>52</td>" + 
//            "</tr>";
//$('#someTable > tbody > tr').eq(index-1).before(newRow); // inserts as 2nd row
// **end of example**

// remove all rows except header
// $('#someTable tbody tr').remove();
// $('#someTable tr:gt(0)').remove();
//$('#someTable tr').slice(1).remove();

// delete a row by clicking on it
//$('#someTable tbody tr').on("click", function () {
//    $(this).remove();
//    return false;
//});

// delete all rows by clicking on it except one
// var $tbl = $('#someTable tbody tr'); // cache
// var ctr = $tbl.length;
                
/* $tbl.on("click", function () {
    if (ctr == 1) {
        alert('your table should have atleast one row')
    } else {
        $(this).remove();
        ctr--;
        return false;
    }                
}); */

// if each row has a delete button
//$('#someTable').on('click', 'input[type="button"]', function (e) {
//    $(this).closest('tr').remove()
//})