Loop every nth item and fill the blanks - javascript
I want to build an HTML table string for every 10 items in a Javascript array, and if there are less than 10 items in the last iteration I want to fill it with empty rows.
How do I achieve this?
var array_of_items; //array of items
//make a html table string every 10 items
var table = '<table>';
table += '<tr><td>' + item1 + '</td></tr>';
table += '<tr><td>' + item2 + '</td></tr>';
.
.
.
table += '<tr><td>' + item10 + '</td></tr>';
table += '</table>';
//make second table
table = '<table>';
table += '<tr><td>' + item11 + '</td></tr>';
table += '<tr><td>' + item12 + '</td></tr>'; //array ends here
table += '<tr><td></td></tr>';
.
.
.
table += '<tr><td></td></tr>';
table += '</table>';
$('#table_div').html(table);
var table = '';
var numTables = Math.ceil(array_of_items.length / 10); //determine how many tables
for (var i=0;i<numTables;i++){
table +='<table>';
for (var j=0;j<10;j++){
(array_of_items[i*10+j] ? table +='<tr><td>' + array_of_items[i*10+j] + '</td></tr>' : table +='<tr><td></td></tr>');
}
table +='</table>';
}
var ln = items.length;
var lnten = ln + 10 - ln%10;
var container = $('#table_div');
for (var j = 0; j < lnten; j++) {
var tbl;
if (j % 10 == 0)
tbl = $('<table/>');
var tr = $('<tr/>');
var td = $('<td/>');
if (j < ln)
td.text(items[j]);
tr.append(td);
tbl.append(tr);
if (j % 10 == 0)
container.append(tbl);
}
jsfiddle DEMO
I think you're looking for this
for (var i = 0; i < array_of_items.length; i+=10) {
var table = '<table>';
for (var j = i; j < i+10; ++j) {
if (array_of_items[j] === 'undefined') {
table += '<tr><td></td></tr>';
}
else table += '<tr><td>' + array_of_items[j] + '</td></tr>';
}
table += '</table>';
}
Related
I cant seem to get it straight with my search. Issues of strings and array are on my case
Here is my script for displaying loading data onto my table: function my_data(result,j){ console.log(result); var length = result.length; console.log(length); j = Number(j); $('#news_data tbody').empty(); for(var i = 0 ; i < length; i++){ j+=1; var tr = "<tr>"; tr += "<td>"+ j +"</td>"; tr += "<td><a href='"+ result[i].product_id +"' target='_blank'>" +result[i].product_name +"</a></td>"; tr += "<td>"+ result[i].product_price +"</td>"; tr += "</tr>"; $('#news_data tbody').append(tr); } } And here is my search: $('#search_text').keyup(function () { var search = $(this).val(); if (search != '') { my_data(search); } else { my_data(); } }); When I search I get the list of items filtered as undefined
How can i put data from parsed csv to select boxes?
I used JS to parse the csv file. Example of csv : Year,Model,Mileage,Color,Vin,Image 2012,BUICK LACROSSE FWD V6 FFV 4D SEDAN LEATHER,113046,BROWN,1G4GC5E34CF177752,https:imagelink And the code of parser $(document).ready(function(){ $('#load_data').click(function(){ $.ajax({ url:"Cars.csv", dataType:"text", success:function(data) { var cars_data = data.split(/\r?\n|\r/); var table_data = '<table class="table table-bordered table-striped">'; for(var count = 0; count<cars_data.length; count++) { var cell_data = cars_data[count].split(","); table_data += '<tr>'; for(var cell_count=0; cell_count<cell_data.length; cell_count++) { if(count === 0) { table_data += '<th>'+cell_data[cell_count]+'</th>'; } else { table_data += '<td>'+cell_data[cell_count]+'</td>'; } } table_data += '</tr>'; } table_data += '</table>'; $('#cars_table').html(table_data); } }); }); }); Example of select boxes <select> <option value="0">Model</option> <option value="1">HERE COMES THE MODEL FROM PARSED CSV</option> </select> So how can i put data from this parsed csv to select boxes on the html ?
Since your question wasn't clear to me, I added two solutions. The first solution one takes the Model column and offers a selectbox for this column. You can change the column to use as a select box if you change the select_column_index (to use the Year for example, set select_column_index = 0). I created the addTable(data) function. This is equal to your success:function(){...}, but for testing I cannot use ajax. Your code is then $(document).ready(function(){ $('#load_data').click(function(){ $.ajax({ url:"Cars.csv", dataType:"text", success:addTable, }); ); }); The code takes the column with the select_column_index and uses the first cell (in the first row in the select_column_index-th column) as the label. The following cells (in each row in the select_column_index-th column) are the options for the select. Note that one should not use the label as the first option from the select box as you did in your example. This makes it possible for users to select the mode Model which makes no sense. This is more complicated for users and leads to mistakes. Also you have to check the result on the server side which is more unnecessary code. You can check the output in the following snippet. The second solution is added below. // for demo only let csv = "Year,Model,Mileage,Color,Vin,Image\n" + "2012,BUICK LACROSSE FWD V6 FFV 4D SEDAN LEATHER,113046,BROWN,1G4GC5E34CF177752,\n" + "2013,Lincoln MKZ 3.7L AWD,113046,Lincoln,,\n"; // for demo only $(document).ready(function(){ addTable(csv); }); function addTable(data){ var cars_data = data.split(/\r?\n|\r/); var table_data = '<table class="table table-bordered table-striped">'; // use model for the select var select_column_index = 1; var label_data = "<label for='csv-select'>"; var select_data = "<select id='csv-select'>"; for(var count = 0; count<cars_data.length; count++){ var cell_data = cars_data[count].split(","); table_data += '<tr>'; for(var cell_count=0; cell_count<cell_data.length; cell_count++){ if(count === 0){ table_data += '<th>'+cell_data[cell_count]+'</th>'; } else{ table_data += '<td>'+cell_data[cell_count]+'</td>'; } if(cell_count == select_column_index){ if(count == 0){ label_data += cell_data[cell_count]; } else{ select_data += "<option value='" + cell_data[cell_count] + "'>" + cell_data[cell_count] + "</option>"; } } } table_data += '</tr>'; } table_data += '</table>'; label_data += "</label>"; select_data += "</select>"; $('#cars_table').html(table_data); $('#select-wrapper').html(label_data + " " + select_data); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="cars_table"></div> <div id="select-wrapper"></div> The second solution takes all the columns and adds a select box for each column. Note that I did not add the table, you can just use your code. This is basically the same code but I am saving the options to another variable. After all options of all columns are present, they are pasted (replace the %options%) in the select boxes. // for demo only let csv = "Year,Model,Mileage,Color,Vin,Image\n" + "2012,BUICK LACROSSE FWD V6 FFV 4D SEDAN LEATHER,113046,BROWN,1G4GC5E34CF177752,\n" + "2013,Lincoln MKZ 3.7L AWD,113046,Lincoln,,\n"; // for demo only $(document).ready(function(){ addSelects(csv); }); function addSelects(data){ var cars_data = data.split(/\r?\n|\r/); var select_options = []; var select_html = ""; for(var count = 0; count < cars_data.length; count++){ var cell_data = cars_data[count].split(","); for(var cell_count = 0; cell_count < cell_data.length; cell_count++){ if(count == 0){ select_html += "<div class='select-line'>" + "<label for='select-" + cell_count + "'>" + cell_data[cell_count] + "</label>" + "<select id='select-" + cell_count + "' name='" + cell_data[cell_count] + "'>" + "%options%" + "</select>" + "</div>"; } else{ if(select_options.length < cell_count){ select_options.push(""); } select_options[cell_count] += "<option value='" + cell_data[cell_count] + "'>" + cell_data[cell_count] + "</option>"; } } } for(var i = 0; i < select_options.length; i++){ select_html = select_html.replace("%options%", select_options[i]); } $('#selects').html(select_html); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="selects"></div>
Multiplication table doesn't work when I specify a certain number of columns
I don't understand why the HTML table doesn't get built when I specify less columns than rows. var table2 = Array(10); for (var i = 0; i < table2.length; i++) { // If I change Array(5) to something like Array(10) it doesn't work table2[i] = Array(5); } var code = "<table cellpadding=\"15\" cellspacing=\"0\"><tr>" for (row = 1; row <= table2.length; row++) { for (col = 1; col <= table2[col].length; col++) { code += "<td>" + col * row + "</td>"; } code += "</tr>"; }; document.getElementById('fart').innerHTML = code; Link: https://jsfiddle.net/pz4p9nff/
The following corrections in your code will fix the problem you were facing. var table2 = Array(10); //Init the amount of rows in your table var code = "<table cellpadding=\"15\" cellspacing=\"0\">"; //Don't forget: arrays are zero based. Starting at 1 will skip row with index 0 for (row = 0; row < table2.length; row++){ //Initialize each row with a fixed amount of columns... //no need to do this in a seperate loop table2[row] = Array(5); //Open each row properly code += "<tr>"; //Loop the columns of each row for (col = 0; col < table2[row].length; col++){ code += "<td>" + col*row + "</td>"; } code += "</tr>"; }; code += "</table>"; //Close your table properly document.getElementById('fart').innerHTML = code;
try this var code = "<table cellpadding=\"15\" cellspacing=\"0\">" for (row = 1; row <= 10; row++) { code += '<tr>'; for (col = 1; col <= 5; col++) { code += "<td>" + col * row + "</td>"; } code += "</tr>"; }; document.getElementById('fart').innerHTML = code;
You have to correct you code as follows; var table2 = Array(10); for (var i = 0; i < table2.length; i++){ // If I change Array(5) to something like Array(10) it doesn't work table2[i] = Array(10) } var code = "<table cellpadding=\"15\" cellspacing=\"0\"><tr>" for (row = 1; row < table2.length; row++){ // !!! use < not <= for (col = 1; col < table2[row].length; col++){ // !!! use < not <= and table2[row] code += "<td>" + col*row + "</td>"; } code += "</tr>"; }; document.getElementById('fart').innerHTML = code; <div id ="fart"> </div>
Update your column interation loop as follows. for (col =0; col < table2[row].length; col++) { code += "<td>" + col * row + "</td>"; }
You need to remove <tr> tag when you are initializing code var code = "<table cellpadding=\"15\" cellspacing=\"0\">" For every row a new <tr> tag should be appended. The limit of inner for loop for col should be table2.[row-1].length. Since you are using row as a value variable and not index, it's value therefore starts from 1 but indexes usually start from 0. for (row = 1; row <= table2.length; row++){ code += "<tr>"; for (col = 1; col <= table2[row-1].length; col++){ code += "<td>" + col * row + "</td>"; } code += "</tr>"; }; You also need to close the </table> tag. code+="</table>"; Updated https://jsfiddle.net/pz4p9nff/4/
Generate HTML table and load it in div element
I'd like to load a HTML table into a div-element (id="resultDataDistancesTable") - but the generated string isn't processed (no matter if I use html(), append() or innerHTML). There is no error in the console. When I paste the console.log(..) output directly to the HTML page I get the table that I want - so why doesn't my JavaScript code work? Is something wrong with the string? var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]}; buildResultTableDistances(); function buildResultTableDistances() { var tbl; var tr_head = "<table><tr><td>distances [meters]</td>"; for (var i = 0; i < 20; i++) { tr_head += "<td><b>" + "dummy" + "</b></td>"; } tr_head += "</tr>"; tbl = tr_head; for (var i = 0; i < 20; i++) { var row = "<tr><td><b>" + "dummy" + "</b></td>"; for (var ii = 0; ii < 20; ii++) { row += "<td>" + response.distances[i][ii] + "</td>"; } row += "</tr>"; tbl += row; } tbl += "</table>"; console.log(tbl); $('#resultDataDistancesTable').html(tbl); }
I suspect you forgot to insert the HTML or including jQuery, because it works fine here. If you want, to do this solely in JavaScript by adding the element in jQuery: $(document.body).append('<div id="resultDataDistancesTable"></div>'); var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]}; buildResultTableDistances(); function buildResultTableDistances() { var tbl; var tr_head = "<table><tr><td>distances [meters]</td>"; for (var i = 0; i < 20; i++) { tr_head += "<td><b>" + "dummy" + "</b></td>"; } tr_head += "</tr>"; tbl = tr_head; for (var i = 0; i < 20; i++) { var row = "<tr><td><b>" + "dummy" + "</b></td>"; for (var ii = 0; ii < 20; ii++) { row += "<td>" + response.distances[i][ii] + "</td>"; } row += "</tr>"; tbl += row; } tbl += "</table>"; $('#resultDataDistancesTable').html(tbl); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="resultDataDistancesTable"></div>
I could replicate your issue using Plunker: http://plnkr.co/edit/QxklTx0R6WcYwpRIpd98 has the fix. You weren't waiting for the DOM to be loaded before attempting to append to the object. See line 3: $("document").ready(function() { buildResultTableDistances(); }); Should work then.
Change text of a button in jquery
i have a board that contains 9 small boards and each small board contains 9 cells (Ultimate TicTacToe). i'm trying to use the click function and print "x" on the clicked button but it doesnt change the text of the button and i dont have an idea why. please help me. here is the code: <script> var bigTable = "<table align='center' value='bigBoard' border='0' cellpadding='1' cellspacing='1'\><tbody>"; for (var k = 0; k < 9; k++) { if (k % 3 === 0) { bigTable += "<tr>"; } bigTable += "<td>"; var mytable = "<table value='smallBoard'+k border='1' cellpadding='1' cellspacing='1'><tbody><tr>"; for (var j = 0; j < 3; j++) { for (var i = 0; i < 3; i++) { var position = +k + "," + j + "," + i; mytable += "<td><button class='a' id=" + position + " type='submit' name=" + position + "></button</td>"; } mytable += "</tr><tr>"; } mytable += "</tr></tbody></table>"; bigTable += mytable + "</td>"; if (k % 3 === 2) { bigTable += "</tr>"; } } bigTable += "</tbody></table>"; document.write(bigTable); </script> <script> $(document).ready(function() { $(".a").click(function() { var buttonPressed = $(this).attr("id"); jQuery.ajax({ data:buttonPressed, url:"board", success: function(responseText){ //alert("acac" + buttonPressed); $("#" + buttonPressed).text(responseText); } }); }); }); </script>
This is what you are doing wrong, change this: var position = +k + "," + j + "," + i; to something like, var position = +k + "-" + j + "-" + i;
Change the type of button from submit to button because you are calling Ajax request, not submitting the form.
I ran this jsfiddle and it works fine Try it http://jsfiddle.net/P8wrb/1/ Just declare a variable for your clicked button and then set the .text for it by reference $(".a").click(function() { var that = $(this); .... that.text('X'); }