Develop Reference

How to fill generated table with random values in JavaScript

I want to make application teamaker, choose how many players and teams you need, then click button and application will generate a table with random values with a range from Player 1 - Value of input PlayersNum. My biggest problem is table is filling but columns have the same values. What should I do?
<div class="wrapper">
<h1 class="content__header">Let's create some teams!</h1>
<form action="#" class="form">
<label for="playersNum">
Number of players <input type="number" id="playersNum" class="form__input">
</label>
<label for="teamsNum">
Number of teams <input type="number" id="teamsNum" class="form__input">
</label>
<input type="submit" value="Draw teams" class="form__submit">
</form>
</div>
document.addEventListener('DOMContentLoaded',function(){
const form = document.querySelector(".form");
form.addEventListener("submit", function(e){
e.preventDefault();
let teamsNum = document.getElementById("teamsNum").value;
let playersNum = document.getElementById("playersNum").value;
if(playersNum %teamsNum == 0){
const wrapper = document.querySelector(".wrapper");
const tbl = document.createElement("table");
const tblBody = document.createElement("tbody");
for (let i = 0; i < playersNum/teamsNum; i++) {
let row = document.createElement("tr");
for (let j = 0; j < teamsNum; j++) {
let cell = document.createElement("td");
let random = Math.floor(Math.random() * playersNum + 1);
let cellText = document.createTextNode("Player " + random);
cell.appendChild(cellText);
row.appendChild(cell);
}
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
wrapper.appendChild(tbl);
tbl.setAttribute("border", "2");
tbl.style.margin = "20px auto";
tbl.style.width = "50%";
tbl.style.textAlign = "center";
} else alert("Teams must have the same number of players!");
});
});
Repeating values
As you can see on the picture above, values are repeating. How to make every values without repeats in range from Player 1 to value which we have written in the input.

You can try something like this.
HTML
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
</div>
<div id="content">
<table border="1" id="lotto">
<tbody>
<tr>
<td class="normal" id="cell00"> </td>
<td class="normal" id="cell01"> </td>
<td class="normal" id="cell02"> </td>
<td class="red" id="cell03"> </td>
</tr>
<tr>
<td class="normal" id="cell10"> </td>
<td class="normal" id="cell11"> </td>
<td class="normal" id="cell12"> </td>
<td class="red" id="cell13"> </td>
</tr>
<tr>
<td class="normal" id="cell20"> </td>
<td class="normal" id="cell21"> </td>
<td class="normal" id="cell22"> </td>
<td class="red" id="cell23"> </td>
</tr>
<tr>
<td class="normal" id="cell30"> </td>
<td class="normal" id="cell31"> </td>
<td class="normal" id="cell32"> </td>
<td class="red" id="cell33"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<input id="btn" type="button" value="Re-generate Numbers" />
</center>
JavaScript
var btn = document.getElementById('btn');
btn.addEventListener('click', UpdateTable);
// Set the max length of random number
// and the max length
var maxLength = 4;
// Returns a random number
function CreateLottoValues() {
return Math.floor(Math.random() * 4 + 1);
}
//create table
function UpdateTable() {
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxLength; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateLottoValues();
}
}
}
UpdateTable();
Check out this JSFiddle

Creating unique ids and assigned them in html for use Javascript

i am currently trying to create unique ids in html.
However, i am not sure if this below codes is creating unqiue ids and being assigned to the element itself in the html or just creating unqiue ids only.
Please help me out. If this is not assigned them in html, how am i supposed to do them?
var abcElements = document.querySelectorAll('.like');
for (var i = 0; i < abcElements.length; i++){
abcElements[i].id = 'like_' + i;
alert(abcElements[i].id);
}
Updates:
I have include all the related codes in
<td><a onclick="return confirm(this)"><input class="switch" data-toggle="toggle" data-on="like" data-off="unlike" data-onstyle="danger" data-width="90" data-height="30" type="checkbox"></a></td>
<td style="display:none;"><div class="like">${like}</div></td>
Javascript
var abcElements = document.querySelectorAll('.switch');
var status = document.querySelectorAll('.like');
alert(status.length);
for (var i = 0; i < abcElements.length; i++)
{
abcElements[i].id = 'switch_' + i;
alert(abcElements[i].id);
for (var j = 0; j < status.length; j++)
{
status[j].id = 'like_' + j;
var statusText = $('#'+status[j].id+'').html();
alert(statusText);
if(statusText == 'true' )
{
$('#'+abcElements[i].id+'').bootstrapToggle('on');
}
}
}

Based on your code I assume this is what you want?
$("table tr").each(function(row) {
var $row = $(this);
var statusText = $row.find(".like").html();
console.log("status: " + statusText);
if (statusText == "true") {
// $row.find("input.switch").bootstrapToggle('on');
$row.find("input.switch").prop("checked", ($row.find(".like").html() === "true"));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<span><input class="switch" type="checkbox">switch 1</span>
</td>
<td style="display:none;">
<div class="like">false</div>
</td>
</tr>
<tr>
<td>
<span><input class="switch" type="checkbox">switch 2</span>
</td>
<td style="display:none;">
<div class="like">true</div>
</td>
</tr>
</table>

I realized i am assigning the ids for individual divs. I just need to move one of the loops outside that's all.

JavaScript Thumbnails From Array

I'm trying to work on a website currently that displays pictures with the help of java-script. The way that I have this website set up at the moment, an image is displayed above numbered photo links. Instead of having numbers listed below the pictures, I'd like to have the numbers be thumbnails of the pictures. Is it possible to replace them with images? Any help is appreciated.
This is what I have so far:
var photos = new Array();
var photoindex = 0;
photos[0] = "images/piano.jpg";
photos[1] = "images/guitar.jpg";
photos[2] = "images/studio.jpg";
photos[3] = "images/sheetmusic.jpg";
function backward() {
if (photoindex > 0) {
document.images.p.src = photos[--photoindex];
}
}
function forward() {
if (photoindex < photos.length - 1) {
document.images.p.src = photos[++photoindex];
}
}
for (i = 0; i < photos.length; i++) {
document.write("" + i + " ");
}
function goto(n) {
if (n < photos.length && n >= 0) {
photoindex = n;
document.images.p.src = photos[photoindex];
}
}
<br>
<div style="text-align:center;left:5px;">
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" align="center" valign="top">
<img src="images/weloveweb.png" name="p" width="250" height="188" id="p" />
</td>
</tr>
<tr>
<td valign="top"><<
</td>
<td valign="top" style="text-align: center">
</td>
<td valign="top" style="text-align: right">>>
</td>
</tr>
</table>
</div>

Since your thumbnail urls are stored in the photos array, what you need to do to display a thumbnail instead of its index is to create an img tag with a src attribute containing each thumbnail's url (i.e. photos[i]).
Change:
for (i = 0; i < photos.length; i++) {
document.write("" + i + " ");
// ------------------------------------------------------------^ change this `i`
}
Into:
for (i = 0; i < photos.length; i++) {
document.write("" + "<img src=" + photos[i] + "/> ");
}

how to assign random values from array to table cell on a button click

I want to implement the code to create a bingo appliacation where it takes the letters from array on a button click.
How can i assign the array element like array(a,b,c) to those 3X3 table cells randomly on run button click. when i got sequence like abc in a row or diagonal i want increment the count value.
I started but i am unable to implement the code. Can i get any suggestion please.
Here is my code
<html>
<head>
<script>
function run(){
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = rand();
row.cells[1].textContent = rand();
row.cells[2].textContent = rand();
}
score()
}
function rand(){
var text = new Array();
var possible = "MCS*";
return possible.charAt(Math.floor(Math.random() * possible.length));
}
function score(){
var Row = document.getElementById("grid");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
alert(Cells[1].innerText);
alert(Cells[2].innerText);
alert(Cells[3].innerText);
alert(Cells[5].innerText);
alert(Cells[6].innerText);
alert(Cells[7].innerText);
alert(Cells[8].innerText);
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>
Thanks in advance..

<html>
<head>
<script>
var arr_num = ["1","2","3"];
var match =["123","234","345","567","678","111","222","333","444","555","666"];
function run(){
var counter =0;
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = arr_num[getRandom()];
row.cells[1].textContent = arr_num[getRandom()];
row.cells[2].textContent = arr_num[getRandom()];
}
var a = getMatch();
for(var i=0;i<getMatch().length; i++){
if(match.indexOf(a[i]) > -1)
counter++;
}
document.getElementById("count").innerHTML = counter++;
}
function getMatch(){
var grid = document.getElementById("grid");
var match1 = [[]];
var match_dia =[];
var temp_dia1 = 0;
var temp_dia2 = 2;
var temp_dia3 = 0;
var temp_dia4 = 2;
var match_col = [];
for (var i = 0, row; row = grid.rows[i]; i++){
match1[match1.length++] = row.cells[0].textContent+row.cells[1].textContent+row.cells[2].textContent;
match1[match1.length++] = row.cells[2].textContent+row.cells[1].textContent+row.cells[0].textContent;
if(match_col.length != 0){
match_col[0] = match_col[0]+row.cells[0].textContent;
match_col[1] = match_col[1]+row.cells[1].textContent;
match_col[2] = match_col[2]+row.cells[2].textContent;
match_col[3] = row.cells[0].textContent+match_col[3];
match_col[4] = row.cells[1].textContent+match_col[4];
match_col[5] = row.cells[2].textContent+match_col[5];
}else{
match_col[0] = row.cells[0].textContent;
match_col[1] = row.cells[1].textContent;
match_col[2] = row.cells[2].textContent;
match_col[3] = row.cells[0].textContent;
match_col[4] = row.cells[1].textContent;
match_col[5] = row.cells[2].textContent;
}
if(match_dia.length != 0){
match_dia[0] = match_dia[0]+row.cells[temp_dia1++].textContent;
match_dia[1] = match_dia[1]+row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent+match_dia[2];
match_dia[3] = row.cells[temp_dia4--].textContent+match_dia[3];
}else{
match_dia[0] = row.cells[temp_dia1++].textContent;
match_dia[1] = row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent;
match_dia[3] = row.cells[temp_dia4--].textContent;
}
}
for(var i=0;i<match_col.length;i++){
match1[match1.length++] = match_col[i];
}
match1[match1.length++] = match_dia[0];
match1[match1.length++] = match_dia[1];
return match1;
}
function getRandom(){
return Math.floor(Math.random() * arr_num.length) + 0 ;
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<div id="count" name="count"></div>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>

This is how you would assign a value to each cell:
for(var row = 1; row <= 3; row++) {
for(var col = 1; col <= 3; col++ {
var id = '#'+ row + "-" + col;
$(id).html(/* put some content here */);
}
}
To assign a random number see Math.random(). If you multiply that value with 10 and round it down, you will get an integer between 0 and 9. Use that value to pick an element from your array.
Edit
So if you have an array like letters = [ "A", "B", "CD", "asum", 12, "whatsoever" ]and a random number n then letters[n] will give you the array element with index n. For n == 2: letters[n] == "CD"

Well this is NOT bingo but your "assign random letter a,b,c to a space in a grid" can be satisfied by:
var bingocol = ["a", "b", "c"];
/**
* Returns a random integer between min (inclusive) and max (inclusive)
* Using Math.round() will give you a non-uniform distribution!
*/
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$('#runbingo').on("click", function() {
var nextcolindex = getRandomIntInclusive(0, 2);
var nextletterindex = getRandomIntInclusive(0, 2);
var nextrow = getRandomIntInclusive(0, 2);
$('#grid').find('tr').eq(nextrow).find('td').eq(nextcolindex).html(bingocol[nextletterindex]);
});
NOW if you really want to emulate BINGO where the column varies and the NUMBERS in the column vary by a given sequence that is a different problem; note that you would then need to have one algorithm to assign the player cards and another to pick random values from a list for the "game" card both of which would need to consider the range and previously filled values to exclude duplicates - doable but an entirely different problem.
Here is the code above in action: https://jsfiddle.net/MarkSchultheiss/tjd7j3oh/

dynamically filter rows of a HTML table using JavaScript

So I have this table:
<table border="1" align="center">
<tr>
<td>Broj_pu</td>
<td>Naziv_pu</td>
<td>ID</td>
<td>Naselje</td>
<td>zupanija</td>
</tr>
<tr>
<td><input type="text" ID="broj_pu" onkeydown="Filter(document.getElementById('broj_pu').value, 'broj_pu')" /></td>
<td><input type="text" ID="naziv_pu" onkeydown="Filter(document.getElementById('naziv_pu').value, 'naziv_pu')" /></td>
<td><input type="text" ID="ID" onkeydown="Filter(document.getElementById('ID').value, 'ID')" /></td>
<td><input type="text" ID="naselje" onkeydown="Filter(document.getElementById('naselje').value, 'naselje')" /></td>
<td><input type="text" ID="zupanija" onkeydown="Filter(document.getElementById('zupanija').value, 'zupanija')" /></td>
</tr>
<tr class="row" ID="row_filter">
<td>10000</td>
<td>Zagreb</td>
<td>1</td>
<td>Sljeme</td>
<td>ZAGREBACKA</td>
</tr>
<tr class="row" ID="row_filter">
<td>10000</td>
<td>Zagreb</td>
<td>2</td>
<td>Zagreb-dio</td>
<td>ZAGREBACKA</td>
</tr>
<!-- A lot of rows -->
...
</table>
And also I have started this JavaScript:
<script type="text/javascript">
function Filter(text, column_name){
var x = document.getElementByClassName("row");
var i = 0;
var y;
if (text != ""){
switch (column_name){
case "broj_pu":
for (i = 0; i < x.length; i++){
y = x[i].getElementByTagName("td");
if((y[0].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
case "naziv_pu":
y = x[i].getElementByTagName("td");
if((y[1].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
case "ID":
y = x[i].getElementByTagName("td");
if((y[2].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
case "naselje":
y = x[i].getElementByTagName("td");
if((y[3].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
case "zupanija":
y = x[i].getElementByTagName("td");
if((y[4].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
}
}
}
</script>
Now, I need to filter the table as the user inputs letters to the text fields, but I have no idea how to edit the display document as I enter the data.
Anyone have an idea?
EDIT1:
So I edited the script but it doesn't seem to work. What did I do wrong?

This question is reminding me of how java script is nasty without any framework support :)
However I have sorted-out this issue for you ( tested on firefox 10.0.2).
check the complete working solution on jsfiddle
please remember this is just working example , you might need to write ALL-Browser compliant script .
script:
var filters=['hide_broj_pu','hide_naziv_pu','hide_ID','hide_naselje','hide_zupanija'];
function ExcludeRows(cls){
var skipRows=[];
for(i=0;i<filters.length;i++)
if(filters[i]!=cls) skipRows.push(filters[i]);
var pattern=skipRows.join('|')
return pattern;
}
function Filter(srcField){
var node=srcField.parentNode;
var index=srcField.parentNode.cellIndex;
//all the DATA rows
var dataRows= document.getElementsByClassName("row");
//ensure that dataRows do not have any filter class added already
var kids= dataRows.length;
var filter ='hide_'+srcField.id;
var pattern = ExcludeRows(filter);
var skipRow = new RegExp(pattern,"gi");
var searchReg =new RegExp('^'+srcField.value,'gi');
var replaceCls= new RegExp(filter,'gi');
for(i=0; i< kids ; i++){
//skip if already filter applied
if(dataRows[i].className.match(skipRow)) continue;
//now we know which column to search
//remove current filter
dataRows[i].className=dataRows[i].className.replace(replaceCls,'');
if(!dataRows[i].cells[index].innerHTML.trim().match(searchReg))
dataRows[i].className=dataRows[i].className +' '+ filter;
}
}
HTML
<table border="1" align="center">
<tr><td>Broj_pu</td><td>Naziv_pu</td><td>ID</td><td>Naselje</td><td>zupanija</td></tr>
<tr>
<td><input type="text" ID="broj_pu" onkeydown="Filter(this)" /></td>
<td><input type="text" ID="naziv_pu" onkeydown="Filter(this)" /></td>
<td><input type="text" ID="ID" onkeydown="Filter(this)" /></td>
<td><input type="text" ID="naselje" onkeydown="Filter(this)" /></td>
<td><input type="text" ID="zupanija" onkeydown="Filter(this)" /></td>
</tr>
<tr class="row" ><td>10000</td><td>Zagreb</td><td>1</td><td>Sljeme</td><td>ZAGREBACKA</td></tr>
<tr class="row" ><td>10000</td><td>Zagreb</td><td>2</td><td>Zagreb-dio</td><td>ZAGREBACKA</td></tr>
</table>
CSS
.hide_broj_pu,
.hide_naziv_pu,
.hide_ID,
.hide_naselje,
.hide_zupanija
{display:none}

For Javascript Table Search, Try:
<p>Search: <input type="text" id="searchTerm" onkeyup="doSearch()" /></p>
<table id="dataTable">
<script>
function doSearch() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("searchTerm");
filter = input.value.toUpperCase();
table = document.getElementById("dataTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}
</script>