Acessing a table with keyboard buttons - javascript

I have this table,is any way I can access that table with keyboard buttons?
Example if I press "W"I will be in [2,1] ,if I press button from keyboard "E" to be on [3,1].My table code similar to this image you see
function draw_empty_board() {
var t = '<table id="chess_table">';
for (var i = 2; i > 0; i--) {
t += '<tr>';
t += '<td class="line_label">' + i + '</td>';
for (var j = 1; j < 13; j++) {
t += '<td class="chess_square" id="square_' + j + '_' + i + '"></td>';
}
t += '</tr>';
}
t += '<tr><td class="column_label line_label"></td>';
for (var j = 1; j < 13; j++) {
t += '<td class="column_label">' + j + '</td>';
}
t += '</tr>';
t += '</table>';
$('#chess_board').html(t);
}

Here example: https://jsfiddle.net/3b2xcsoq/6/
function selectText(containerid) {
if (document.selection) { // IE
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
let activeRow = 1;
let activeColumn = 1;
let rowCount = 2;
let columnCount = 13;
function draw_empty_board() {
var t = '<table id="chess_table">';
for (var i = rowCount; i > 0; i--) {
t += '<tr>';
t += '<td class="line_label">' + i + '</td>';
for (var j = 1; j < columnCount; j++) {
t += '<td class="chess_square" id="square_' + j + '_' + i + '">' + j + ',' + i + '</td>';
}
t += '</tr>';
}
t += '<tr><td class="column_label line_label"></td>';
for (var j = 1; j < 13; j++) {
t += '<td class="column_label">' + j + '</td>';
}
t += '</tr>';
t += '</table>';
document.body.innerHTML = t;
}
function keyboardControl() {
document.body.addEventListener('keyup', (e) => {
switch (e.key) {
case 'w':
case 'W':
if (activeRow < rowCount) {
activeRow++;
}
break;
case 's':
case 'S':
if (activeRow > 1) {
activeRow--;
}
break;
case 'd':
case 'D':
if (activeColumn < columnCount - 1) {
activeColumn++;
}
break;
case 'a':
case 'A':
if (activeColumn > 1) {
activeColumn--;
}
break;
default:
break;
}
selectText(`square_${activeColumn}_${activeRow}`);
})
}
window.addEventListener('load', (event) => {
draw_empty_board();
selectText(`square_${activeColumn}_${activeRow}`);
keyboardControl();
});

Related

how can i alternate row class after api data

I have tried everything i know and can't get an alterate tablerow class to work , without having all the rows duplicated or having a bunch of dummy rows inserted
Here is what i have
<script>
fetch("https://www63.myfantasyleague.com/2021/export?TYPE=league&L=43570&JSON=1").then(
res => {
res.json().then(
data => {
console.log(data.league.franchises.franchise);
if (data.league.franchises.franchise.length > 0) {
var temp = "";
temp += "<table id='league_emails'>";
temp += "<tbody>";
temp += "<tr><th>Franchise</th><th>Owner Name</th><th>Email</th></tr>";
data.league.franchises.franchise.forEach((itemData) => {
for (var i = 0; i < data.league.franchises.franchise.length; i++) {
if (i % 2)
temp += '<tr class="eventablerow">';
else
temp += '<tr class="oddtablerow">';
}
temp += "<td>" + itemData.name + "</td>";
temp += "<td>" + itemData.owner_name + "</td>";
temp += "<td>" + itemData.email + "</td>";
});
temp += "</tbody>";
temp += "</table>";
document.getElementsByClassName('commish_league_safe')[0].innerHTML = temp;
}
}
)
}
)
</script>
<div class="commish_league_safe"></div>
The issue lays here and i have tried a dozen things and wrapped it different ways
for (var i = 0; i < data.league.franchises.franchise.length; i++) {
if (i % 2)
temp += '<tr class="eventablerow">';
else
temp += '<tr class="oddtablerow">';
}
<script>
fetch(https://www63.myfantasyleague.com/2021/export?TYPE=league&L=43570&JSON=1).then(
res => {
res.json().then(
data => {
console.log(data.league.franchises.franchise);
if (data.league.franchises.franchise.length > 0) {
var temp = "";
temp += "<table id='league_emails'>";
temp += "<tbody>";
temp += "<tr><th>Franchise</th><th>Owner Name</th><th>Email</th></tr>";
data.league.franchises.franchise.forEach((itemData,i) => {
/* for (var i = 0; i < data.league.franchises.franchise.length; i++) { */
if (i % 2)
temp += '<tr class="eventablerow">';
else
temp += '<tr class="oddtablerow">';
/* } */
temp += "<td>" + itemData.name + "</td>";
temp += "<td>" + itemData.owner_name + "</td>";
temp += "<td>" + itemData.email + "</td>";
temp += "</tr>";
});
temp += "</tbody>";
temp += "</table>";
document.getElementsByClassName('commish_league_safe')[0].innerHTML = temp;
}
}
)
}
)
</script>
<div class="commish_league_safe"></div>
Just before ending the loop close the tr tag.
temp += "" + itemData.email + ""; after this line just add closing tag to append that to temp variable.

Draw an inverted right triangle from right to left with JS HTML

I am trying to draw the 3rd and 4th triangle in the following picture with JS in HTML. I made two functions for the first two triangles, and I think I just need to twist the for loops a little bit for the 3rd and 4th ones but I don't know how to do it.
Here are the codes for the first two ones.
function draw1() {
let mytable = "<table>"
for (let i = 1; i < 6; i++) {
mytable += "<tr>";
mytable += "<td>" + "*".repeat(i) +"</td>";
}
mytable += "</tr>"
document.write(mytable)
}
draw1()
function draw2() {
let mytable = "<table>"
for (let i = 5; i > 0; i--) {
mytable += "<tr>";
mytable += "<td>" + "*".repeat(i) +"</td>";
}
mytable += "</tr>"
document.write(mytable);
}
draw2()
In order to rotate your * arrows, you don't have to redo the js. You can simply use the css direction: rtl rule for the table that your js creates. Like this:
table {
direction: rtl;
}
function draw1() {
let mytable = "<table>"
for (let i = 1; i < 6; i++) {
mytable += "<tr>";
mytable += "<td>" + "*".repeat(i) +"</td>";
}
mytable += "</tr>"
document.write(mytable);
}
draw1();
function draw2() {
let mytable = "<table>"
for (let i = 5; i > 0; i--) {
mytable += "<tr>";
mytable += "<td>" + "*".repeat(i) +"</td>";
}
mytable += "</tr>"
document.write(mytable);
}
draw2();
table {
direction: rtl;
}
You need add spaces before you add *. Since you are rendering HTML use for space character. Use 2 of them to appropriately cover area in loop.
function draw1() {
let mytable = "<table>";
for (let i = 1; i < 6; i++) {
mytable += "<tr>";
mytable += "<td>" + "*".repeat(i) +"</td>";
}
mytable += "</tr>";
document.write(mytable);
}
draw1()
function draw2() {
let mytable = "<table>";
for (let i = 5; i > 0; i--) {
mytable += "<tr>";
mytable += "<td>" + "*".repeat(i) +"</td>";
}
mytable += "</tr>";
document.write(mytable);
}
draw2();
function draw3() {
let mytable = "<table>";
for (let i = 1; i < 6; i++) {
mytable += "<tr>";
mytable += "<td>" + " ".repeat(5-i) + "*".repeat(i) +"</td>";
}
mytable += "</tr>";
document.write(mytable);
}
draw3();
function draw4() {
let mytable = "<table>";
for (let i = 5; i > 0; i--) {
mytable += "<tr>";
mytable += "<td>" + " ".repeat(5-i) + "*".repeat(i) +"</td>";
}
mytable += "</tr>";
document.write(mytable);
}
draw4();
Use the code below to create the pattern.
let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 1; i <= n; i++) {
// printing spaces
for (let j = 0; j < n - i; j++) {
string += " ";
}
// printing star
for (let k = 0; k < i; k++) {
string += "*";
}
string += "\n";
}
console.log(string);
Here is code for the second pattern.
let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 0; i < n; i++) {
// printing star
for (let k = 0; k < n - i; k++) {
string += "*";
}
string += "\n";
}
console.log(string);

How to fix data table data is being updated or destroy table?

I am trying to create a data table with my dataset and I want to reinitialize the same table for the new data. But it's getting appended to the same table rather than re-initialising it. This is my code
function showTab(name,data){
trheader = "";
trvalues = "";
trcontent = "";
trfoot = "";
table_id = "";
trheader += "<thead>";
for (i = 0; i < data[0].length; i++){
trheader += "<th>" + data[0][i]+ "</th>";
}
trheader += "</thead>";
if(data[1].length > 0){
for (i = 0; i < data[1].length; i++){
trvalues += "<tbody>"
trvalues += "<tr>"
trvalues += "<td class='center'>" + (i + 1) + "</td>";
trvalues += "<td class='center'>" + data[1][i][0] + "</td>";
for (j = 0; j < 4; j++ ){
trvalues += "<td class='center'>" + data[1][i][1][j].toLocaleString() + "</td>";
}
for(j = 4; j < 7; j++){
var patt = /^-/;
var color = data[1][i][1][j].toString();
if (color.match(patt)){
trvalues += "<td class='center redCell'>" + data[1][i][1][j].toFixed(2) + '%'+ "</td>";
}
else if(color == '0'){
trvalues += "<td></td>"
}
else{
trvalues += "<td class='center greenCell'>" + data[1][i][1][j].toFixed(2) + '%' + "</td>";
}
}
trvalues += "</tr>"
trvalues += "</tbody>"
}
}
if (data[2].length > 0)
{
trfoot += "<tfoot>"
trfoot += "<tr>"
trfoot += "<td></td>"
trfoot += "<td>Total</td>"
for (i = 0; i < 4; i++){
trfoot += "<td class='center'>" + data[2][i].toLocaleString() + "</td>";
}
for( i = 4; i < 7; i ++){
var patt = /^-/;
var color = data[2][i].toString();
if (color.match(patt)){
trfoot += "<td class='center redCell'>" + data[2][i].toFixed(2) + '%'+ "</td>";
}
else if(color == '0'){
trfoot += "<td></td>"
}
else{
trfoot += "<td class='center greenCell'>" + data[2][i].toFixed(2) + '%' + "</td>";
}
}
trfoot += "</tr>"
trfoot += "</tfoot>"
}
trcontent = trheader + trvalues + trfoot;
table = "#"+name;
$(table).html(trcontent);
$(table).DataTable({
"scrollY": "400px",
"scrollCollapse": true,
"paging": false,
"searching": false,
"destroy": true
});
// new addition code
var seen = {};
$('table tr').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
If I use $(table).html it will only load the last value that is trfooter. I have tried setting bDestroy for the table but nothing helps. Please help. Thanks.
This is my table skeleton
<table border = "1px"cellpadding="0" cellspacing="1" width="100%" id= <%= table&.table_name %> style="background: none repeat scroll 0% 0%;font-size:12px;">
</table>
You can destroy and re-declare your datatable to load the latest content
// First Declaration
var table = $('#myTable').DataTable();
$('#submit').on( 'click', function () {
$.getJSON( 'newTable', null, function ( json ) {
// Destroy
table.destroy();
$('#myTable').empty(); // empty in case the columns change
// ReDraw
table = $('#myTable').DataTable( {
columns: json.columns,
data: json.rows
} );
} );
} );
For more reference : https://datatables.net/reference/api/destroy()

Cannot get table rows to work in Javascript using innerHTML

I have to create a calendar application for a school project using Javascript. The table must created using the innerHTML property. I've managed to get everything to work but for some reason can't figure out why the rows of the calendar aren't being created - all the days are stacked up into one long column. I've inserted the tags in the proper places (I think).
Full JSFiddle is here: https://jsfiddle.net/68294kdh/
var date = new Date();
var month = date.getMonth();
var monthName = getMonthText(month);
var year = date.getFullYear();
var firstDay = new Date(year, month, 1);
var lastDay = getLastDayofMonth(month);
$('month_year').innerHTML = monthName + ' ' + year;
var day = 0;
$('calendar').innerHTML += "<tr>";
for(i=0; i<7; i++) {
if(i >= firstDay.getDay()) {
day++;
$('calendar').innerHTML += '<td>' + day + '</td>';
} else {
$('calendar').innerHTML += '<td>' + ' ' + '</td>';
}
}
$('calendar').innerHTML += "</tr>";
for(i=0; i<4; i++) {
$('calendar').innerHTML += '<tr>';
for(j=0; j<7; j++) {
if(day < lastDay) {
day++;
$('calendar').innerHTML += '<td>' + day + '</td>';
} else {
$('calendar').innerHTML += '<td>' + ' ' + '</td>';
}
}
$('calendar').innerHTML += '</tr>';
}
You need to add all of your HTML for the table at the same time. Try something like this:
window.onload = function () {
var date = new Date();
var month = date.getMonth();
var monthName = getMonthText(month);
var year = date.getFullYear();
var firstDay = new Date(year, month, 1);
var lastDay = getLastDayofMonth(month);
$('month_year').innerHTML = monthName + ' ' + year;
var day = 0;
var htmlString = "";
var htmlString += '<tr>';
for(i=0; i<7; i++) {
if(i >= firstDay.getDay()) {
day++;
htmlString += '<td>' + day + '</td>';
} else {
htmlString += '<td>' + ' ' + '</td>';
}
}
htmlString += '</tr>';
for(i=0; i<4; i++) {
htmlString += '<tr>';
for(j=0; j<7; j++) {
if(day < lastDay) {
day++;
htmlString += '<td>' + day + '</td>';
} else {
htmlString += '<td>' + ' ' + '</td>';
}
}
htmlString += '</tr>';
}
$('calendar').innerHTML+=htmlString;
};
That is very inefficient.
Try this:
var body = []
var htmlString = "";
var htmlString += '<tr>';
for (i = 0; i < 7; i++) {
if (i >= firstDay.getDay()) {
day++;
htmlString += '<td>' + day + '</td>';
} else {
htmlString += '<td>' + ' ' + '</td>';
}
}
htmlString += '</tr>';
body.push(htmlString)
htmlString = '<tr>'
for (i = 0; i < 4; i++) {
htmlString += '<tr>';
for (j = 0; j < 7; j++) {
if (day < lastDay) {
day++;
htmlString += '<td>' + day + '</td>';
} else {
htmlString += '<td>' + ' ' + '</td>';
}
}
htmlString += '</tr>';
body.push(htmlString)
$('calendar').innerHTML = '<tbody>' + body.join('') + '</tbody>'

How to compare innerHTML string?

Is it possible to get the results of "fusiontabledata" and "fusiontabledata2", compare both and generate a third "sidebar" showing only the duplicates?
document.getElementById('sidebar_1').innerHTML = fusiontabledata;
document.getElementById('sidebar_2').innerHTML = fusiontabledata2;
function getData_From(response) {
FTresponse = response;
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
fusiontabledata = "<table><tr>";
fusiontabledata += "</tr><tr>";
for (i = 0; i < numRows; i++) {
for (j = 0; j < numCols; j++) {
fusiontabledata += "<td>" + response.getDataTable().getValue(i, j) + "</td>";
}
fusiontabledata += "</tr><tr>";
}
fusiontabledata += "</table>"
document.getElementById('sidebar_1').innerHTML = fusiontabledata;
}
function getData_To(response) {
FTresponse = response;
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
fusiontabledata2 = "<table><tr>";
fusiontabledata2 += "</tr><tr>";
for (i = 0; i < numRows; i++) {
for (j = 0; j < numCols; j++) {
fusiontabledata2 += "<td>" + response.getDataTable().getValue(i, j) + "</td>";
}
fusiontabledata2 += "</tr><tr>";
}
fusiontabledata2 += "</table>"
document.getElementById('sidebar_2').innerHTML = fusiontabledata2;
}
innerHTML is a string, you may easily compare both strings.
Do it at the end of both functions, when the strings are equal, add the results to the 3rd sidebar:
if(document.getElementById('sidebar_1').innerHTML
===
document.getElementById('sidebar_2').innerHTML){
document.getElementById('sidebar_3')
.appendChild(document.getElementById('sidebar1')
.firstChild.cloneNode(true));
}

Categories

Resources