jQuery: Position of Images inside a HTML Table - javascript

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.

Related

How do you affect a DIV from an inner table's TD with JavaScript?

I have an outer DIV containing the content I want to block. However only the inner TD has the attributes as the qualifier.
I've already got the code (From an SO user) and use TamperMonkey to implement it and it works like a charm. However it removes too little and keeps the parent DIV. I know too little of JavaScript to affect the outter DIV.
<DIV>
<Table></TABLE>
<Table>
<td attribute="desiredTarget"></td>
</TABLE>
<Table></TABLE>
</DIV>
Expected: DIV should not display based on TD content
Results: DIV still displays
Use jQuery it will better than PURE JS
$('td[attribute="X"]')
.parent() //TO TR
.parent() //TO TBODY
.parent() //TO TABLE
.parent() //TO DIV
.css("background-color", "red"); ///Your command
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
1
<table border="1">
<tr>
<td>Unnesscessary</td>
</tr>
</table>
2
<table border="1">
<tr>
<td attribute="X">xxx</td>
<td>Unnesscessary</td>
</tr>
<tr>
<td>Unnesscessary</td>
</tr>
</table>
3
<table border="1">
<tr>
<td>Unnesscessary</td>
</tr>
<tr>
<td>Unnesscessary</td>
</tr>
</table>
</div>

removing some empty table details and adding classes and width

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>

Formatting cells in a table, without repeating the same code hundreds of times?

I am working on a display page for a lot of data. some of the data is a short string, some of it is a long string(>200char) and some is numbers. My issue is this: When i create a a table and set its style, how do i make it so the style of the table sets a fixed size for the cells in that table, without manually setting it for each individual cell, becuase i have over 50 tables with 10 rows or more and each one has multiple cells.
I am asking this because the data I am entering seems to be resizing the cells to make it fit, and it crushes the adjacent cells, which cant happen.
Here is a sample of what i want:
<table style={table_style_sub}>
<tr>
<td><b>Client Name:</b></td>
<td>{client2}</td>
</tr>
<tr>
<td><b>Location:</b></td>
<td>{client2Location}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{client2Phone}</td>
</tr>
<tr>
<td><b>Emails:</b></td>
<td>{client2Email}</td>
</tr>
<tr>
<td style={cell_format}><b>Details:</b></td>
<td>{client2Service}</td>
</tr>
</table>
this is my table for example. Here is the formatting:
var table_style_sub={
margin: 'auto',
width: '400px',
marginBottom: '15px',
border: '1px dotted black'
}
is there any way to add to this table_style_sub to make every <td> of the appropriate table have a width of 'Xpx' without manually doing typing <td style={{width:"Xpx}}> over 300 times.
Here is the whole code if you want to see it to get an idea of how many lines i actually have: http://pastebin.com/6rzRz2Vj
You could try something like this in javascript itself,
In your code there seems to be a div with an id="messagesDiv" enclosing the table so could use that id and fetch the tds and then set their style to width in the javascript as shown below,
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body>
<form class="index-form" name="LoginForm">
<div class="card__supporting-text mdl-color-text--white-600" id="messagesDiv">
<h3>Contact Information</h3>
<table style={table_style}>
<tr>
<td><b>Legal Name: </b></td>
<td>{legalEntity}</td>
</tr>
<tr>
<td><b>Operating Name:</b> </td>
<td>{operatingName}</td>
</tr>
<tr>
<td><b>Role: </b></td>
<td>{string_role[role]}</td>
</tr>
<tr>
<td><b>Address 1: </b></td>
<td>{address1}</td>
</tr>
<tr>
<td><b>Address 2: </b></td>
<td>{address2}</td>
</tr>
<tr>
<td><b>City:</b> </td>
<td>{city}</td>
</tr>
<tr>
<td><b>Province:</b></td>
<td>{province}</td>
</tr>
<tr>
<td><b>Country: </b></td>
<td>{country}</td>
</tr>
<tr>
<td><b>Postal Code:</b></td>
<td>{postalCode}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{phone}</td>
</tr>
<tr>
<td><b>Fax:</b></td>
<td>{fax}</td>
</tr>
<tr>
<td><b>Email:</b></td>
<td>{email}</td>
</tr>
<tr>
<td><b>Admin Contact:</b></td>
<td>{adminContact}</td>
</tr>
<tr>
<td><b>Techncal Contact:</b></td>
<td>{technicalContact}</td>
</tr>
</table>
</div>
</form>
<script>
var div=document.getElementById("messagesDiv");
var tds=div.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].style.width='200px';
}
</script>
</body>
</html>

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.

table.filter.js #quickfind has to search in first column

I have a litte problem with the PicNet table Filter. Here is the demo.
Here is my JS:
$(document).ready(function() {
// Initialise Plugin
var options = {
additionalFilterTriggers: [$('#quickfind')]
};
$('#dataTable').tableFilter(options);
});
Here is the HTML:
<body>
Quick Find: <input type="text" id="quickfind"/>
<table id='dataTable'>
<thead>
<tr>
<th>File</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">10.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">20.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">22.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
</tbody>
</table>
..
Is it possible to search with #quickfind in only one (first) column?
when I search in #quickfind for "22" I got 3 results because the right column has a "22" in the date and time.
I disabled in the CSS the .filter class with display:none; because I only want one searchfield. I copied the genererated javascript code and replaced it with the #quickfind.
<input type="text" id="filter_0" class="filter" >
filter_0 is for the first row. filter_1 is for the second row. And so on. But the code works only in the table! and not above.
Any ideas to solve the problem?
You can disable the search for column(s), just put filter='false' attribute in the header th tag(s).
<th filter='false'>Last modified</th>

Categories