Table & Dialog with Data Tags

Example of populating a single Modal Dialog with data from table rows using the "data" attributes. Modal implementation excluded.

by BenjaminRay

HTML

<table class="outage-list">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr data-outage-id="1" data-outage-email="[email protected]" data-outage-desc="Description of outage 1">
      <td><a href="#">ID 2</a></td>
      <td>Outage 1</td>
    </tr>
    <tr data-outage-id="2" data-outage-email="[email protected]" data-outage-desc="Description of outage 2">
      <td><a href="#">ID 2</a></td>
      <td>Outage 2</td>
    </tr>
    <tr data-outage-id="3" data-outage-email="[email protected]" data-outage-desc="Description of outage 3">
      <td><a href="#">ID 3</a></td>
      <td>Outage 3</td>
    </tr>
  </tbody>
</table>

<div id="fake-dialog">
  <h3>Details for Outage # <span class="val-outage-id"></span></h3>
  <table>
    <tr>
      <td class="lbl">ID:</td>
      <td class="val-outage-id"></td>
    </tr>
    <tr>
      <td class="lbl">Email:</td>
      <td class="val-outage-email"></td>
    </tr>
    <tr>
      <td class="lbl">Description:</td>
      <td class="val-outage-desc"></td>
    </tr>
  </table>
</div>

CSS

body {
  font-family: arial;
  font-size: 14px;
  padding: 20px;
}
h3 {
  font-size: 22px;
  border-bottom: 1px solid #ddf;
  margin-bottom: 10px;
}
.outage-list thead {
  background-color: #568;
  color: #fff;
}
.outage-list td, .outage-list th {
  padding: 5px 15px;
}
.outage-list td {
  border: 1px solid #ddd;
  border-top-width: 0px;
}

#fake-dialog {
  display: none;
  width: 400px;
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25);
}

JavaScript

$(function() {
  $('.outage-list a').on('click', function(e) {
    e.preventDefault(); // Prevent default link behaviour
    $('#fake-dialog').show();
    $('#fake-dialog .val-outage-id').html($(this).closest('tr').attr('data-outage-id'));
    $('#fake-dialog .val-outage-email').html($(this).closest('tr').attr('data-outage-email'));
    $('#fake-dialog .val-outage-desc').html($(this).closest('tr').attr('data-outage-desc'));
  });
});