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
Related
I have a table which has several columns holding text values and one column that’s a checkbox element. On a button click event, I’m trying to capture the text data for all elements across checked rows, but I’m having trouble accessing the text data of elements of the checked rows.
I’m able to get the checked rows of the original table by doing the following:
var table =$(‘#TableID tr’).filter(‘:has(:checkbox:checked)’).find(‘td’);
This works, and, logging the resultant jquery object in the console, Im able to see the tds of interest.
However, I’ve not been able to retrieve and store the text values of each td of the “table” jquery object. Here’s what I have so far:
table.find(“tbody tr”).each(function() { var $tds=$(this).find(‘td’),comp_name=$tds.eq(0).text(),pos=$tds.eq(1).text(),address=$tds.eq(2).text();});
etc, basically storing explicitly all attributes of a row, and this is done on the checked rows. But this returns nothing. No error, no values. I’ve also tried other approaches but nothing seems to work.
How can I capture this text row data for checked rows?
Sample row:
Company | Position | Years | Applicable?
Google | janitor | 3 | (checked)
Nokia | swe | 1 | (unchecked)
In the above we’d want the text values for each of the attributes of just the first row
The trick here is in the element to target and how to iterate them.
You were in fact quite close but your function wasn't returning anything.
$('button').click(function() {
var $trs = $('tr:has(:checkbox:checked)', 'table');
var res = [];
$trs.each(function() {
$td = $(this).children('td');
// This is the missing part
res.push({
comp: $td.eq(0).text(),
pos: $td.eq(1).text(),
add: $td.eq(2).text(),
})
})
console.log(res);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="company">Company 1</td>
<td class="position">Position 1</td>
<td class="address">Address 1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td class="company">Company 2</td>
<td class="position">Position 2</td>
<td class="address">Address 2</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td class="company">Company 3</td>
<td class="position">Position 3</td>
<td class="address">Address 3</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<button>
Go to work
</button>
I am trying to remove the empty code from table with jquery and add some class to the table tags
like i am trying to remove <td class="faux_align"></td> and <th class="faux_align"></th> from the table and check if the table already has a class of table - do nothing and if it does not have a class of table' - do add the classtable` to the table tag.
and also checking if the width attribute is defined within table and if not, add width as 100% and if defined but width is not 100%, make its width 100%
I am trying something like this:
$('table > tr > td').remove();
and same with th tag, but i am confused how do i do with remaining this in one single jquery function.
$('table').addClass('table').attr('width', '100%').find('td.faux_align, th.faux_align').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>
<table class="table">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>
i need to get the value of a specific TD which has no ID or Class by the text value of a neighbouring TH using jQuery
Example:
<table>
<tbody>
<tr>
<th>Established</th>
<td>1976</td>
</tr>
<tr>
<th>Location</th>
<td>Baltimore, Maryland</td>
</tr>
</tbody>
</table>
I want to get the year 1976 (using jQuery) by searching for "Established"
the location of the tr / order isnt always the same.
Possible?
var year = $("th:contains('Established')").next().text();
console.log(year); // "1976"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Established</th>
<td>1976</td>
</tr>
<tr>
<th>Location</th>
<td>Baltimore, Maryland</td>
</tr>
</tbody>
</table>
the above code will work given the string Established will always be in that format (First-uppercase, no spaces, etc).
A more robust solution:
var year = $("th").filter(function(){
return /^established$/i.test($.trim($(this).text()));
}).nextAll().filter(function() { // If there's more sibling TD...
// get all that have exactly 4 numbers as text
return /^\d{4}$/.test($.trim($(this).text()));
}).first().text(); // ...but get the first one's text.
console.log(year); // "1976"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th> EstablishEd </th> <!-- Contains spaces and possible uppercase errors? -->
<td>1976</td>
</tr>
<tr>
<th>Location</th>
<td>Baltimore, Maryland</td>
</tr>
<tr>
<th>Workers</th>
<td>3100</td>
</tr>
</tbody>
</table>
https://api.jquery.com/contains-selector/
https://api.jquery.com/next/
https://api.jquery.com/text/
Yes, it is possible. jQuery's .filter(callback) method can be used to filter elements based on their content.
Select th elements
Filter selected th elements to only have "Established" ones
Select the td elements that follow these th elements
var years = $("th").filter(function() { //Get th elements that has "Established" as their text
return $(this).text() === "Established";
}).next("td"); //Get td elements that are next to these th elements;
console.log(years.text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Established</th>
<td>1976</td>
</tr>
<tr>
<th>Location</th>
<td>Baltimore, Maryland</td>
</tr>
</tbody>
</table>
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.
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.