how to remove row and add css class when button clicked

Question

here is the fiddle

https://jsfiddle.net/shaswatatripathy/enq0kfqL/2/

how to write the remove function and how to add a css class to a row which is clicked .

1.when i click remove the clicked row should get removed

2. when i click the row - row should get highlightrow css class attached

3. also have to check if the table has any rows or not and put it in a var

4. at a time only one row should be in red (clicked row) if no row is selected the remove button should not be visible

   HTML

   col1header col2header

CSS

.visibilityHide {
    visibility: hidden;

}
.highlightRow{
  color:red;
}
table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

JS or Jquery

function add()
{var addRow1;
 var addRow2;
addRow1 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow1" + "</td><td>" + "col2valuerow1" + "</td></tr>";
addRow2 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow2" + "</td><td>" + "col2valuerow2" + "</td></tr>";
                $("#myTableid tbody").append(addRow1);
                 $("#myTableid tbody").append(addRow2);

}


function remove()
{

}

function getdetails(row)
{
$('#removerow').css('visibility', 'visible');

}

Answer 1

This is the updated javascript code. This will meet all your requirements.

function add()
{
    var addRow1;
    var addRow2;
    addRow1 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow1" + "</td><td>" + "col2valuerow1" + "</td></tr>";
    addRow2 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow2" + "</td><td>" + "col2valuerow2" + "</td></tr>";
    $("#myTableid tbody").append(addRow1);
    $("#myTableid tbody").append(addRow2);

}


function remove()
{
    $(".highlightRow").remove();
    $('#removerow').addClass('visibilityHide');
    $("#dropDown").prop("disabled", $("#myTableid tbody tr").length > 0);
}

function getdetails(row)
{
    $('#removerow').toggleClass('visibilityHide', $("#myTableid tbody tr").length === 0);
    $(".highlightRow").removeClass("highlightRow");
    $(row).addClass("highlightRow");
}

Answer 2

Try this one. if it'll work

 function add(){ var addRow1; var addRow2; addRow1 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow1" + "</td><td>" + "col2valuerow1" + "</td></tr>"; addRow2 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow2" + "</td><td>" + "col2valuerow2" + "</td></tr>"; $("#myTableid tbody").append(addRow1); $("#myTableid tbody").append(addRow2); } function remove(){ $('.removeClass').remove(); //remove clicked row if($('table tbody tr').length <=0){ $('#removerow').hide(); } if($('table tbody tr').length===0) { alert('This last child has been removed'); $("#dropDown").prop("disabled", false); } } function getdetails(row){ $('#removerow').show(); $(row).addClass('removeClass'); //add class on clicked row } 

 .highlightRow{ color:red; } table { border-collapse: collapse; } table, th, td { border: 1px solid black; } /* styling for added class so that it looks something different when class added */ .removeClass{ color:red; } #removerow { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table id="myTableid"> <thead> <th> col1header </th> <th> col2header </th> </thead> <tbody> </tbody> </table> <input type="button" id ="addrows" value="add" onclick="add()" /> <input type="button" id="removerow" value="remove" onclick="remove()" class="visibilityHide" /> 

Checking if the row is the last one is this part of the code

if($('table tbody tr').length==0) {
    alert('This last child has been removed');
    $("#dropDown").prop("disabled", false);
}

Answer 3

Do it like below (All solutions what you asked for):-

 function add(){ var addRow1; var addRow2; addRow1 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow1" + "</td><td>" + "col2valuerow1" + "</td></tr>"; addRow2 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow2" + "</td><td>" + "col2valuerow2" + "</td></tr>"; $("#myTableid tbody").append(addRow1); $("#myTableid tbody").append(addRow2); } function remove(){ var index = parseInt($('.removeClass').index())+1; $('.removeClass').remove(); //remove clicked row $('.removed_row').html("<strong>row number "+index+ " removed</strong>"); if($('table tbody tr').length <=0){ $('#removerow').hide(); } } function getdetails(row){ $('#removerow').css('display', 'block'); $('.removeClass').removeClass('removeClass'); $(row).addClass('removeClass'); //add class on clicked row } 

 .visibilityHide { display: none; } .highlightRow{ color:red; } table { border-collapse: collapse; } table, th, td { border: 1px solid black; } /* styling for added class so that it looks something different when class added */ .removeClass{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTableid"> <thead> <th> col1header </th> <th> col2header </th> </thead> <tbody> </tbody> </table> <input type="button" id ="addrows" value="add" onclick="add()" /> <input type="button" id="removerow" value="remove" onclick="remove()" class="visibilityHide" /> <br> <br> <br> <div class="removed_row"></div> 

Answer 4

You can check the answer in my update:

function remove()
{
window.selectedRow.remove();
$('#removerow').css('visibility', 'hidden');
}

function getdetails(row)
{
removeHighlights();
window.selectedRow = row;
row.classList.add("highlightRow");
$('#removerow').css('visibility', 'visible');

}

function removeHighlights() {
var elements = document.getElementsByClassName("highlightRow");
while(elements.length > 0){
    elements[0].classList.remove('highlightRow');
}
}

https://jsfiddle.net/g63zpuuz/