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

parsing a TypeScript query

Using Javascript to Trigger Events on Selection

Updating the text box's font color to its original black shade

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

An issue has occurred: TypeError - It is impossible to access the 'forEach' property of an undefined object

Contrast between the functionalities of $.ajax and $.post

Increase transparency of scrollbar background

Arranging a JSON Object Array in JavaScript by its alphanumeric key attribute order

Using information retrieved from a JSON response

Utilize Bootstrap to position the button right next to the input field

Obtain a multiline match using regular expressions

Ways to implement border spacing using CSS

What is the best way to pass an array as a parameter in Angular?

Press the designated button located within a table's td element to retrieve the values of adjacent td elements

Submitting an AJAX request to upload an XML file and an image file simultaneously in one call

Is there a way to incorporate the MUI theme color into inline styles?

Using Ember's transitionTo method and setting a controller attribute within a callback

Serialize a series of select boxes to optimize for AJAX POST requests

Execute scroll to top animation but without utilizing $('html,body').animate({scrollTop: 0}, 'slow')

Display a portion of the existing URL as a clickable link on the webpage using JavaScript or PHP