I have created a function to create a table and have populated it with questions. I have tried to create a button to bring the table but it seems to not be working. Anyone know what I have missed?
<body>
<button onclick="createSheet()">Display</button>
</body>
<script>
var totalQuestions;
function createSheet() {
var sheet = "";
totalQuestions = 8;
sheet += "<div><table>";
for (var i = 0; i < totalQuestions; i++) {
sheet += "<tr>";
sheet += "<td class='question'>";
sheet += "<div class='questionNumber'>" + "A" + (i + 1) + "</div>";
sheet += "<div class='qContent'>" + addition2() + " </div>";
sheet += "</td>";
sheet += "<td class='question'>";
sheet += "<div class='questionNumber'>" + "B" + (i + 1) + "</div>";
sheet += "<div class='qContent'>" + addition2() + " </div>";
sheet += "</td>";
sheet += "<td class='question'>";
sheet += "<div class='questionNumber'>" + "C" + (i + 1) + "</div>";
sheet += "<div class='qContent'>" + addition2() + " </div>";
sheet += "</td>";
sheet += "</tr>";
}
return sheet;
sheet += "</table></div>";
}
function addition2() {
var difficulty = 1000;
var ans;
for (var i = 0; i < totalQuestions; i++) {
var numGen = Math.round(Math.random() * difficulty + 100);
var numGen1 = Math.round(Math.random() * difficulty + 100);
var question = numGen + " + " + numGen1
var ans = numGen + numGen1
}
return question;
}
</script>
I suppose what you are trying to do is display a table when the button is clicked:
<body>
<button onclick="createSheet()">Display</button>
<div id="tableContainer">
</div>
</body>
<script>
var totalQuestions;
function createSheet() {
var sheet = "";
totalQuestions = 8;
sheet += "<div><table>";
for (var i = 0; i < totalQuestions; i++) {
sheet += "<tr>";
sheet += "<td class='question'>";
sheet += "<div class='questionNumber'>" + "A" + (i + 1) + "</div>";
sheet += "<div class='qContent'>" + addition2() + " </div>";
sheet += "</td>";
sheet += "<td class='question'>";
sheet += "<div class='questionNumber'>" + "B" + (i + 1) + "</div>";
sheet += "<div class='qContent'>" + addition2() + " </div>";
sheet += "</td>";
sheet += "<td class='question'>";
sheet += "<div class='questionNumber'>" + "C" + (i + 1) + "</div>";
sheet += "<div class='qContent'>" + addition2() + " </div>";
sheet += "</td>";
sheet += "</tr>";
}
// return sheet; !! return over here will stop the function from continuing
sheet += "</table></div>";
document.getElementById("tableContainer).innerHtml = sheet;
}
function addition2() {
var difficulty = 1000;
var ans;
for (var i = 0; i < totalQuestions; i++) {
var numGen = Math.round(Math.random() * difficulty + 100);
var numGen1 = Math.round(Math.random() * difficulty + 100);
var question = numGen + " + " + numGen1
var ans = numGen + numGen1
}
return question;
}
</script>
Related
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.
I'm trying to get the drop down menu limited to whatever number you put in the max mark input field. E.G. if you put 10 in the max marks input field the drop down menu in the marks field is limited to 10
I tried using onchange but couldn't figure out how to use the number I put in the max mark field in the for loop I have made to create the drop down menu
$(document).ready(function () {
load();
});
function load(){
$("#txtNoOfRec").focus();
$("#btnNoOfRec").click(function () {
$("#AddControll").empty();
var NoOfRec = $("#txtNoOfRec").val();
if(NoOfRec > 0) {
createControll(NoOfRec);
}
});
}
function createControll(NoOfRec) {
var tbl = "";
tbl = "<table>"+
"<tr>"+
"<th> Section </th>"+
"<th> Max </th>"+
"<th> Comment </th>"+
"<th> Marks </th>"+
"</tr>";
for (i=1; i<=NoOfRec; i++) {
tbl += "<tr>"+
"<td>"+
"<input type='text' id='txtSection' placeholder='Section' autofocus/>"+
"</td>"+
"<td>"+
"<input type='text' id='txtMax' placeholder='Max' />"+
"</td>"+
"<td>"+
"<input type='text' id='txtComment' placeholder='Comment' />"+
"</td>"+
"<td>"+
"<select id='ddlMarks'>";
for (let a = 0; a <= 100; a++) {
tbl += "<option>" + a + "</option>";
}
tbl += "</select>"+
"</td>"+
"</tr>";
}
tbl += "</table>";
$("#AddControll").append(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvMain">
<label id="lblNoOfRec"> Enter No Of Rows</label>
<input type="text" id="txtNoOfRec"/>
<input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>
You just need to loop thru NoOfRec the same way you are making the table rows
Instead of looping thru 100 for (let a = 0; a <= 100; a++) { you just loop thru the input number for (var a = 1; a <= NoOfRec; a++) {.
Updated answer
Due to comments from OP, I have updated the code to determine the dropdown options based on the input from the max field generated from the table
$(document).ready(function() {
load();
});
function load() {
$("#txtNoOfRec").focus();
$("#btnNoOfRec").click(function() {
$("#AddControll").empty();
var NoOfRec = $("#txtNoOfRec").val();
if (NoOfRec > 0) {
createControll(NoOfRec);
}
});
$("#AddControll").on( "keyup", ".txtMax", function() {
var $this = $(this);
// get the input value
var l = parseInt( $this.val() );
// if input is a number then append items in dropdown
if( typeof l == 'number' ) {
// find the row parent tr and get the dropdown element then empty it first
var $marks = $this.closest('tr').find('.ddlMarks');
$marks.empty();
// add dropdown items based on input
for (var j = 0; j < l; j++) {
$marks.append("<option>" + j + "</option>");
}
}
} );
}
function createControll(NoOfRec) {
var tbl = "";
tbl = "<table>" +
"<tr>" +
"<th> Section </th>" +
"<th> Max </th>" +
"<th> Comment </th>" +
"<th> Marks </th>" +
"</tr>";
for (i = 1; i <= NoOfRec; i++) {
// ID must be unique, updated ID on inputs/select to use class instead
tbl += "<tr>" +
"<td>" +
"<input type='text' class='txtSection' placeholder='Section' autofocus/>" +
"</td>" +
"<td>" +
"<input type='text' class='txtMax' placeholder='Max' />" +
"</td>" +
"<td>" +
"<input type='text' class='txtComment' placeholder='Comment' />" +
"</td>" +
"<td>" +
"<select class='ddlMarks'>";
for (var a = 0; a < 100; a++) {
tbl += "<option>" + a + "</option>";
}
tbl += "</select>" +
"</td>" +
"</tr>";
}
tbl += "</table>";
$("#AddControll").append(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvMain">
<label id="lblNoOfRec"> Enter No Of Rows</label>
<input type="text" id="txtNoOfRec" />
<input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>
I want to increment a number in the 1st column of each row of my table.
I want to make it without knowing the length of the data.
I tried this, and the number doesn't increment, but just display the variable value in each rows.
$(document).ready(function (e) {
if ($("#checker").val() == "ka") {
var data = $("#report_all").serialize();
$('#all_report thead').empty();
$('#all_report tbody').empty();
$.ajax({
data: data,
type: "Post",
url: "../php/report/report_all_KA.php",
success: function (data) {
var list = JSON.parse(data);
for (var x = 0; i < list.length; i++) {
var n = 1;
n = list.length++;
}
var th = "";
th += "<th>" + "<center>" + 'no' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Tanggal' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Type Kadar Air' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Kode Material' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Nama Material' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Storage Location' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Kadar Air' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Nama PPIC' + "</center>" + "</th>";
th += "</th>";
$("#all_report thead").append(th);
for (var i = 0; i < list.length; i++) {
var tr = "<tr>";
tr += "<td>" + n + "</td>";
tr += "<td>" + list[i]['date'] + "</td>";
tr += "<td>" + list[i]['type'] + "</td>";
tr += "<td>" + list[i]['kode'] + "</td>";
tr += "<td>" + list[i]['nama'] + "</td>";
tr += "<td>" + list[i]['sloc'] + "</td>";
tr += "<td>" + list[i]['ka'] + "</td>";
tr += "<td>" + list[i]['ppic'] + "</td>";
tr += "</tr>";
$("#all_report tbody").append(tr);
$("#all_report").show();
}
return false;
}
});
//[...]
The code that I made for the increment in the whole code above is like this.
for(var x = 0; i < list.length; i++){
var n=1;
n= list.length++;
}
If you are just looking for a column in your table that corresponds to the row numbers, you can replace "<td>" +n+"</td>" with "<td>"+(i+1)+"</td>".
Then you won't even need that other loop!
var table = document.getElementsByTagName('table')[0],
rows = table.getElementsByTagName('tr'),
text = 'textContent' in document ? 'textContent' : 'innerText';
for (var i = 0, len = rows.length; i < len; i++) {
rows[i].children[0][text] = i + rows[i].children[0][text];
}
Hope it works! :)
I want to create a dynamic table in jQuery. But my code creates a table for each of my element.
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var str = dataItem.Description;
var spl = str.split(','), part;
var spl2 = "";
for (var i = 0; i < spl.length; i++) {
part = spl[i].split(':');
content = "<table>" + "<tr><td>" + part[0] + "</td>" + "<td>" + part[1] + "</td></tr>";
spl2 += content;
}
content += "</table>"
var desc = "<div id='openModal' class='modalDialog'>" + "<span>" +
spl2
+ "</span><br/>" +
+ "</div>";
Which part of my code is wrong?
as you were adding table in for loop, so it was creating table for each item.Try this:
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var str = dataItem.Description;
var spl = str.split(','), part;
var spl2 = "";
content ="<table>"
for (var i = 0; i < spl.length; i++) {
part = spl[i].split(':');
content += "<tr><td>" + part[0] + "</td>" + "<td>" + part[1] + "</td></tr>";
spl2 = content;
}
content += "</table>"
// you can also assign spl2 = content; over here.
var desc = "<div id='openModal' class='modalDialog'>" + "<span>" +
spl2
+ "</span><br/>" +
+ "</div>";
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var str = dataItem.Description;
var spl = str.split(','), part;
var spl2 = "";
var content = "<table>";
for (var i = 0; i < spl.length; i++) {
part = spl[i].split(':');
content += "<tr><td>" + part[0] + "</td>" + "<td>" + part[1] + "</td></tr>";
spl2 += content;
}
content += "</table>"
var desc = "<div id='openModal' class='modalDialog'>" + "<span>" +
spl2
+ "</span><br/>" +
+ "</div>";
Updated your script
This is a rather simple question, I am having problems inserting data from Javascript into an HTML table.
Here is an excerpt of my JavaScript:
UPDATED - I got rid of the two loops and simplified it into one, however there is still a problem..
for (index = 0; index < enteredStrings.length; index++) {
output.innerHTML += "<td>" + enteredStrings[index] + "</td>"
+ "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
And here is an except of my HTML page:
<table id="nameTable">
<tr>
<th>First</th><th>Last</th>
</tr>
Updated Picture:
Try this (edited):
var tableContent = '<tr>';
for (index = 0; index < enteredStrings.length; index++) {
tableContent += "<td>" + enteredStrings[index] + "</td>";
nameCounter++; // I don't know if this should be there,
// logically the counter should be incremented here as well?
total.innerHTML = "Total: " + nameCounter;
}
tableContent += '</tr><tr>';
for (index = 0; index < enteredStringsTwo.length; index++) {
tableContent += "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
tableContent += '</tr>';
output.innerHTML += tableContent;
Edit2 (for updated question code):
var tableContent = '<tr>';
for (index = 0; index < enteredStrings.length; index++) {
tableContent += "<td>" + enteredStrings[index] + "</td>"
+ "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
tableContent += '</tr>';
output.innerHTML += tableContent;
Edit3 (after looking at the code sent in email):
var tableContent = "";
for (index = 0; index < enteredStrings.length; index++) {
tableContent += "<tr><td>" + enteredStrings[index] + "</td>"
+ "<td>" + enteredStringsTwo[index] + "</td></tr>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
output.innerHTML = tableContent;
instead of closing the td you are opening new ones
try
for (index = 0; index < enteredStrings.length; index++) {
output.innerHTML += "<td>" + enteredStrings[index] + "</td>";
total.innerHTML = "Total: " + nameCounter;
}
for (index = 0; index < enteredStringsTwo.length; index++) {
output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
UPDATE:
you are appending the html to the table instead of the row.
in this case, the browser created a row for you automatically after the each td is appended.
With slight modifications in your code,
var outputTbl = document.getElementById('nameTable');
var output = document.createElement("tr");
outputTbl.appendChild(output);
for (index = 0; index < enteredStrings.length; index++) {
output.innerHTML += "<td>" + enteredStrings[index] + "</td>";
total.innerHTML = "Total: " + nameCounter;
}
for (index = 0; index < enteredStringsTwo.length; index++) {
output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>";
nameCounter++;
total.innerHTML = "Total: " + nameCounter;
}
If you need to add inner html code here.
<table id="nameTable" style="width:300px;">
<tr>
<th>First</th><th>Last</th>
</tr>
</table>
You can use Jnerator in this case.
If this is your data:
var data = [
{ first: 'Cole', last: 'Alan'},
{ first: 'Michael', last: 'Scott'}
]
You can add them to you table in next way:
for(var i=0; i<data.length; i++) {
var item = data[i];
var row = $j.tr({ child:[$j.td(item.first), $j.td(item.last)] });
nameTable.appendChild(row.dom());
}
nameTotal.innerHTML = 'Total: ' + data.length;
This is example.