// In this array, we'll keep track of the urls and their last fetch time. var urls = [ {url: "www.google.com", loadSpeed: 50}, {url: "angularjs.org", loadSpeed: 75}, {url: "www.dwmkerr.com", loadSpeed: 120} ]; // This function will update the url table, making sure we've got the urls.. function updateUrlTable() { // Get the table. var table = document.getElementById("urlTable"); // Clear old table rows, but not the heading... var rows = table.rows.length - 1; for(var i=0; i<rows; i++) { table.deleteRow(1); } // Now add a row for each entry. for(i=0; i<urls.length; i++) { var row = table.insertRow(table.rows.length); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); // Write the url out as a link. cell1.innerHTML = '<a href="' + urls[i].url + '">' + urls[i].url + '</a>'; cell3.innerHTML = '<a href="javascript:void(0)" onclick="removeUrl(' + i + ');">Delete</a">'; // If the round trip time is greater than 100ms, use a 'red' // css class. var loadSpeedHtml = "<span"; if(urls[i].loadSpeed > 100) { loadSpeedHtml += ' class="red"'; } loadSpeedHtml += '>' + urls[i].loadSpeed + '</span> ms'; cell2.innerHTML = loadSpeedHtml; } } // This function deletes a row. It's added on the window as we're in an onload... function removeUrl(index) { // Remove the url by index. urls.splice(index, 1); // Update the table. updateUrlTable(); } // This function adds an url. function addUrl(url) { // Add a new url entry. urls.push({ url: url, loadSpeed: Math.random()*50+50 }); // Update the table. updateUrlTable(); // Remove the url from the textbox. document.getElementById("url").value = ""; } // When the form is submitted, add the url. var form = document.getElementById("addUrlForm"); form.onsubmit = function() { addUrl(document.getElementById("url").value); return false; }; // When the text in the url box changes, update the // state of the submit button. var urlBox = document.getElementById("url"); urlBox.onkeyup = function() { document.getElementById("submit").disabled = urlBox.value.length === 0; }; // First time through, update the table. updateUrlTable();
<h3>Speedmonitor</h3> <form id="addUrlForm"> <label for="url">Url</label> <input id="url" type="text" /> <input id="submit" type="submit" disabled /> </form> <table id="urlTable"> <tr> <td>Url</td> <td>Load Speed (ms)</td> <td></td> </tr> </table>