JQuery :: Making Sure There Are Always 4 Columns To The Main Table?
Jun 2, 2011
I've got a website that displays all my products together within a table and the user can then click on the product they want to buy or obtain more info on. This is always displayed in four columns.
However if you have a few pages of products for one category it can be displayed across a few pages. For some reason the content management system I use will display only 1, 2 or columns on the last page if there are less than 4 products on the last page. When this happens you can get the produts displayed with a different width to what I've set within the CSS because the table's with is set to 100%.
When this happens is it possible to set the the width of the table to:
75% if there are 3 columns
50% if there are 2 columns
25% if there is only one column
Or is it possible to keep the width of the table at 100% and just add the extra columns if there are not 4?
The table id="catprods_tbl" and the columns (td) are is set to id="column_main"
I have included the example of the layout when there are only two columns on the last page.
[URL]
View 2 Replies
ADVERTISEMENT
May 26, 2009
I have 3 types of columns and they are identified by their class (in the TD and TH)... they are1. Always - cells that always appear - includes a primary key2. Main - cells that are necessary to be shown, but can be toggled3. Advanced - cells that are superfluous but helpful for the viewer.I want the user to be able to toggle Main and Advanced as visible/invisible. I tried the below code, which works, but, but since there's so much data it will lock up the browser and even invokes this ff error: "A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete. Script: jquery-1.3.2.min.js:19"My questions are basically, can this be done without freezing up the browser? (e.g. can I group columns together and hide each column, since I believe it's the sheer amount of cells that I am hiding?)Here is my code:here's my javascript (on top of jquery's inclusion)
Code:
<script type="text/javascript">
$(document).ready(function() {
[code]....
View 2 Replies
View Related
Apr 8, 2011
I am using the columnize plugin v1.4 and jquery v1.3.2. My css for the column div, etc is as follows:
/*columnize code*/
#middlePeopleSection {float:left;width:585px;height:460px;max-height:300px;padding:0;margin:0;background:yellow;}
#columnSection{float:left;width:580px;height:460px;margin-right:1em;background:#990000;}
.column{margin-right:1em;}
.first,.last{clear:both;}
p.people {text-align:left;font-family:"Times New Roman",times,serif;padding:0;margin:0;margin-bottom:20px}
The link to my test file is [URL]. My objective is to have TWO columns of equal width. I want the first column to be full width with everything that doesn't fit into the first column flowing into the second column.
View 2 Replies
View Related
Oct 14, 2011
I want to drag table columns of a ajax.loaded table.... is this possible with a jQuery-Script?
View 1 Replies
View Related
Oct 6, 2009
I'm looking for some super light-weight technique to take an existing table and just be able to resize the column headers. I've seen several jquery table plugins out there that seem to do everything imaginable, but I don't really need any of the fancy bells and whistles. I want to use my existing table structure and styles.
View 1 Replies
View Related
May 25, 2010
I'm trying to append <tr> after every x number of <td>'s. I'm not sure how to do it.
Here the code which I'm trying to do.
End result: should be 10rows and 10 columns.
View 3 Replies
View Related
Nov 17, 2010
How to I bind a click function to specific columns of a table row?
Btw, this is a (yet not answered) crosspost of [URL]
I currently have this piece of code:
$('#example tr').click( function() {
// selection stuff here, $(this) is the row
});
However, this binds the whole row. As there are checkboxes in the row, I don't want to have the cells containing them bound, too. But, there is a problem: I need to know what row has been clicked on / to what row the cell belongs to. I simply don't get it to work, I tried something like this:
$('#example tbody tr td:lt(7)').live('click', function() {
var nRow = $(this).parent();
});
View 1 Replies
View Related
Sep 20, 2011
When a thead contain less columns than real columns in the tbody section, the Tablesorter plugin produces a variable not found error in jquery coreTo reproduce simply do not put all <th> in thead that correspond to columns in tbody.
View 1 Replies
View Related
May 2, 2007
I have a requirement to build a div in a page that contains a table of
plane details, and one of the columns (on the left - tail number)
needs to be sticky on the horizontal axis but not on the vertical axis
(i.e. when scrolling right the tail numbers need to stay visible on
the left hand side, but when scrolling down the tail numbers need to
scroll to keep up with the rest of the plane details).
I have been looking at various ways of doing this but currently to no
avail, the idea that looks most promising is to split it into two
tables and set them both to have scroll bars, the problem with this
idea was that both the tables need to be scrolled by the same amount
vertically, i could get the position of one table using the offsetTop
property but could not find a way of setting the offsetTop property
for the other table so they stay aligned. The other issue with this is
that it would be using the onscroll property which does not seem to
show any distinction between horizontal and vertical scrolls..
View 3 Replies
View Related
Dec 14, 2007
I have a material table wich contains the article number, a quantity input field, a max quantity field... How can i test that the input quantity is less than the max quant one ?
Here is a sample code :
View 2 Replies
View Related
Jun 28, 2011
I want to hide columns with all green cells and I stored the column # that I want to hide into an array, errorColumn(). I am able to hide the rows I want, but I can't seem to figure out the columns.
I think the .has function is the problem because when I use the if(j!=5), it'll hide all columns but the 5th one. I just need it to do that for every column in my array...
Code:
View 2 Replies
View Related
Jul 20, 2005
I need to be able to create a 2 column table and then based on which column
header is clicked on, sort the list by that column so that each table row is
sorted properly. If possible there might be more than one line in the row
and I would only want to sort on the first line in a given row. Can this be
done using JavaScript. If so, which entities do I need (A table? A form?)
View 1 Replies
View Related
Mar 4, 2010
I'm having trouble recovering in JS content of the columns of a <TABLE>.
View 6 Replies
View Related
Oct 15, 2004
The code sortes/reverses the rows of a table with data upon the correspondent chosen column.
Uses DOM methods
Tested in IE6, NS7, Firefox, Moz 1.7, Opera 7.5 on XP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sort_reverse table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
td {
background-color: #CCCCCC;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function sortIt(w){
r=document.getElementById('tab').rows;//the root
var oRows = new Array()//set the rows to be removed as an array of cloneNodes
var iRows = new Array()//set those rows' indexes as array
for(var i=1;i<r.length;i++){
oRows[i]=r[i].cloneNode(true);
iRows[i]=r[i].rowIndex;
}
q=w.parentNode.cellIndex;//set the column index of cells content
var oCol = new Array()//set the string content of column cells as array
var vCol = new Array()//set the "compare" array for a future sort/reverse
for(var i=0;i<iRows.length;i++){
oCol[i]=[r[i].cells[q].firstChild.nodeValue,iRows[i]];
vCol[i]=[r[i].cells[q].firstChild.nodeValue,iRows[i]];
}
oCol.shift();//remove the first element (the content of the cell in first row
vCol.shift();//do the same with "compare" array
oCol.sort();//sorts the content array
if(vCol.toString()==oCol.toString()){oCol.reverse()}//if the content was already sorted, reverse
for(var i=1;i<r.length;i++){
r[i].parentNode.replaceChild(oRows[oCol[i-1][1]],r[i])
}//writes the rows in a sorted/reversed order
}
</script>
</head>
<body>
<table id="tab" width="400" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td><a href="#" onclick="sortIt(this);return false">SORT/REVERSE</a></td>
<td><a href="#" onclick="sortIt(this);return false">SORT/REVERSE</a></td>
<td><a href="#" onclick="sortIt(this);return false">SORT/REVERSE</a></td>
</tr>
<tr>
<td>Banana</td>
<td>yellow</td>
<td>10</td>
</tr>
<tr>
<td>Apple</td>
<td>cyan</td>
<td>20</td>
</tr>
<tr>
<td>Cherry</td>
<td>blue</td>
<td>40</td>
</tr>
<tr>
<td>Drops</td>
<td>green</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>
View 10 Replies
View Related
Oct 7, 2005
I wanna find out the number of my columns in my table. How can I do that? I have tried to do it with the following code, but it delivers me an "undifined" as result. What's wrong here?
HTML Code:
View 3 Replies
View Related
Jul 23, 2005
This example applies to javascript, table, cells, rows[color=blue]
>
> How do you access rows and columns of a HTML table?
>
>
>[/color]
<script language="javascript">
alert('start');
var tabl = document.getElementById('ordersTable');
alert( tabl.rows.length);
var l = tabl.rows.length;
var i = 0;
var s = "";
for (i = 0; i < l; i++ )
{
var tr = tabl.rows(i);
alert(tr);
alert(tr.cells(0));
var cll = tr.cells(0);
alert(cll.innerText);
s = s + "|" + cll.innerText;
}
alert("result=" + s);
</script>
View 1 Replies
View Related
May 29, 2010
The code works great to hide the columns. The only issue is when you un-hide them again, it does come up correctly. I want the headings to all be on the top row and then the actual data be on the next row. If you do all of them, it stacks all the headings on top of each other and then puts the data rows in order with 8 rows etc. Code is below.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">[code].....
View 6 Replies
View Related
Jul 23, 2005
This works but is a bit long-winded. Is there a better way? ....
View 3 Replies
View Related
Nov 17, 2005
I want to switch entire rows/columns around in a table. Move rows up/down and move columns left/right. This works fine in IE/opera but has a few problems in firefox.
First of all, is this the 'right' way to do this or is there a better way? Firefox doesn't support swapNode().
When moving rows up/down (top one in demo) firefox takes a few clicks to work when it should be one click on the button. I have no idea why. Code:
View 3 Replies
View Related
Mar 4, 2010
I use the Tablekit library and Prototype javascript framework on firefox, chrome & IE8. The columns in this table can be sorted by the Tablekit library.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/tablekit.js"></script>
<body>
<div id="mainmenu">
...
</div>
<div id="content">
[Code]...
However, after adding the periodic refresh by AJAX (eventually I want to refresh only the web page when there is new data available) and <div>, then the columns in this table cannot be sorted by the Tablekit library.
[Code]...
View 1 Replies
View Related
Jul 12, 2003
I have a radio button set that I am trying to use the onclick method to mae one row visible or the other. Let me show you what I mean. I have this javascript defined. I tried to use pointers but then I got element has no properties. So I've reverted to useing the full DOM call. Code:
View 11 Replies
View Related
Aug 12, 2009
I'm trying to implement is a table with editable rows and columns that will feed back into a database. If I could do it with AJAX that would be great too, but I'm not too familiar with javascript. I don't need the code, I need more of an idea. The HTML Table is currently a recreation of the MySQL table minus a few columns. Its all in text, but if I could make the text editable, or better yet, make the text turn into input boxes it would be really cool. I'm not really sure what kind of methods and properties I would need, or quite how to put it all together. What do you think is the best way to go about the entire project?
View 8 Replies
View Related
May 11, 2010
I am using the following code to make a sortable table on my website. I got the code from [URL] (I admit it is not my code but it suits my needs well). Since I know most people do not what to click on links to random sites, this is the code I am using :
HTML Code:
<HEAD> <script LANGUAGE="Javascript"> <!-- This script and many more are available free online at --> <!-- The Javascript Source!! [URL] --> <!-- Begin function setDataType(cValue) { // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY // SORTING WHEN IN THE SORT FUNCTION var isDate = new Date(cValue); if (isDate == "NaN") { if (isNaN(cValue)) { // THE VALUE IS A STRING, MAKE ALL CHARACTERS IN // STRING UPPER CASE TO ASSURE PROPER A-Z SORT cValue = cValue.toUpperCase(); return cValue; } .....
For some reason the code only works for IE, is there an easy way to get this code to work for other browsers such as Firefox or safari?
View 3 Replies
View Related
Oct 4, 2009
For example when row two is clicked I would like the table to reorder a, b, c, d
<table><tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr><tr>
<td>b</td>
<td>a</td>
<td>d</td>
<td>c</td>
</tr><tr>
<td>z</td>
<td>x</td>
<td>y</td>
<td>w</td>
</tr></table>
View 1 Replies
View Related
Feb 22, 2011
I have a list of records from my database being displayed on this page. I want to be able to sort the columns. Typically, I do this with an HTML table, but was wondering if there is a way I can setup the below code using jQuery to allow for the column headers to be sortable? I have an icon to sort up and an icon to sort down.My goal is to allow the user to sort the data without a page refresh.
<div class="header">
<ul>
<li style="width: 20%;">Customer Number <img src="images/iconSort.gif" /></li>
[code]....
View 4 Replies
View Related
Nov 14, 2011
I was making a menu with 2 columns, I need this menu for my work, I tried to do it with jquery, it worked, but is a little bug in this menu: When I click over to the left, the table disappears, and when I clickgets right to the table with a large space.
Objective: Make a menu with 2 columns, which when you press the left button, the menu go to the left showing more objects, and the same right, and Circulate.There is my code:
[Code]...
View 2 Replies
View Related
