Add Column to table with jQuery - javascript

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.

Related

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>

Clone a <tr> and modify the clone's content in JavaScript / jQuery

I'm stuck with a problem. I currently have a simple <table> that looks like this:
<table class="table">
<tbody>
<tr id="kc_keychain_1">
<td class="td-kc-id"> kc_keychain_1 </td>
<td class="td-kc-name"> Keychain 1 </td>
<td>
<p>my key</p>
<p>my second key</p>
</td>
</tr>
<tr id="kc_keychain_10">
<td class="td-kc-id"> kc_keychain_10 </td>
<td class="td-kc-name"> Keychain 10</td>
<td>
<p>ma clé</p>
<p>Clé 005V</p>
</td>
</tr>
</tbody>
</table>
I also have some JavaScript code, that aims at cloning a specific row, modifying the .tc-kc-id and .tc-kc-name cells of the cloned row, and finally adding the cloned and modified row to the table:
var clonedTr = document.querySelector('#' + id).cloneNode(true);
//$(clonedTr).find(".td-kc-id").innerText = "test";
//$(clonedTr).find(".td-kc-name").innerText = "test";
document.querySelector('tbody').appendChild(clonedTr);
It clones and adds the cloned row without any problem. But the commented code doesn't work. What I try in the commented code is to get specific cells thanks to their classname, and then change their innerText property.
But the innerText of the cells remain unchanged. Can anyone help me? Thanks
Thanks to #ChrisG, a possible working solution is:
$(clonedTr).find(".td-kc-id").text("test");

html table cell match tr width (non static rows count) [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have such html structure:
<table border=1 >
<tr> <!--this tr has one <td> that needs to be 100% width-->
<td></td>
</tr>
<tr> <!--this tr has two <td> that each need to be 50% width-->
<td></td>
<td></td>
</tr>
<tr> <!--this tr has three <td> that each need to be 33.3333% width-->
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!--this tr has one <td> that needs to be 100% width-->
<td></td>
</tr>
</table>
how can i do, that for example first tr td is for 100%, second tr two td's are both 50%, but all them for 100% and so over, i need to fill td to tr width, and if there more than one td, to do that they divide this width...
http://jsfiddle.net/ujMgM/
possibly without using js...
update: NO! colspan
Using HTML
Just use the colspan HTML attribute:
This attribute specifies the number of columns spanned by the current cell. The default value of this attribute is one ("1").
This means that if your table has a total of 3 columns and you want one cell to span all 3 columns, you'd specify a colspan of "3":
<table border=1 >
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Using jQuery
You can instead use jQuery to add in the colspan attributes for you:
// Get a reference to the table's tbody element, and define the number of columns
var $tbody = $('table').find('tbody'),
columns = 3;
// Loop through each tr within the table's tbody
$tbody.find('tr').each(function() {
// Determine the number of cells, and set the colspan
var children = $(this).children().size(),
colspan = columns / children;
// If the colspan variable is set to *.5, give the first cell higher colspan
if (colspan % 1 === 0.5) {
$(this).children('td').attr('colspan', colspan - 0.5);
$(this).children('td:first').attr('colspan', colspan + 0.5);
}
// Otherwise give all cells equal colspan
else
$(this).children('td').attr('colspan', colspan);
});
JSFiddle demo.
Note how I'm using the tbody here? Ideally your table should have a tbody element, but most browsers will add this in for you.
Use colspan="0"
Or use jQuery to calculate most td in rows and add colspan dynamically.
You have to use colspan="3" if you want to fit the td for all the three columns.
About colspan:
This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1; if its value is set to 0, it extends until the end of the , even if implicitly defined, that the cell belongs to. Values higher than 1000 will be considered as incorrect and will be set to the default value
colspan Reference mdn
The modified code looks like
<table border=1 >
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Fiddle Demo

getElementsByTagName("table") - getting td on curious way

I have this simple example
<table border="1px">
<tr>
<td> </td>
<td> <input type="button" value="Click" onclick="insertText()"/> </td>
</tr>
</table>
I wanted to get the first td element of the (first) tr element, I tried:
var td = document.getElementsByTagName("table")[0].children[0].children[0];
Because it's:
var td = document.getElementsByTagName("table")[0] for the table element itself
children[0] for the tr element
and children[0] again for the first td element
That's what I thought, but apparently this returns me the tr element and only adding another .children[0]got me the td element.
var td = document.getElementsByTagName("table")[0].children[0].children[0].children[0];
Why is that, or what have I missed here?
That's because you're forgetting about the <tbody> element, which is automatically inserted into the DOM.
What your table really looks like:
<table border="1px">
<tbody>
<tr>
<td> </td>
<td> <input type="button" value="Click" onclick="insertText()"/> </td>
</tr>
</tbody>
</table>
Hence why you needed to dig down through three levels of children to target the <td> element you wanted.
Side note: If you'd like to know more about why the <tbody> element is automatically injected into <table> elements if undeclared, see this question and its answers.

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.

Categories