Is it possible to change the background of the entire row in an html table when only one cell is sel-CodePudding

I would like to be able to distinguish the row of the cell which a user has selected in the html table.

Is there a way to do that with Css and styles or do I need to program it with JQuery and JavaScript?

For example the user may click on the BA cell in the first row. After that I want the background of the first row be light blue.

example screenshot

var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
$('.table-add').click(function() {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('table').append($clone);
});
$('.table-remove').click(function() {
  $(this).parents('tr').detach();
});
$('.table-up').click(function() {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return;
  $row.prev().before($row.get(0));
});
$('.table-down').click(function() {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function() {
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];
  $($rows.shift()).find('th:not(:empty)').each(function() {
    headers.push($(this).text().toLowerCase());
  });
  $rows.each(function() {
    var $td = $(this).find('td');
    var h = {};
    headers.forEach(function(header, i) {
      h[header] = $td.eq(i).text();
    });
    data.push(h);
  });
});

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
  font-family: 'Montserrat', sans-serif;
  padding: 0;
  margin: 0;
  text-align: center;
}

h1 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

tr:nth-of-type(odd) {
  background: #eee;
}

th {
  background: #3498db;
  color: white;
  font-weight: bold;
}

@import "compass/css3";
.table-editable {
  position: relative;
  .glyphicon {
    font-size: 20px;
  }
}

table {
  width: 750px;
  border-collapse: collapse;
  margin: 50px auto;
}

td,
th {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 18px;
}

.table-remove {
  color: #700;
  cursor: pointer;
  &:hover {
    color: #f00;
  }
}

.table-up {
  color: #007;
  cursor: pointer;
  &:hover {
    color: #00f;
  }
}

.table-down {
  color: #007;
  cursor: pointer;
  &:hover {
    color: #00f;
  }
}

.table-add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;
  &:hover {
    color: #0b0;
  }
}

<! DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title> JavaScript editable table </title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>

</style>

<body>
  <div >
    <h1> JavaScript Editable Table </h1>
    <div id="table" >
      <table >
        <tr>
          <th> Name</th>
          <th> Roll No </th>
          <th> Class </th>
          <th> Marks </th>
        </tr>
        <tr>
          <td contenteditable="true"> Ram </td>
          <td contenteditable="true"> 1 </td>
          <td contenteditable="true"> BA </td>
          <td contenteditable="true"> 48 </td>
        </tr>
        <tr>
          <td contenteditable="true"> Rama </td>
          <td contenteditable="true"> 10 </td>
          <td contenteditable="true"> BSC </td>
          <td contenteditable="true"> 40 </td>
        </tr>
        <tr>
          <td contenteditable="true"> sham </td>
          <td contenteditable="true"> 8 </td>
          <td contenteditable="true"> BCA </td>
          <td contenteditable="true"> 34 </td>
        </tr>
        <tr>
          <td contenteditable="true"> shama </td>
          <td contenteditable="true"> 3 </td>
          <td contenteditable="true"> BCA </td>
          <td contenteditable="true"> 30 </td>
        </tr>
      </table>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
</body>

</html>

CodePudding user response：

By adding the following code in the style ,with use of has, the selected row would be shown in different color. There is no need for having jquery or javascript code.

tr:has(td:focus-visible) {
 background-color: aquamarine;
}

CodePudding user response：

jquery implement a has selector that you select all parent that has a specific child attribute

$('td[contenteditable="true"]').click(function() {
  $( "tr" ).has('td[contenteditable="true"]').removeClass('selected');
  $( "tr" ).has('td[contenteditable="true"]:focus').addClass('selected');
});

the selector to select the td that have the focus is td[contenteditable="true"]:focus

var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
$('.table-add').click(function() {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('table').append($clone);
});
$('.table-remove').click(function() {
  $(this).parents('tr').detach();
});
$('.table-up').click(function() {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return;
  $row.prev().before($row.get(0));
});
$('.table-down').click(function() {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function() {
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];
  $($rows.shift()).find('th:not(:empty)').each(function() {
    headers.push($(this).text().toLowerCase());
  });
  $rows.each(function() {
    var $td = $(this).find('td');
    var h = {};
    headers.forEach(function(header, i) {
      h[header] = $td.eq(i).text();
    });
    data.push(h);
  });
});


$('td[contenteditable="true"]').click(function() {
  $( "tr" ).has('td[contenteditable="true"]').removeClass('selected');
  $( "tr" ).has('td[contenteditable="true"]:focus').addClass('selected');
});

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
  font-family: 'Montserrat', sans-serif;
  padding: 0;
  margin: 0;
  text-align: center;
}

h1 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

tr:nth-of-type(odd) {
  background: #eee;
}

.selected {
  background-color: red !important;
}

th {
  background: #3498db;
  color: white;
  font-weight: bold;
}

.table-editable {
  position: relative;
  .glyphicon {
    font-size: 20px;
  }
}

table {
  width: 750px;
  border-collapse: collapse;
  margin: 50px auto;
}


td,
th {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 18px;
}

.table-remove {
  color: #700;
  cursor: pointer;
  &:hover {
    color: #f00;
  }
}

.table-up {
  color: #007;
  cursor: pointer;
  &:hover {
    color: #00f;
  }
}

.table-down {
  color: #007;
  cursor: pointer;
  &:hover {
    color: #00f;
  }
}

.table-add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;
  &:hover {
    color: #0b0;
  }
}

<! DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title> JavaScript editable table </title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>

</style>

<body>
  <div >
    <h1> JavaScript Editable Table </h1>
    <div id="table" >
      <table >
        <tr>
          <th> Name</th>
          <th> Roll No </th>
          <th> Class </th>
          <th> Marks </th>
        </tr>
        <tr>
          <td contenteditable="true"> Ram </td>
          <td contenteditable="true"> 1 </td>
          <td contenteditable="true"> BA </td>
          <td contenteditable="true"> 48 </td>
        </tr>
        <tr>
          <td contenteditable="true"> Rama </td>
          <td contenteditable="true"> 10 </td>
          <td contenteditable="true"> BSC </td>
          <td contenteditable="true"> 40 </td>
        </tr>
        <tr>
          <td contenteditable="true"> sham </td>
          <td contenteditable="true"> 8 </td>
          <td contenteditable="true"> BCA </td>
          <td contenteditable="true"> 34 </td>
        </tr>
        <tr>
          <td contenteditable="true"> shama </td>
          <td contenteditable="true"> 3 </td>
          <td contenteditable="true"> BCA </td>
          <td contenteditable="true"> 30 </td>
        </tr>
      </table>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
</body>

</html>