We Keep Coding

Vue How to seperate forloop button table into different row in table

With the for loop in my first table row, it creates 5 buttons with different values. I would like to know how can I separate those buttons, like making the second button appears in the second <tr> to replace button2. And next one to appear in third <tr> to replace button3.
If the button is separate, do I need to rewrite #click in ever button? Thank you.
<tr>
<td>
<button
:key="trend.Trends"
v-for="trend in topThreeTrends"
#click="LoadTrend(trend.Trends, trend.DT)"
>{{trend.Trends}}</button>
</td>
</tr>
<tr>
<td>
<button #click="currentBreed = 2">button2</button>
</td>
</tr>
<tr>
<td>
<button #click="currentBreed = 3">button3</button>
</td>
</tr>
I don't want to use for loop at <tr> like this, which will make me can't customize on each table row, because I have other specific data for each row.
<tr
:key="trend.Trends"
v-for="trend in topThreeTrends">
<td>
<button #click="LoadTrend(trend.Trends, trend.DT)">{{trend.Trends}}</button>
</td>
</tr>

You need to set the v-for on the tr if that is the element you want to repeat:
<tr
:key="trend.Trends"
v-for="trend in topThreeTrends">
<td>
<button #click="LoadTrend(trend.Trends, trend.DT)">{{trend.Trends}}</button>
</td>
</tr>

Add Column to table with jQuery

Is it possible to add a column to an existing table like this:
<table id="tutorial" width="600" border="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
with js?

you can do like this
$('#tutorial').find('tr').each(function(){
$(this).find('td').eq(n).after('<td>new cell added</td>');
});
n can be replaced by the number after which column you want to add new column

You can use .append() to append a new td to the rows
$('#tutorial tr').append('<td>new</td>')
Demo: Fiddle

You mean column not row?
$('#tutorial tr').each(function()
{
$(this).append('<td></td>');
});
Which selects the <tr> element inside id "tutorial" (that is your table is this case) and append new contents behind its original contents

An alternative option to those above is to create the column together with the other and a style of display:none; and then using the method .Show() to display.

unable to set focus on textboxes using javascript

I am trying to set focus on textboxes 1 by 1 on tab press but its not working for me.
here is code that i have tried:
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('prevOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
HTML:
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td><input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
There are 3 textboxes,for 1st textbox i have set focus on load like this:
function setFocus() {
document.getElementById("prevOrdQuan").focus();
}
It sets the focus for 1st textbox.after pressing tab on 1st textbox it displays 2nd textbox but focus is not set on second textbox.
This is only the problem that i need to resolve.

You have a problem in the showstep2 function, you are focussing the element with the id prevOrdQuan which is the first text box. I think you wanted to focus newOrdQuan.
So change
document.getElementById('prevOrdQuan').focus();
to
document.getElementById('newOrdQuan').focus();
And it should work.
EDIT
You also need anything focusable below your text boxes (an additional input etc). Otherwise if you press tab on the first (and only) textbox, the browser focusses the address bar and thus firing the onblur event on both next textboxes and displaying both at the same time.
Here is an example of what I mean: http://jsfiddle.net/24TK4/1/
2nd EDIT
I think this is an elegant solution of the problem: http://jsfiddle.net/24TK4/2/
Look at the link at the and of the HTML code, it just displays an invisible link.

Making the contents in <td> element static position

I have a table and my webpage as
<table>
<tr>
<td>
.....
.....
</td>
<td>
<img src="mylogo.jpg"/>
</td>
</tr>
</table>
the contents of the first <td> is changing dynamically. so the height of this <td> is also changing. this dynamic changing is affecting the second <td> as the position of the image is also changing.
How can i make the image in a static place in that <td> element.

you meant that the the picture's position always changes to center of the <td>??
then you can add valign="top" property to the td which contains your image
so, not caring how long your first <td> is the image will stay at top of the <td>

You could use CSS:
#mytable{
position:relative;
}
#myimage{
position:absolute;
top: ___;
left: ___;
}
Replace ___ with the desired distance.
Edit:
But if what you want is a background, then you could better use:
HTML:
<table id="mytable">
<tr>
<td>
.....
.....
</td>
</tr>
</table>
CSS:
#mytable{
background: url('mylogo.jpg');
}
And if you want to adjust the position, see http://www.w3schools.com/cssref/pr_background-position.asp

jQuery: Position of Images inside a HTML Table

Say I have a table:
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
I am using following code to add images to these table cells
$('#id1').append('<img src=images/image1.jpg />');
$('#id1').append('<img src=images/image2.jpg />');
$('#id1').append('<img src=images/image3.jpg />');
$('#id2').append('<img src=images/image4.jpg />');
Now what I want to achieve is this:
1. for cell "id2", i want the image always align to the right so it's not next to the text.
2. for cell "id1", since those 3 images has different sizes (24x24, 32x32, 24x24), i don't want them to be next to each other. what I want is that as if there are 3 small cells in that cell, each with size 32x32, and put those images into those small cells one by one.
I am not good at html or javascript. is it possible to do so?

CSS
#id2 img { float: right; }
HTML
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"><table><tr></tr></table></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
Javascript
$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...

Based off item #2 I'd say you're not done defining your table. You need to add a nested table in #id2 (the merits of this approach can be debated later).
So your table would be
<table>
<tr>
<td id="id1"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td id="id1a"></td>
<td id="id1b"></td>
<td id="id1c"></td>
</tr>
</table>
</td>
</tr>
</table>
From there you'd append your images to the sub-cells.