jQuery addClass example

Change class name on click in jQuery

by Ben Watts

HTML

<table>
<thead>
    <tr>Firstname</tr>
    <tr>Surname</tr>
    <tr>Title</tr>
    <tr>Phonenumber</tr>
</thead>
<tbody>
    <tr>
        <td>Template 1</td>
        <td>Template 2</td>
        <td>Template 3</td>
        <td>Template 4</td>
    </tr>
</tbody>
</table>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var virtualDom = {};

$('tbody')[0].innerHtml = "";
for(var i = 0; i < 1000; i++)
{
	$('tbody').html($('tbody').html() + '<tr class="row"><td>'+ i +'</td><td>'+ i +'</td><td>'+ i +'</td><td>'+ i +'</td></tr>'); 
}

$('.row').each(function(i, e)
{
	$(e).find('td').first().html('new');
});

$('tbody')[0].innerHtml = "Hello World";