This is my table:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Documento senza titolo</title>
<link href="Champions%20League/Champion%20League.css" rel="stylesheet" type="text/css">
</head>
<body style="border-style: none; border-collapse: collapse; empty-cells: show; table-layout: auto; font-family:Verdana, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif">
<table ;="" style="width: 80%; text-align: center; margin-left: auto; margin-right: auto;"
id="db" cellspacing="2" cellpadding="2" border="1">
<tbody>
<tr>
<td width="10%">09-11-1996</td>
<td width="10%">Norimberga</td>
<td style="text-align: right;" width="15%">Germania</td>
<td width="10%">3-0</td>
<td style="text-align: left;" width="15%">Irlanda del Nord</td>
<td width="25%">Qualificazioni Mondiali 1998 </td>
<td width="5%"><strong>1</strong></td>
</tr>
</tbody>
</table>
<script>
function GetCellValues() {
var table = document.getElementById('db');
var total = 0
for (var r = 0, n = table.rows.length; r < n; r++) {
total += parseInt(table.rows[r].cells[7].innerText)
}
alert(total);
}
GetCellValues()
</script>
</body>
</html>
The script at the end should repeat for a certain number of rows. But I can't extrapolate the numeric value present in the last cell (in this case, 1), since the final value of the total variable is NaN.
How can I fix it?
Related
I have this script to sort all the tr by number and all seems to work, but when its time to assign the new values using innerHTML to each table row then the array with the sorted table rows start changing its value randomly evertime a value is assign to a row and I don't know why:
Heres the code:
Run the snippet to see what I mean and thanks.
"use strict"
let table = document.getElementById("grid");
let tableHead = table.querySelector("thead");
tableHead.addEventListener("click",event=>{
let tbody = table.getElementsByTagName("tbody")[0];
let rows = tbody.getElementsByTagName("tr");
let arr = null;
switch(event.target.dataset.type) {
case "number":
arr = Array.from(rows).sort((a,b)=>{
return +a.firstElementChild.innerHTML > +b.firstElementChild.innerHTML ? 1: -1;
});
break;
case "string":
break;
}
for(let i = 0; i < rows.length; i++) {
console.log(rows[i].innerHTML,"rows");//Shows the current order
}
for(let i = 0; i < arr.length;i++) {
console.log(arr[i].innerHTML,"arr"); //Shows the sorted table rows as expected
}
for(let i = 0; i < arr.length;i++) {
rows[i].innerHTML = arr[i].innerHTML; //But now arr have randoms values!!
}
});
table{
border: 1px solid black;
border-spacing: 0px;
}
td, th{
border: 1px solid rgb(0, 0, 0);
margin: 0px;
padding: 0.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Age</th>
<th data-type="string">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Pete</td>
</tr>
<tr>
<td>12</td>
<td>Ann</td>
</tr>
<tr>
<td>9</td>
<td>Eugene</td>
</tr>
<tr>
<td>1</td>
<td>Ilya</td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
This is because both rows and arr arrays contain the same element objects, so changing element in one array changes it in another.
In this particular case you can simply append rows to tbody instead:
"use strict"
let table = document.getElementById("grid");
let tableHead = table.querySelector("thead");
tableHead.addEventListener("click",event=>{
let tbody = table.getElementsByTagName("tbody")[0];
let rows = tbody.getElementsByTagName("tr");
let arr = null;
switch(event.target.dataset.type) {
case "number":
arr = Array.from(rows).sort((a,b)=>{
return +a.firstElementChild.innerHTML > +b.firstElementChild.innerHTML ? 1: -1;
});
break;
case "string":
break;
}
for(let i = 0; i < rows.length; i++) {
console.log(rows[i].innerHTML,"rows");//Shows the current order
}
for(let i = 0; i < arr.length;i++) {
console.log(arr[i].innerHTML,"arr"); //Shows the sorted table rows as expected
}
for(let i = 0; i < arr.length;i++) {
tbody.appendChild(arr[i]);
// rows[i].innerHTML = arr[i].innerHTML; //But now arr have randoms values!!
}
});
table{
border: 1px solid black;
border-spacing: 0px;
}
td, th{
border: 1px solid rgb(0, 0, 0);
margin: 0px;
padding: 0.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Age</th>
<th data-type="string">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Pete</td>
</tr>
<tr>
<td>12</td>
<td>Ann</td>
</tr>
<tr>
<td>9</td>
<td>Eugene</td>
</tr>
<tr>
<td>1</td>
<td>Ilya</td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
JavaScript Element.length returns invalid length while executing in Visualforce page.
I'm expecting body NodeList length to be 14. But after printing console.log('allDocElements length:: ',allDocElements.childNodes.length);
It return 10. how this is possible?
I'm executing it in Google Chrome.
View console output
<apex:page showHeader="false" sidebar="false">
<html>
<head>
<title>JS Addignment 1</title>
<style>
body {
text-align:center;
font-size:30px;
}
.center {
width:70%;
margin:15% auto;
border-collapse:collapse;
border:2px solid #000000;
}
table td {
border:2px solid #000000;
}
</style>
<script>
let dateContainer, dayContainer, timeContainer;
let allDocElements = document.getElementsByTagName('body')[0];
console.log('allDocElements::',allDocElements.childNodes);
</script>
</head>
<body>
<table border="1" style="" class="center" cellpadding="20">
<tbody>
<tr>
<td><label>Date: </label><span id="dateContainer"/></td>
<td><label>Day: </label><span id="dayContainer"/></td>
</tr>
<tr>
<td colspan="2"><span id="timeContainer"/></td>
</tr>
</tbody>
</table>
</body>
</html>
I would like to create a table in html that adds a column (starting number of columns: 1) every time a user clicks on it.
So Ideally if a user clicks on the table 6 times the table should look like this:
here's my HTML and js:
<!DOCTYPE html>
<html>
<body>
<head>
<title></title>
<script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel = "stylesheet" type" type="text/css" href = "style.css">
<script src="jquery-ui.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</head>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#table").click(function()
{
var column = document.createElement("TH")
column.className = "column";
document.getElementById("table").appendChild(column);
});
});
</script>
Instead what happens when the user clicks 6 times is this:
It seems like a new row is being created when the user clicks. Is there a way I can fix this?
Here you go with a solution
$(document).ready(function() {
$("#table").click(function(){
$(this).find('tr').append("<th class='column'></th>");
});
});
.column {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</table>
Hope this will help you.
<!DOCTYPE html>
<html>
<head>
<title>Add Coulmn</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
<script>
$(document).ready(function() {
$("#btnAdd").click(function(){
var CoulmnCount=$("table > tbody > tr:first > td").length+1;
$("#table").find('thead').find('tr').append("<th class='head'>header"+CoulmnCount+"</th>");
$("#table").find('tbody').find('tr').append("<td class='column'>Coulmn1"+CoulmnCount+"</td>");
});
});
</script>
</head>
<body>
<input type="submit" value="Add Coulmn" id="btnAdd">
<table id = "table" style="width: 100%; height: 30px; border-style: solid">
<thead>
<tr>
<th class = "head">Header1</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "column">Coulmn1</td>
</tr>
</tbody>
</table>
</body>
</html>
function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
.search_input {
background-image: url(search_icon.png);
background-position: 3px 9px;
background-repeat: no-repeat;
background-size: 12px 12px;
width: 15%;
height: 31px;
padding: 12px 8px 9px 26px;
border: 1px solid #ddd;
margin: 12px 0 12px 0;
border-radius: 7px;
}
.my_tabel {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 13px;
}
.my_tabel th, .my_tabel td {
text-align: left;
padding: 12px;
}
.my_tabeltr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
table, .line{
border: 1px solid;
}
thead
{
background-color: #93B6D2;
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark Scheid</td>
<td>mscgei#wgu.edu</td>
<td>06-jan-15</td>
<td>PK0-003-Project+</td>
<td>03ocb</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Kenneth Nagle</td>
<td>knagle#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>02Oki</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kenneth</td>
<td>matt.bearce#verizonwireless.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)</td>
<td>030c8</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Rafael Moreno</td>
<td>rmoren4#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>030c7</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Paul Doyle</td>
<td>doylepaul#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030c6</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Paul Doyle</td>
<td>esmally#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030bb</td>
<td>Course</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
I created a table with some data using html and bootstrap and i create a function of filter/searching in input type using pure java script now i need do sorting of data from ascending to descending or vise-versa.
You can just do (arrayName).sort(); it automatically sorts the numbers and letters from small to big for you (From A-Z and 1-(biggest number)), and you can also use:
(arrayName).sort(function(a, b){
return b - a;
});
to sort from the biggest to the smallest
Here is a documentation on the .sort function: https://www.w3schools.com/jsref/jsref_sort.asp
Hopefully it helps!
What you need to do is store the data in a JavaScript array. Then you can iterate over your records and sort them dynamically in JS. Once you're doing that, it's just a matter of clearing and re-rendering your table:
var users = [
{
row: 1,
name: 'B Mark Scheid',
email: 'mscgei#wgu.edu',
date: '06-jan-15',
courses: 'PK0-003-Project+',
guid: '03ocb',
license: 'Course'
},
{
row: 2,
name: 'C Kenneth Nagle',
email: 'knagle#wgu.edu',
date: '06-jan-15',
courses: 'N10-005 CompTIA Network+',
guid: '02Oki',
license: 'Course'
},
{
row: 3,
name: 'A enneth',
email: 'matt.bearce#verizonwireless.com',
date: '06-jan-15',
courses: 'Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)',
guid: '030c8',
license: 'Course'
}
]
function renderTable(){
users.forEach(function(user, key){
// You'll want to fill this out with all your `td`,
// just doing the first column for demonstration purposes.
var tr = "<tr><th scope=\"row\">"+user.row+"</th><td>"+user.name+"</td></tr>";
$('#myTable tbody').append(tr);
})
}
function clearTable(){
// Clear the table body of all `tr`.
$('#myTable tbody').empty();
}
function sortBy(param){
// Bullt-in array sort.
users = users.sort(function(a,b){
// Handle sorting numbers.
if(typeof a[param] == 'number') return a[param] - b[param];
// Handle sorting strings.
// `localeCompare() tells us whether or not `a` is before `b` in the alphabet.
return a[param].localeCompare(b[param]);
});
}
// We're gonna register click listeners on each of the headers,
// using the `class` names I add in the HTML below.
// This just says: for each of the keys that the first user has,
// mount a click handler.
Object.keys(users[0]).forEach(function(key){
$('.header-' + key).click(function(){
// Pretty self-explanatory.
sortBy(key);
clearTable();
renderTable();
});
});
// Start off with the table showing.
renderTable();
// Your search still works.
function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th class="header-row">#</th>
<!-- I am adding classes to the headers for click listeners. -->
<th class="header-name">Name</th>
<th class="header-email">Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<!-- NOTICE THE EMPTY TABLE HERE! WE WILL GENERATE THIS IN THE JS! -->
</tbody>
</table>
</div>
</form>
</body>
</html>
I'll leave descending order as a task for you.
I am playing around with jQuery in order to have a confirm box when I click on a delete link in a table.
I managed to make it work, but when the box is displayed, the columns are moving to the left which is not perfect.
I don't know where it comes from: my CSS, my JS, Foundation CSS?...
I created a JSFiddle so you can check the result. It happens when you click on Delete.
Here's the code in the JSFiddle:
$(document).ready(function(){
// Confirm delete
$('.delete-action').click(function() {
//Get the path of the href
var item_link = this.href;
//Select the <tr> and get the width and height
var item_section = $(this).closest('tr');
var item_section_width = item_section.outerWidth();
var item_section_height = item_section.outerHeight();
//Add css to the <tr>
item_section.css('position', 'relative');
//Display the confirm box in the <tr>
item_section.append('<div class="delete-box" style="position:absolute;width:'+item_section_width+'px;height:'+item_section_height+'px;top:0;left:0" >\n\
<div>Are you sure you want to delete this entry? Oui<a class="delete-no">Non</a></div>\n\
</div>');
//Proceed with delete
$('.delete-yes').click(function() {
return true;
});
//Do not delete, remove the box
$('.delete-no').click(function() {
$('.delete-box').fadeOut(function() {
$(this).remove();
});
return false;
});
return false;
});
});
.delete-box {
display: flex;
padding: 0 10px;
background-color: darkgrey;
}
.delete-box div {
margin: auto;
}
.delete-box div a {
display: inline-block;
width: 60px;
padding: 5px;
margin: 0 5px;
text-align: center;
color: white;
}
.delete-box div .delete-yes {
background-color: green;
}
.delete-box div .delete-yes:hover {
background-color: darkgreen;
}
.delete-box div .delete-no {
background-color: red;
}
.delete-box div .delete-no:hover {
background-color: darkred;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation-float.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Confirm box for a delete row in a Table - jQuery</title>
</head>
<body>
<div class="row">
<div class="large-12 columns">
<h1>Confirm box in a Table</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Last update</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is a title</td>
<td>2017-07-08</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
<tr>
<td>This is a title</td>
<td>2017-07-08</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
<tr>
<td>This is a title</td>
<td>2017-07-08</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
</body>
</html>
Any idea where it can come from?
I finally changed the way to do it, switching from a 'div' solution to a 'td' solution. Here's the result: https://jsfiddle.net/LLjebd76/3/
// Foundation
$(document).foundation();
// jQuery
$(document).ready(function(){
// Confirm delete
$('.delete-action').click(function() {
//Get the path of the href
var item_link = $(this).attr('href');
//Select the <tr> and get the height
var item_tr = $(this).closest('tr');
var item_tr_height = item_tr.outerHeight();
var item_tr_value = item_tr.html();
//Display the confirm box in the <tr>
item_tr.empty();
item_tr.append('<td colspan="3" height="'+item_tr_height+'" class="delete-box">\
Are you sure you want to delete this entry? Yes<a class="delete-no">No</a>\
</td>');
//Proceed with delete
$('.delete-yes').click(function() {
return true;
});
//Do not delete, remove the box
$('.delete-no').click(function() {
item_tr.empty().append(item_tr_value);
return false;
});
return false;
});
});
.delete-box {
background-color: darkgrey;
text-align: center;
}
.delete-box a {
display: inline-block;
width: 60px;
margin: 0 5px;
text-align: center;
color: white;
}
.delete-box .delete-yes {
background-color: green;
}
.delete-box .delete-yes:hover {
background-color: darkgreen;
}
.delete-box .delete-no {
background-color: red;
}
.delete-box .delete-no:hover {
background-color: darkred;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation-float.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Confirm box for a delete row in a Table - jQuery</title>
</head>
<body>
<div class="row">
<div class="large-12 columns">
<h1>Confirm box in a Table</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Last update</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is a title 1</td>
<td>2017-07-08</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
<tr>
<td>This is a title 2</td>
<td>2017-07-09</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
<tr>
<td>This is a title 3</td>
<td>2017-07-10</td>
<td><i class="fa fa-edit"> Edit</i> - <i class="fa fa-close"> Delete</i></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>