We Keep Coding

JavaScript updating only after 2-3 seconds?

I have a HTML table where I wanted to introduce sorting and search options and therefore I used Jquery which has JS & CSS file
The table is giving the correct output but whenever the page is loaded, first the table is updating without above js and css and only after 2-3 seconds, the above Jquery is updated. How can I make it fast so that it does not awkward for the user ?
Here is the HTML Code
{% load function %}
<!-- <link rel='stylesheet' href='media/css/jquery.dataTables.min.css'> -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<link rel='stylesheet' href='https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css'>
<script>$(document).ready(function () {
$('#example').DataTable();
});</script>
<table id='example' class='table'>
<thead>
<tr>
<th>Stock</th>
<th>Open</th>
<th>High</th>
<th>Low</th>
<th>Close</th>
<th>Volume</th>
<th>Buyers</th>
<th>Sellers</th>
<th>Close_open</th>
<th>Close_high</th>
<th>high_open</th>
<th>high_low</th>
</tr>
</thead>
<tbody id="people">
{% for x,y in info.items %}
<tr>
<td scope="row">{{x|split}}</td>
<td id= 'open{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'open'}}</td>
<td id='high{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'high'}}</td>
<td id='low{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'low'}}</td>
<td id='close{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'close'}}</td>
<td>{{y|access_dictionary:'volume'}}</td>
<td id='buyquantity{{x}}'>{{y|access_dictionary:'buy_quantity'}}</td>
<td id='sellquantity{{x}}'>{{y|access_dictionary:'sell_quantity'}}</td>
<td id='Close_open{{x}}'></td>
<td id='Close_high{{x}}'></td>
<td id='high_open{{x}}'></td>
<td id='high_low{{x}}'></td>
<script>
// console.log(document.getElementById('high{{x}}').innerHTML)
// console.log(document.getElementById('low{{x}}').innerHTML)
// console.log(document.getElementById('open{{x}}').innerHTML)
d = document.getElementById('close{{x}}').innerHTML - document.getElementById('open{{x}}').innerHTML
e = document.getElementById('close{{x}}').innerHTML - document.getElementById('high{{x}}').innerHTML
f = document.getElementById('high{{x}}').innerHTML - document.getElementById('open{{x}}').innerHTML
g = document.getElementById('high{{x}}').innerHTML - document.getElementById('low{{x}}').innerHTML
document.getElementById('Close_open{{x}}').innerHTML = Math.round(d * 100)/100;
document.getElementById('Close_high{{x}}').innerHTML = Math.round(e * 100)/100;
document.getElementById('high_open{{x}}').innerHTML = Math.round(f * 100)/100;
document.getElementById('high_low{{x}}').innerHTML = Math.round(g * 100)/100;
</script>
</tr>
{% endfor %}
</tbody>
</table>
<!-- <script>
setTimeout(function(){
window.location.reload(1);
},2000);
</script> -->
<style type="text/css">
table {
border-collapse: collapse;
border: none;
width: 20%;
}
th,
td {
border: 1px solid black;
padding: 2px 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
}
th {
background-color: #C8C8C8;
cursor: pointer;
width:100px;
}
</style>
Here {% for x,y in info.items %} info is the dictionary where all stock related information is stored. Therefore I have run a loop to display it on a webpage. Please reply

Try updating the file if (linked):
<script id="update" src="yourfile.js"></script>
<script>
for (var i = 0; i < 2; i++) {
var e = '';
if (i == 1) {
e = '?random=1234';
} else {
e = '?random=123456';
}
window.update.src += e;
}
</script>
Or if the file is an absolute url,like "http://www.example.com" and your url is different, try putting the file in your directory. Try setting cache if it is disabled on your page because then it can get the file easier.

Obtaining the value of an element and the innerhtml of its child element with an onClick?

I'm trying to make a simple tictactoe game and starting off, I've run into a problem. I'm planning to have a unique value associated with each table cell (td) and a unique id with each Div inside them.
So my plan is to have an onClick event with each td element that takes both of these values as parameters. However when I tried to do a simpler version where I simply console.log'd the value of the td element all I got was undefined. So I'm wondering whats wrong with this code.
function valueToggle(child, parent){
console.log(parent. value)
//this function takes the child node and the parents node's value, it then logs the value of the paret node.
}
function playerGo(num){
if(num % 2){
this.innerHtml = "X"
}
else{
this.innerHtml = "O"
}
//this function wi;; signal who's go it is, allowing the value Toggle to
//set the right value to what is clicked next
}
function reset(){
//this resets the game
}
function didYouWin(){
//CHecks to see if a player has won every time a move is made
}
#game{
margin: auto;
}
table {
background-color: #e6e6e6;
width: 420px;
height: 420px;
margin-left: auto;
margin-right: auto;
}
td {
border: 2.5px solid black;
height: 140px;
width: 140px;
text-align: center;
vertical-align: middle;
font-size: 80px;
}
#cell-1{
}
#cell-2{
}
#cell-3{
}
#cell-4{
}
#cell-5{
background-color:
}
#cell-6{
background-color:
}
#cell-7{
background-color:
}
#cell-8{
background-color:
}
#cell-9{
background-color:
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anton Game</title>
<link rel="stylesheet" href="./antonvers.css">
</head>
<body>
<div id="game">
<div id="player">
<h2>
<span id="pShow">Player:</span>
<span id="pColor">X</span>
</h2>
</div>
<table id="board" cellpadding="0" cellspacing = "0">
<tr>
<td onClick = "valueToggle(this.childNode, this)" value = 0>
<div id="cell-1">X</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div id="cell-2">O</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div id="cell-3">X</div>
</td>
</tr>
<tr>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-4">O</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-5">X</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-6">O</div>
</td>
</tr>
<tr>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-7">O</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-8">X</div>
</td>
<td onClick = "valueToggle(this.childNodes, this)" value = 0>
<div class="cell-9">O</div>
</td>
</tr>
</table>
<div id="resetButton">
<button>Reset</button>
</div>
</div>
<script src="./antonvers.js"></script>
</body>
</html>

There's a few problems here.
First, when you use HTML "onclick" attributes, when a handler is called this is set to the element to which the handler is attached, but the handler is not actually bound to the element it's attached to (it's still bound to the window). If you attach the handler once the HTML has been fully parsed and the DOM has been created this will be bound to the element and you would not have to override the Event usually passed as the first argument of an event handler.
Second, only input elements have value properties, so setting a value attribute on a td will not translate into a value property. You could use a data- attribute to simulate this, or obtain the value by examining the custom "value" attribute with .getAttribute()
I've modified your snippet to show possible corrections:
var player = 1;
function valueToggle(event){
//this function takes the child node and the parents node's value, it then logs the value of the paret node.
let div = event.target.getElementsByTagName('div')[0].innerHTML = ["X","O"][player%2];
}
function playerGo(num){
if(num % 2) {
this.innerHTML = "X"
}
else {
this.innerHTML = "O"
}
//this function wi;; signal who's go it is, allowing the value Toggle to
//set the right value to what is clicked next
}
function reset(){
//this resets the game
}
function didYouWin(){
//CHecks to see if a player has won every time a move is made
}
document.addEventListener("DOMContentLoaded", function() {
for (let td of document.querySelectorAll("#board td")) {
td.onclick = valueToggle;
}
});
#game{
margin: auto;
}
table {
background-color: #e6e6e6;
width: 420px;
height: 420px;
margin-left: auto;
margin-right: auto;
}
td {
border: 2.5px solid black;
height: 140px;
width: 140px;
text-align: center;
vertical-align: middle;
font-size: 80px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anton Game</title>
<link rel="stylesheet" href="./antonvers.css">
</head>
<body>
<div id="game">
<div id="player">
<h2>
<span id="pShow">Player:</span>
<span id="pColor">X</span>
</h2>
</div>
<table id="board" cellpadding="0" cellspacing = "0">
<tr>
<td data-value="0"><div id="cell-1"></div></td>
<td data-value="0">
<div id="cell-2"></div>
</td>
<td data-value="0">
<div id="cell-3"></div>
</td>
</tr>
<tr>
<td data-value="0">
<div class="cell-4"></div>
</td>
<td data-value="0">
<div class="cell-5"></div>
</td>
<td data-value="0">
<div class="cell-6"></div>
</td>
</tr>
<tr>
<td data-value="0">
<div class="cell-7"></div>
</td>
<td data-value="0">
<div class="cell-8"></div>
</td>
<td data-value="0">
<div class="cell-9"></div>
</td>
</tr>
</table>
<div id="resetButton">
<button>Reset</button>
</div>
</div>
<script src="./antonvers.js"></script>
</body>
</html>

Use console.log(parent.getAttribute('value')) instead of parent.value.
From the MDN documentation:
getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string);

How to add data to table on click of button using Javascript

<html>
<head>
<style type="text/css">
table, th, td {
position: relative;
border: 1px solid black;
width: 40%;
height:40px;
top: 5%;
}
</style>
<script type="text/javascript">
function lab()
{
var x= document.getElementById('lab').value;
var rows="";
rows+= "<tr><td>"+x+"</td></tr>";
}
function inp()
{
var y= document.getElementById('inp1').value;
}
</script>
</head>
<body>
<button id="lab" onclick="lab()" value="label">Label</button>
<button id="inp1" onclick="inp()" value="Input">Input</button>
<button id="res" onclick="reset()">reset</button>
</body>
<table id="me1">
<tr>
<td></td>
<td></td>
</tr>
<tbody></tbody>
</table>
</html>
I am trying to add the text in the column of the table on the click of the button.
so please help me to add the text written on the button in the column of the table
thank you

I don't understand your requirement completely, but you can use innerHTML to wipe out earlier contents and insert new. Or use appendChild and createElement to make and insert new elements on the go. The example demonstrates both with each button.
function lab() {
var x = document.getElementById('lab').value;
var rows = "";
rows += "<tbody><tr><td>" + x + "</td></tr></tbody>";
document.getElementById('me1').innerHTML = rows;
}
function inp() {
var table = document.getElementById('me1');
var tbody = table.getElementsByTagName('tbody')[0];
var y = document.getElementById('inp1').value;
var text = document.createTextNode(y);
var col = document.createElement('td');
var row = document.createElement('tr');
col.appendChild(text);
row.appendChild(col);
tbody.appendChild(row);
}
table,
th,
td {
position: relative;
border: 1px solid black;
width: 40%;
height: 40px;
top: 5%;
}
<button id="lab" onclick="lab()" value="label">Label</button>
<button id="inp1" onclick="inp()" value="Input">Input</button>
<button id="res" onclick="reset()">reset</button>
</body>
<table id="me1">
<tr>
<td></td>
<td></td>
</tr>
<tbody></tbody>
</table>

I have been also trying out how to input values into HTML table with the click of a button, and I found out this simple way by just using innerHTML and the id of the td tag. I have reformatted your code, hope this would be useful.
<!DOCTYPE html>
<head>
<style type="text/css">
table, th, td {
position: relative;
border: 1px solid black;
width: 40%;
height:40px;
top: 5%;
}
</style>
<script type="text/javascript">
function lab()
{
var x= document.getElementById('lab').value;
document.getElementById('00').innerHTML=x;
}
function inp()
{
var y= document.getElementById('inp1').value;
document.getElementById('01').innerHTML=y;
}
</script>
</head>
<body>
<button id="lab" onclick="lab()" value="label">Label</button>
<button id="inp1" onclick="inp()" value="Input">Input</button>
<button id="res" onclick="reset()">reset</button>
</body>
<table id="me1">
<tr>
<td id='00'></td>
<td id='01'></td>
</tr>
<tbody></tbody>
</table>
</html>

Adding/Removing cell classes with JavaScript

I posted a similar question a few hours ago, but I've made a couple breakthroughs(in my mind) and i feel as if I can explain better now.
First off, it's important to say that all of my images, the ones that I'm trying to edit the classes of, are in cells. Like, the cells that are within rows that are within a HTML table.
I have a class named .disableMenu, and it's supposed to simply hide the pictures. Here's that class -
.disableMenu {
visibility: hidden;
}
It's simple and it works like a charm.
So basically, I want a button that when it is pressed, it removes that class from the element(in this case, it's a single cell in a table).
Here's an example of a cell that I'm trying to get this to work on -
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<img src="1.png" class="merge0">
<script>
src="js/bootstrap.js"
</script>
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.style.class = disableMenu;
}
</script>
</td>
Now, here's the JS button that I'm trying to get to trigger this change of class -
<button onclick="changeColor('disableMenu');">GO</button>
I'm really sorry for half-double posting this and my general lack of knowledge, but I'm trying to learn(and having fun doing so).
Here's the full code, if anyone wants to have a look -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Complete the puzzle!</title>
<style>
.disableMenu {
visibility: hidden;
}
.merge {
position:absolute;
left: 496px;
top: 5px;
}
.merge0 {
position:absolute;
left:300px;
top:4px;
}
.merge1 {
position:absolute;
top: 218px;
left: 530px;
}
.merge2 {
position:absolute;
top: 218px;
left: 688px;
}
.row1 {
position:absolute;
left: 301px;
top: 208px;
}
.row2 {
position:absolute;
top: 476px;
left: 301px;
margin:0;
}
.row3 {
position:absolute;
top: 495px;
left: 716px;
margin:0;
}
.row4 {
position:absolute;
top: 691px;
left: 300px;
margin:0;
}
</style>
<body style="
">
<div>
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<img src="1.png" class="merge0">
<script>
src="js/bootstrap.js"
</script>
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.style.class = disableMenu;
}
</script>
</td>
<td>
<img id="2" src="6.png" class="merge">
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="4.png" class="row1">
</td>
<td id="gone">
<img src="2.png" class="merge1">
</td>
<td>
<img src="7.png" class="merge2">
</td>
</tr>
<tr>
<td>
<img src="8.png" class="row2">
</td>
<td>
<img src="5.png" class="row3">
</td>
<td>
<img src="3.png" class="row4">
</td>
</tr>
</table>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
Thanks for looking, any help would be greatly appreciated.

elem.style.class = disableMenu;
This is a big problem. There is not style attribute called "class". You want:
elem.className = "disableMenu";
and
elem.className = "";
to disable it.
You're also calling the wrong function:
<button onclick="changeColor('disableMenu');">GO</button>
should be
<button onclick="changeClass('disableMenu');">GO</button>
Hope this helps!
===================
Per your comment below I'm fixing your code:
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.className = "disableMenu";
//I put this line in there so you could UNDO your changes.
//Calling this immediately after the previous line will just undo what you did.
//Remove it an you should be good (the line below)
elem.className = "";
}
</script>

I don't have enough rep to comment, but building on dudewad's answer -
Try this code to add the class:
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<p class="merge0">Hi</p>
</td>
</tr>
</table>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var elem = document.getElementById("one");
elem.className = "disableMenu";
}
</script>

Table column re-sizing using jQuery

I am trying to write a piece of code that enables column re-sizing functionality to my data table.But its not working properly.. I explored on internet for couple of days but I could find nothing except some plug-ins. But I don't want to use any plug-in, since my data table is very complicated and if I use them the other functionalities of the table may be destroyed.Thus I tried to write my own. Can you please check and refine my code or suggest any other code that fulfills my spec....
Note: User can re-size the column towards right upto table width but towrds left, its upto td's left position only..
Eidt: Maxwell has given a great alternative..It works fine but in one case.If I try to resize towards left side, its not allowing since td width is fixed to it's content width...But I want to re-size it to left side upto it's its offset().left value by putting td's style to overflow:hidden or some other way....
Here is my piece of code....
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
table{
border-collapse:collapse;
}
table td{
border:1px solid red;
}
.vUiDtColResize{
width:2px;
height:20px;
border:1px solid blue;
float:right;
display:block;
cursor:w-resize;
position:relative;
right:-3px;
float:top;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>S.No <div class="vUiDtColResize"></div></td>
<td>Name <div class="vUiDtColResize"></div></td>
<td>Qualif <div class="vUiDtColResize"></div></td>
</tr>
</thead>
<tbody>
<tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
<tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
<tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
<tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
</tbody>
</table>
<div id="helper"></div>
</body>
<script>
$('.vUiDtColResize').each(function(){
var _rsTd = $(this).parent('td');
var _rsTr = _rsTd.parent('tr');
var _rsTdRight,_thisLeft,_rsTdWidth;
$(this).draggable({axis:'x',containment:_rsTd,refreshPositions:true,
create:function(event,ui){
},
start:function(event,ui){
_rsTdRight = _rsTd.offset().left + _rsTd.outerWidth();
},
drag:function(event,ui){
var _sizeDiff = $(this).offset().left - _rsTdRight;
_rsTdRight = $(this).offset().left;
_rsTdWidth = _rsTd.outerWidth() + _sizeDiff;
_rsTd.outerWidth(_rsTdWidth);
},
stop:function(event,ui){
}
});
});
</script>
</html>

I merged your code with some techniques that I found — http://jsfiddle.net/tpqn7/
IMHO, there are still some problems. First of all I suppose it's would be better (also easier) if table headers can be re-sized by pressing each TH, no only small border.
Hope this helps.

After had been exploring in internet for couple of days, I got a good code,which was modified by me to make it satisfies my requirement as well( Of course, my change is bit little.It might be useful to somebody else,so I am posting here...
style
<link rel="stylesheet" href="E:\Examples\BSP\BSPExtensions\jquery-ui-1.8.18.custom.css"/>
<style>
table {
table-layout: fixed;
border-collapse: collapse;
border: 1px solid black;
}
tr.last td {
border-bottom: 1px solid black;
}
td {
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
white-space:nowrap;
padding: 2px 5px;
text-align: left;
overflow:hidden;
}
td.last {
border-right: none;
}
thead td div:first-child{
text-overflow:ellipsis;
overflow:hidden;
}
tbody td div:first-child{
overflow:hidden;
}
.scrollContainer {
overflow:auto;
width:700px;
height:auto;
display:inline-block;
border:1px solid red;
}
#-moz-document url-prefix() {
.resizeHelper,.ui-resizable-e {
position: relative;
float: right;
}
}
</style>
Script
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script>
/**
* Enables resizable data table columns.
**/
(function($) {
$.widget("ih.resizableColumns", {
_create: function() {
this._initResizable();
},
_initResizable: function() {
var colElement, colWidth, originalSize;
var table = this.element;
this.element.find("thead td").resizable({
handles: {"e": ".resizeHelper"},
minWidth: 2, // default min width in case there is no label
// set correct COL element and original size
start:function(event, ui) {
var colIndex = ui.helper.index() + 1;
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
originalSize = ui.size.width;
},
// set COL width
resize: function(event, ui) {
var resizeDelta = ui.size.width - originalSize;
var newColWidth = colWidth + resizeDelta;
colElement.width(newColWidth);
// height must be set in order to prevent IE9 to set wrong height
$(this).css("height", "auto");
}
});
}
});
// init resizable
$("#MyTable").resizableColumns();
})(jQuery);
</script>
Your html is to be like:*
<div class="scrollContainer">
<table class="resizable" id="MyTable" width="100%">
<thead>
<tr>
<td class="ui-resizable" style="width:100px;">
<div>
<span >Column 1</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 2</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:300px;">
<div>
<span >Column 3</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:150px;">
<div>
<span >Column 4</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 5</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable last" style="width:100px;">
<div>
<span >Column 6</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
<tr class="last">
<td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
</tbody>
</table>
</div>