How to add a second table automatically using Javascript? - javascript

What I am trying to do is create a admin page the I can use edit a table using Javascript. What this is for are live results for tractor pulling to post to our website. All I need is to be able to post the driver, vehicle, distance, and it automatically sort by distance. Currently I am able to do all this for one table, but I want to add a second table for another class. I don't know if this is possible or not. I thought about trying to call another table from a different html file, but don't know how to display both the tables from two different html files together. Any assistance is appreciated. I have some Javascript experience, but not as much as needed for this project.
I have tried to update two different html files which works, but can't get them on the same html page as if it were on our website.
I should be able to be on the admin page, type in the driver's details, click new row for next puller, save it and so on. Once done with the class, click new class (new table) and do it all over again. Once done I want to be able to publish it, but clear everything to be ready for the next event.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Results</title>
<style>
table {
border-spacing: 0;
width: 50%;
border: 1px solid #000000;
counter-reset: rowNumber;
}
th, td {
text-align: left;
padding: 16px;
}
table tr{
counter-increment: rowNumber;
}
tr:nth-child(even){
background-color: #f2f2f2
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
</style>
</head>
<table>
<thead>
<th colspan="3"><h1 align="center">Medford, WI</h1></th>
<tr>
<th colspan="3"><h2 align="center">Light Super Stock Tractors</h2></th>
</tr>
<tr>
<th>Driver</th>
<th>Vehicle</th>
<th>Distance</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</html>
<?php
if(!isset($_POST['myTable']))
die('No data provided.');
$table = $_POST['myTable'];
$handle = fopen('myTable.html','w');
$result = fwrite($handle,$table);
if($result)
fclose($handle);
else
die('Error writing file');
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style rel="stylesheet" type="text/css">
tr, td,th{
border-collapse: collapse;
border:1px solid;
}
td{
height:22px;
min-width:125px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">"http://jquery.com"</script>
<script type="text/javascript">
$(document).ready(function () {
var getTable = function () {
/*We empty the div */
$('#myTable').html('');
/*We load the table */
$.get('myTable.html', function (callback_data) {
var table = callback_data;
document.getElementById('myTable').innerHTML = table;
});
};
getTable();
/* ----- */
/* New row button */
$('#addRow').click(function (event) {
/* Prevents the real anchor click event (going to href link)*/
event.preventDefault();
/* We get the number of columns in a row*/
var colNumber = $($('#myTable tbody tr')[0]).children('td').length;
var tr = document.createElement('tr');
var td = "";
for (var i = 0; i < colNumber; i++) {
td = document.createElement('td');
td.appendChild(document.createTextNode("\n"));
tr.appendChild(td);
}
$('#myTable tbody').append(tr);
});
$('#addColumn').click(function (event) {
event.preventDefault();
$.each($('#myTable table thead tr'), function () {
$(this).append('<th></th>');
})
$.each($('#myTable table tbody tr'), function () {
$(this).append('<td></td>');
});
});
$('#saveTable').click(function (event) {
event.preventDefault();
var table = $('#myTable').html();
$.post('saveTable.php', {
'myTable': table
}, function (callback_data) {
console.log(callback_data);
$('#myTable').slideToggle('fast');
setTimeout(function () {
getTable();
$('#myTable').slideToggle();
}, 100);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var getTable = function () {
/*We empty the div */
$('#myTable2').html('');
/*We load the table */
$.get('myTable2.html', function (callback_data) {
var table = callback_data;
document.getElementById('myTable2').innerHTML = table;
});
};
getTable();
/* ----- */
/* New row button */
$('#addRow2').click(function (event) {
/* Prevents the real anchor click event (going to href link)*/
event.preventDefault();
/* We get the number of columns in a row*/
var colNumber = $($('#myTable2 tbody tr')[0]).children('td').length;
var tr = document.createElement('tr');
var td = "";
for (var i = 0; i < colNumber; i++) {
td = document.createElement('td');
td.appendChild(document.createTextNode("\n"));
tr.appendChild(td);
}
$('#myTable2 tbody').append(tr);
});
$('#addHeader2').click(function (event) {
/* Prevents the real anchor click event (going to href link)*/
event.preventDefault();
/* We get the number of columns in a row*/
var colNumber = $($('#myTable2 tbody tr')[0]).children('td').length;
var tr = document.createElement('tr');
var td = "";
for (var i = 0; i < colNumber; i++) {
td = document.createElement('td');
td.appendChild(document.createTextNode("\n"));
tr.appendChild(td);
}
$('#myTable2 tbody').append(tr);
});
$('#addColumn2').click(function (event) {
event.preventDefault();
$.each($('#myTable2 table thead tr'), function () {
$(this).append('<th></th>');
})
$.each($('#myTable2 table tbody tr'), function () {
$(this).append('<td></td>');
});
});
$('#saveTable2').click(function (event) {
event.preventDefault();
var table = $('#myTable2').html();
$.post('saveTable.php', {
'myTable': table
}, function (callback_data) {
console.log(callback_data);
$('#myTable2').slideToggle('fast');
setTimeout(function () {
getTable();
$('#myTable2').slideToggle();
}, 100);
});
});
});
</script>
</head>
<body>
<h1 align="center">Live Results Admin Page</h1>
<section>
<article>
<div id="myTable" contenteditable></div>
<nav data-type="table-tools">
<ul>
<li>
New row
</li>
<li>
New column
</li>
<li>
Save table
</li>
</ul>
</nav>
</article>
</section>
<section>
<article>
<div id="myTable2" contenteditable></div>
<nav data-type="table-tools">
<ul>
<li>
New row
</li>
<li>
New column
</li>
<li>
Save table
</li>
</ul>
</nav>
</article>
</section>
</body>
</html>

Related

convert text to link inside for specific element inside loop

I created a code to convert json data to html table using javascript and ajax:
Data:
[
["text1", "https://www.amazon.com", "text2", "https://www.ebay.com"],
["text3", "https://www.google.com", "text4", "https://www.yahoo.com"],
...
]
This is the code, it work well, but on the table result, the td containing links is text (column2 and column4,
I want to put the text inside href so the cell become link (instead of text):
const TabBody = document.querySelector("#tab > tbody")
function loadData() {
const request = new XMLHttpRequest();
request.open("get", "rows.json");
request.onload = () => {
try {
const json = JSON.parse(request.responseText);
populateTable(json);
} catch (e) {
console.warn("error");
}
};
request.send();
}
function populateTable(json){
while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}
json.forEach((row) => {
const tr = document.createElement("tr");
row.forEach((cell) => {
const td = document.createElement("td");
td.textContent = cell;
tr.appendChild(td);})
TabBody.appendChild(tr);
})
}
document.addEventListener("DOMContentLoaded", () => { loadData();})
<body>
<table id="tab">
<thead>
<tr>
<th>column_1</th>
<th>column_2_link</th>
<th>column_3</th>
<th>column_4_link</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
Instead of just adding a td with you can generate a link inside by checking the string with a Regular Expresion if that's your intention:
const td = document.createElement("td");
td.innerHTML = /https:\/\//g.test(cell)
? `${cell}`
: cell;
tr.appendChild(td);
You could create an anchor element if innerHTML is not safe for you, but that should get you going.
Sharing you one sample. Here, on clicking the update link button, it will update all td that have a link to a clickable item , ie it will get updated with an anchor tag
function populateTable(json){
var regex = new RegExp("(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})"); // expression here
while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}
json.forEach((row) => {
const tr = document.createElement("tr");
row.forEach((cell) => {
const td = document.createElement("td");
if(regex.test($(this).text())){
td.innerHTML = `Link`;
}
else{
td.textContent = cell;
}
tr.appendChild(td);})
TabBody.appendChild(tr);
})
}
Complete sample code for testing
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// $('#tbl>tbody').find('td').css("background-color", "yellow");
var regex = new RegExp("(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})"); // expression here
$('table').find("td").each(function(data) {
if(regex.test($(this).text())){
$(this).html(`Contact`)
}
});
});
});
</script>
</head>
<body>
<table id="tbl">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tbody> <tr>
<td>123123</td>
<td>https://www.amazon.com</td>
<td>Mexico</td>
</tr>
<tr>
<td>123123</td>
<td>https://www.amazon.com</td>
<td>Mexico</td>
</tr>
</tbody>
</table>
<button>Update Link</button>
</body>
</html>

Why do my HTML table columns resize when I dynamically add a row containing a div?

I am trying to add a table row containing a div dynamically using JavaScript. Everything is working fine except, when it is added, my columns move slightly. Weirdly, it seems to only happen when the div contains text longer than a certain length.
In the stripped down version below, you can see the problem clearly. After trying it, go to line 24 of the JavaScript, remove the "i" at the end of the string, and it will no longer move my columns.
JSFiddle
setEventListeners();
function setEventListeners() {
var hideMe = document.getElementById('hide-me');
var table = document.getElementById('table');
hideMe.addEventListener('mouseenter', showHoverMenu);
table.addEventListener('mouseleave', deleteOtherMenus);
}
function showHoverMenu(e) {
e.preventDefault();
deleteOtherMenus();
var tr = document.createElement('tr');
tr.setAttribute('class', 'row-menu-parent')
var td = document.createElement('td');
td.colSpan = 4;
var rowMenu = document.createElement('div');
rowMenu.classList.add('row-menu');
var div = document.createElement('div');
// Delete the "i" at the end of the string and try hovering again
div.innerHTML = 'abcdefghi';
rowMenu.appendChild(div);
td.appendChild(rowMenu);
tr.appendChild(td);
var target = e.currentTarget;
target.parentNode.insertBefore(tr, target.nextSibling);
}
function deleteOtherMenus() {
var rowMenu = document.getElementsByClassName('row-menu-parent');
if (rowMenu.length > 0) {
rowMenu[0].parentNode.removeChild(rowMenu[0]);
}
}
* {
border: 1px solid red;
}
table {
width: 100%;
}
.row-menu div {
background-color: lightGrey;
}
<table id="table">
<tr id="hide-me">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
What is causing my columns to move, and how do I fix it?
EDIT: The columns need to be able to automatically resize, so a fixed table layout will not work.
You can set your table to table-layout: fixed; if you don't want it resizing.
table {
table-layout: fixed; /* Add this */
width: 100%;
}
setEventListeners();
function setEventListeners() {
var hideMe = document.getElementById('hide-me');
var table = document.getElementById('table');
hideMe.addEventListener('mouseenter', showHoverMenu);
table.addEventListener('mouseleave', deleteOtherMenus);
}
function showHoverMenu(e) {
e.preventDefault();
deleteOtherMenus();
var tr = document.createElement('tr');
tr.setAttribute('class', 'row-menu-parent')
var td = document.createElement('td');
td.colSpan = 4;
var rowMenu = document.createElement('div');
rowMenu.classList.add('row-menu');
var div = document.createElement('div');
// Delete the "i" at the end of the string and try hovering again
div.innerHTML = 'abcdefghi';
rowMenu.appendChild(div);
td.appendChild(rowMenu);
tr.appendChild(td);
var target = e.currentTarget;
target.parentNode.insertBefore(tr, target.nextSibling);
}
function deleteOtherMenus() {
var rowMenu = document.getElementsByClassName('row-menu-parent');
if (rowMenu.length > 0) {
rowMenu[0].parentNode.removeChild(rowMenu[0]);
}
}
* {
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
}
.row-menu div {
background-color: lightGrey;
}
<table id="table">
<tr id="hide-me">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
Try setting box-sizing: border-box in CSS for the table and/or wrap the .row-menu div in a div that does not have any styling.
If you look closely, the inner div's border is expanding the size of the parent TD which is causing the table to re-adjust.

Add onclick event to each row in a table

I have an HTML table dynamically generated by js, and I want to add each row an onClick event.
Like this
(because of need to pass complex parameters in my original code, I use Javascript to add onclick function):
<!DOCTYPE html>
<html>
<body>
<table align="center" id="tableID" border="1" style="cursor: pointer;">
<thead>
<th>Text</th>
<th>MoreText</th>
<th>Lorem</th>
<th>Ipsum</th>
</thead>
</table>
<br />
<script type="text/javascript">
for (var i = 0; i < 4; i++) {
document.getElementById("tableID").innerHTML += '<tr><td>Text</td><td>MoreText</td><td>Lorem</td><td>Ipsum</td></tr>';
document.getElementById("tableID").rows[i+1].onclick = function () {
alert("Hello World");
//alert(i);
};
}
</script>
</body>
</html>
If the table row is fixed and declared in HTML document, using this method is working,
but in my code (dynamically generated table row), the onClick function only works in the last row.
I guess that maybe is asynchronous problem, but I can't figure out.
UPDATE
According to #Quentin's method, I edited my code. It works fine.
<!DOCTYPE html>
<html>
<body>
<table align="center" id="tableID" border="1" style="cursor: pointer;">
<thead>
<th>Text</th>
<th>MoreText</th>
<th>Lorem</th>
<th>Ipsum</th>
</thead>
</table>
<br />
<script type="text/javascript">
for (var i = 0; i < 4; i++) {
var table = document.getElementById('tableID');
var tr = document.createElement('tr');
tr.onclick = function () {
alert("Hello World");
};
var td1 = document.createElement('td');
td1.innerText = "Text";
var td2 = document.createElement('td');
td2.innerText = "MoreText";
var td3 = document.createElement('td');
td3.innerText = "Lorem";
var td4 = document.createElement('td');
td4.innerText = "Ipsum";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
table.appendChild(tr);
}
</script>
</body>
</html>
You are assigning a new value to innerHTML.
This erases all the existing DOM elements and the event handlers attached to them and creates new ones (but you haven't got any code to recreate the event handlers you are deleting).
Don't use innerHTML. Use standard DOM methods: createElement, appendChild, etc. Then you can add your new row to the table body without changing what is already there.
<!DOCTYPE html>
<html>
<head>
<style>
table td { cursor: pointer; border: 1px solid black; }
#out { color: red; }
</style>
</head>
<body>
<table id="tableID">
<thead>
<th>Text</th>
<th>MoreText</th>
<th>Lorem</th>
<th>Ipsum</th>
</thead>
<tbody>
</tbody>
</table>
<div id="out"></div>
<script type="text/javascript">
function createCell(i, row, text) {
var td = document.createElement('td');
var content = document.createTextNode(text + i);
td.appendChild(content);
td.addEventListener('click', function() { document.getElementById('out').innerHTML = 'You clicked ' + this.innerHTML; }, false);
row.appendChild(td);
}
for (var i = 0; i < 4; i++) {
var tr = document.createElement('tr');
createCell(i, tr, 'a');
createCell(i, tr, 'b');
createCell(i, tr, 'c');
createCell(i, tr, 'd');
document.querySelectorAll('#tableID tbody')[0].appendChild(tr);
}
</script>
</body>
</html>
This should probably work, see demo: http://jsbin.com/lucequgotu

How to highlight a column in html table on click using js or jquery?

I am trying to implement a javascript which will highlight the column in an html table on click.As the below working example for row highlight i tried to use the same with table.columns but table.columns doesn't exist.Is there any was to highlight the column in html table using jquery?
Working code for highlighting row:
Table Highlight POC
<script>
function highlight() {
var table = document.getElementById('dataTable');
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function () {
if (!this.hilite) {
this.origColor = this.style.backgroundColor;
this.style.backgroundColor = '#BCD4EC';
this.hilite = true;
}
else {
this.style.backgroundColor = this.origColor;
this.hilite = false;
}
}
}
}
</script>
<style>
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
</style>
</head>
<body>
<table id="dataTable">
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
</table>
</body>
</html>
You can use the following code:
$('td').on('click', function() {
var $currentTable = $(this).closest('table');
var index = $(this).index();
$currentTable.find('td').removeClass('selected');
$currentTable.find('tr').each(function() {
$(this).find('td').eq(index).addClass('selected');
});
});
Just put this on your JS file and it will work on all available tables independently. In case you want to use it only on a specific table, just change the initial selector to $('#myTable td').
Also dont forget to add the .selected{ background-color: #ace; } class in yor css file.
Here is the working example.
Cheers!
Please try this:
$("#dataTable tr td").click(function() {
//Reset
$("#dataTable td").removeClass("highlight");
//Add highlight class to new column
var index = $(this).index();
$("#dataTable tr").each(function(i, tr) {
$(tr).find('td').eq(index).addClass("highlight");
});
});
.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="dataTable">
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
</table>
A fork Fisnik Tahiri solution to support also the tr selection (based on css or jquery if you preferir)
css:
.selected{ background-color: #ace; }
tr:hover{ background-color: #ace; }
Js:
$('td').on('mouseenter', function() {
var $currentTable = $(this).closest('table');
//var $row = $(this).closest('tr');
var index = $(this).index();
//clean
$currentTable.find('td').removeClass('selected');
//select row if you want use js
//$currentTable.find('tr').removeClass('selected');
//$row.addClass('selected');
//select column
$currentTable.find('tr').each(function() {
$(this).find('td').eq(index).addClass('selected');
});
});
working example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onclick highlight</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$( ".table tr" ).click(function(){
$(".table tr" ).css("background-color","white");
$(this).css("background-color","green");
});
});
</script>
</head>
<body>
<table class="table">
<tr>
<td>Date1</td>
<td>Date2</td>
<td>Date3</td>
</tr>
<tr>
<td>Date1</td>
<td>Date2</td>
<td>Date3</td>
</tr>
<tr>
<td>Date1</td>
<td>Date2</td>
<td>Date3</td>
</tr>
</table>
</body>
</html>

Clear a div tag that is refilled with a table created by JavaScript

My page is used to create a base-6 table of numbers that highlight prime numbers. The user inputs the number that they want the table to end in, and a script generates the table. It does it in a div tag with the id "tablearea."
The problem is that if the user inputs a new number and submits, the second table is added at the bottom of the first. What I want is for the first table to be cleared, and subsequent requested tables to be written in the same area. How do I accomplish this?
<!DOCTYPE HTML>
<html lang="en">
<!-- This page asks the user to input a number to search for primes and returns a base-6 table with primes highlighted -->
<head>
<meta charset="utf-8">
<meta name="keywords" content="prime numbers, prime, primes, prime twins">
<title>Prime Numbers</title>
<script type="text/javascript">
/* This function determines if a number is prime or not */
function isPrime(n) {
if (isNaN(n) || !isFinite(n) || n%1 || n<2) return false;
if (n%2==0) return (n==2);
if (n%3==0) return (n==3);
var m=Math.sqrt(n);
for (var i=5;i<=m;i+=6) {
if (n%i==0) return false;
if (n%(i+2)==0) return false;
}
return true;
}
/* This function creates the table and color codes the cells of prime numbers */
function tableCreate(X){
var numCheck = X;
var numRow = numCheck/6;
var numCell = 1;
var body = document.body;
var tbl = document.createElement('table');
for(var i = 0; i < numRow; i++){
var tr = tbl.insertRow(-1);
for(var j = 0; j < 6; j++){
if(i==numRow && j==6 || numCheck==numCell-1){
break
}
else {
var td = tr.insertCell(-1);
if(isPrime(numCell) == true){
td.style.backgroundColor='yellow';
}
td.appendChild(document.createTextNode(numCell));
numCell++;
}
}
}
body.appendChild(tbl).tablearea;
}
</script>
<style type="text/css">
<!-- td {border: 1px solid black} -->
table{width: 50%; border: 1px solid black; margin-left: auto; margin-right: auto}
</style>
</head>
<body>
<form name="primes">
<p style="text-align: center">How many numbers would you like to check for primes?
<input type="text" id="nums">
<input type="button" value="Check'em!" onClick="tableCreate(document.primes.nums.value)">
<input type="reset">
</p>
</form>
<br /><br /><br /><br />
<div id="tablearea">
</div>
</body>
</html>
You need to flush the contents of the div before you insert a table with different content to the same div
Just replace the below line in your code
body.appendChild(tbl).tablearea;
with
document.getElementById("tablearea").innerHTML='';
document.getElementById("tablearea").appendChild(tbl);
If you want the table to appear in the div with ID tablearea, you need to do something like:
var div = document.getElementById('tablearea');
div.appendChild(tbl);
If you then want to replace the table with a new one, there are lots of options, but the easiest is probably to empty the div and insert the new table:
div.innerHTML = '';
div.appendChild(tbl);
If you have other content in the div that you don't want to destroy, then replace just the table:
var oldTable = div.getElementsByTagName('table')[0];
// If there's an existing table, replace it
if (oldTable) {
div.replaceChild(tbl, oldTable);
// If there wasn't, just append the new one
} else {
div.appendChild(tbl);
}

Categories

Resources