Implementing functionality: Removing a row and applying a CSS class upon button click

Question

Implementing functionality: Removing a row and applying a CSS class upon button click

Check out the fiddle below:

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

I need help with creating a remove function and adding a CSS class to a clicked row.

1. When I click on "remove", the clicked row should be deleted.

When I click on a row, it should be highlighted with a 'highlightRow' CSS class
I also need to check if there are any rows in the table and store that information in a variable
Only one row at a time should be highlighted 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');
}

javascript jquery html css

Answer 1

Answer №1

Here is the updated javascript snippet that fulfills 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

Here is the updated javascript snippet that fulfills 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 3

Answer №2

Give this a try and see if it works:

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;
}
.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" />

To determine if the row is the last one, check this part of the code:

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

Answer 4

Give this a try and see if it works:

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;
}
.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" />

To determine if the row is the last one, check this part of the code:

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

Answer 5

Answer №3

Follow the steps below for all the solutions you need: -

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;
}
/* style added for a different look when the class is 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 6

Follow the steps below for all the solutions you need: -

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;
}
/* style added for a different look when the class is 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 7

Answer №4

To see the solution, please refer to my latest update:

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

const getDetails = (row) => {
    removeHighlights();
    window.selectedRow = row;
    row.classList.add("highlightRow");
    $('#removerow').css('visibility', 'visible');
}

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

https://jsfiddle.net/g63zpuuz/

Answer 8

To see the solution, please refer to my latest update:

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

const getDetails = (row) => {
    removeHighlights();
    window.selectedRow = row;
    row.classList.add("highlightRow");
    $('#removerow').css('visibility', 'visible');
}

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

https://jsfiddle.net/g63zpuuz/

Implementing functionality: Removing a row and applying a CSS class upon button click

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the functionality of the post method in PHP?

padding applied exclusively to the Bootstrap column when viewed on a large grid

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

Asp.Net Core Ajax issue: Pagnation not refreshing the target

How come my Bootstrap container columns are not remaining evenly divided into four parts?

The firebase collection's model doesn't include an add function within its nested collection

Understanding page navigation in PHP

Strategies for resolving a mix of different data types within a single parameter

Accessing JSON data model from Ember route or controller

Looking for a way to add a permanent footer to the bottom of your webpage without affecting the tab order for accessibility?

I can't seem to get the dropdown list to appear. What could be the issue?

Utilize jQuery to toggle classes on and off for anchor elements within list items in an unordered

Find the mean of three numbers stored in an array of objects

Issue with ISO-8859-1 character encoding in table formatting

Utilize Ajax and Nodejs to inject dynamic content into your webpage

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Is it possible to generate a basic HTML page using Express JS without utilizing Ejs or any other templating engine

The SVG syntax underwent alterations following its transmission via email

Spread out the items within an inline block

issue with the submit button due to non-functional base64 encoded image