We Keep Coding

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 do I mail cell range with proper format in google sheet?

Hi this is my sheet: https://docs.google.com/spreadsheets/d/1xkTt_1kLyROkUFComi8-NiKyDMan6617C1dA5UqWTSI/edit?usp=sharing
I want to share range A2:F8 in email using google script.
As far as I can say this script works fine:
function sendMail(){
var sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sh.getRange("A2:O38").getValues();
//var htmltable =[];
var TABLEFORMAT = 'cellspacing="2" cellpadding="2" dir="ltr" border="1" style="width:100%;table-layout:fixed;font-size:10pt;font-family:arial,sans,sans-serif;border-collapse:collapse;border:1px solid #ccc;font-weight:normal;color:black;background-color:white;text-align:center;text-decoration:none;font-style:normal;'
var htmltable = '<table ' + TABLEFORMAT +' ">';
for (row = 0; row<data.length; row++){
htmltable += '<tr>';
for (col = 0 ;col<data[row].length; col++){
if (data[row][col] === "" || 0) {htmltable += '<td>' + 'None' + '</td>';}
else
if (row === 0) {
htmltable += '<th>' + data[row][col] + '</th>';
}
else {htmltable += '<td>' + data[row][col] + '</td>';}
}
htmltable += '</tr>';
}
htmltable += '</table>';
Logger.log(data);
Logger.log(htmltable);
MailApp.sendEmail("myemail#gmail.com", 'Daily report','' ,{htmlBody: htmltable})
}
The problem is when i get mail the merged cells are not in merged state.
This result in 3 columns instead of 1.
Can someone please tweak the code so that I get exactly like i formatted sheets.

I modified the code a little because I didn't want to send any emails. And if you'll move the table up to the top left corner and use sh.getDataRange() then you'll get the entire table with no problems.
This is my modified version.
function sendSomething(){
var sh = SpreadsheetApp.getActiveSheet();
var dataA = sh.getDataRange().getValues();
var None = ' ';
var htmltable ='';
var TABLEFORMAT = 'cellspacing="2" cellpadding="2" dir="ltr" border="1" style="width:100%;table-layout:fixed;font-size:10pt;font-family:arial,sans,sans-serif;border-collapse:collapse;border:1px solid #ccc;font-weight:normal;color:black;background-color:white;text-align:center;text-decoration:none;font-style:normal;'
var htmltable = '<table ' + TABLEFORMAT +' ">';
for (row = 0; row<dataA.length; row++)
{
htmltable += '<tr>';
for(col = 0 ;col<dataA[row].length; col++)
{
if (dataA[row][col] === "" || 0)
{
htmltable += '<td>' + None + '</td>';
}
else
if (row === 0)
{
htmltable += '<th>' + dataA[row][col] + '</th>';
}
else
{
htmltable += '<td>' + dataA[row][col] + '</td>';
}
}
htmltable += '</tr>';
}
htmltable += '</table>';
dispStatus('HTML',htmltable,800,500);
}
And this is my display routine which I incorporated into your code. It's just my version of the logger.
function dispStatus(title,html,width,height,modal)
{
var title = typeof(title) !== 'undefined' ? title : 'No Title Provided';
var width = typeof(width) !== 'undefined' ? width : 400;
var height = typeof(height) !== 'undefined' ? height : 300;
var html = typeof(html) !== 'undefined' ? html : '<p>No html provided.</p>';
var modal = typeof(modal) !== 'undefined' ? modal : false;
var htmlOutput = HtmlService
.createHtmlOutput(html)
.setWidth(width)
.setHeight(height);
if(!modal)
{
SpreadsheetApp.getUi().showModelessDialog(htmlOutput, title);
}
else
{
SpreadsheetApp.getUi().showModalDialog(htmlOutput, title);
}
}
You still need to format the dates. Perhaps you can use Utilities and if you want to merge cells together in the header you'll need to figure out which ones to give a colspan="3".

How to have jquery loop over json data results to create a two column table

I'm having a bit of trouble trying to get my json data response shown in a two column table. I've found lots of posts that show how to show it as a single row, but nothing as a two column table.
This is what I have so far and it is still only showing a single column with multiple rows:
var trHTML = '';
$.each(data.Titles, function (i, item) {
var v = 0;
trHTML += '<tr>';
if(v <= 2){
trHTML += '<td>' + data.Titles[i] + '<br><img src="' + data.Images[i] + '"></td>';
}
else{
var v = 0;
trHTML += '</tr>';
trHTML += '<tr>';
}
trHTML += '</tr>';
v++
});
$('#location').append(trHTML);
},

Try this:
var trHTML = '';
var v = 0;
$.each(data.Titles, function (i, item) {
// it keeps v always 0 or 1 regarding if it's first or second column
if(v >= 2){
v = 0;
}
if(v == 0){
trHTML += '<tr>';
}
trHTML += '<td>' + data.Titles[i] + '<br><img src="' + data.Images[i] + '"></td>';
if(v == 1){
trHTML += '</tr>';
}
v++
});
if(v == 1){
trHTML += '</tr>';
}
$('#location').append(trHTML);
},

Loop every nth item and fill the blanks

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

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