How to compare innerHTML string? - javascript

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));
}

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.

Acessing a table with keyboard buttons

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();
});

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 can i access array element inside an object and print them all in a bootstrap table?

i want access the three underlined field in in the obj and and print them in in bootstarp table . now i am just getting one only .
var len = data.hits.length;
console.log(len); // len is 10
for (var i = 0 ; i <= len ; i ++)
{
console.log(data.hits[i].recipe.label);
console.log(data.hits[i].recipe.image);
console.log(data.hits[i].recipe.url);
document.getElementById("result").innerHTML = data.hits[i].recipe.label ;
document.getElementById("result2").innerHTML =
"<img src= "+ data.hits[i].recipe.image +">";
document.getElementById("result3").innerHTML = data.hits[i].recipe.url;
}
my current situation.
You need to append data to a element. But in your code you have replaced the element on every loop. You can append table row in following ways.
var len = data.hits.length;
console.log(len); // len is 10
var tableHtml = "";
for (var i = 0 ; i <= len ; i ++)
console.log(data.hits[i].recipe.label);
console.log(data.hits[i].recipe.image);
console.log(data.hits[i].recipe.url);
tableHtml += "<tr>";
tableHtml += "<td>" + data.hits[i].recipe.label +"</td>" ;
tableHtml += "<td><img src= "+ data.hits[i].recipe.image +"></td>";
tableHtml+ = "<td>" + data.hits[i].recipe.url + "</td>";
tableHtml += "<tr>";
}
document.getElementById("table").innerHTML = tableHtml;
<table id='table'>
<table>

dynamic table in javascript

I am trying to create dynamic table in js.
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
for (var i = 0; i < results.rows.length; i++)
{
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for(var j = 0; j < 7; j++)
{
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode(results.rows.item(i).medicine_name));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).tm_1));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).tm_2));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).tm_3));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).dosage));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).diagnosis));
tr.appendChild(td);
td.appendChild(document.createTextNode(results.rows.item(i).instructions));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
When I execute this code, 7 rows will be created with all the items together. I want to insert each of the data in seperate columns. How can I do it? I want medicine_name to be in one column. tm_1 to be in another and so on.
**The rows will be decided based on results.rows.length value and the number of columns is 7
Totally you have 7 columns and 7 rows.So in first text node td.appendChild(document.createTextNode(results.rows.item((i*7) + 0).medicine_name)); And in second text node use
td.appendChild(document.createTextNode(results.rows.item((i*7) + 1).tm_1)); and so on...
for (var i = 0; i < results.length; i++) {
var html = "";
html += "<tr>";
html += "<td>" + results[i].MedicineName + "</td>";
html += "<td>" + results[i].tm_1+ "</td>";
html += "<td>" + results[i].tm_2+ "</td>";
html += "<td>" + results[i].dosage+ "</td>";
html += "<td>" + results[i].diagnosis+ "</td>";
html += "<td>" + results[i].instructions+ "</td>";
html += "</tr>";
$('#myTableDiv').append(html);
}
<script>
$(document).ready(function () {
var results = getResults();
createTable(results);
});
function createTable(results) {
for (var i = 0; i < results.length; i++) {
var html = "";
html += "<tr>";
html += "<td>" + results[i].MedicineName + "</td>";
html += "<td>" + results[i].tm_1 + "</td>";
html += "<td>" + results[i].tm_2 + "</td>";
html += "<td>" + results[i].dosage + "</td>";
html += "<td>" + results[i].diagnosis + "</td>";
html += "<td>" + results[i].instructions + "</td>";
html += "</tr>";
$('#myTableDiv').append(html);
}
}
function getResults() {
var Results = new Array(0);
for (var j = 0; j < 4; j++) {
var data = new medicine;
data.MedicineName = "Medicine" + j;
data.tm_1 = "tm1" + j;
data.tm_2 = "tm2" + j;
data.dosage = "tm3" + j;
data.diagnosis = "tm4" + j;
data.instructions = "tm5" + j;
Results.push(data);
}
return Results;
};
function medicine() {
var MedicineName = new String();
var tm_1 = new String();
var tm_2 = new String();
var dosage = new String();
var diagnosis = new String();
var instructions = new String();
}
</script>

Categories

Resources