I need to be able to add rows to a table dynamically with jQuery mobile. The rows consist of selection menus and input boxes. The code I have seems to work in pure jQuery and html but when I add the mobile stuff it stops working (the "added" select menus and input elements act as if the first row in the table is being clicked). I have a jsfiddle here. Does anyone have suggestions? Or an explanation of why jQuery mobile is breaking my code?
When you call clone on the tr, the cloned row is inserted verbatim into your DOM. In order to achieve the result you want, the new <select> needs to have a unique ID.
You should add some logic to ensure that the new <select> tag has a different ID, such as select-choice-3, select-choice-4, etc.
Related
I am trying to create a Table that shall contain some columns with basic facts on the left and on the right side there shall be some columns that can be tabbed. Something like this:
So the Question is, how to do this?
I could personaly think of two solutions, but I actually don't like both:
Write a own Table for Tab1,Tab2 ... That contains the basic data and the Tabbed Data
Write a Table for the basic Data and one for each Tab. Here I think you would have a lot of Design problem "glueing" both tables together, so they look like one table.
So actually I don't like both solutions. Maybe there is a better solution to this?
Perhaps you could give the columns that belong to each tab their own unique class, e.g. .tab1-columns, .tab2-columns, etc. Then, you could show or hide the column depending on the active tab. The tabs, however, would exist outside of the table. Alternatively, you could pt the tabs into a pseudo- header row above the actual table header row, with the first header cell spanning those cells that shouldn't be "tabbed". However, I believe leaving the tabs outside of the table would be a bit more semantic in nature.
HTH.
Render all columns but hide them (display: none;) except the column by default.
Then add an click event on the tabs to switch the visible columns. be sure to use just the nav-tabs and not the js component.. it will be easier I think
In one of my pages, I am using an example of editable html table from this link: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425, which works without any issues and when I click on a cell in the table, it changes it to text box.
However, I had to change the layout of my page where, I had to place the sample mentioned above within another html table (nested).
Now the problem is when I click on the cell, it does not identify the child table, which has the data and I want to click but it clicks on the cell of the parent table, which in this case is the parent table, and holds 2 different tables.
So, what I want you help with is:
Get a method to identify the cell of the child table when it is clicked
Or
Some way so align two tables on my page to be aligned side by side. Currently I am using the parent table to align my other 2 tables to sit side by side.
if the second option is easier to achieve then, I don't have to change much.
Any suggestions?
If you're using a parent table element to layout elements on your page, just know that this is a deprecated unsemantic practice, as table elements are for tabulating data. You should use the CSS float property, which is the convention, see CSS Floats 101 ยท An A List Apart Article and w3schools.com
Refactoring out that parent table should fix your problem. Otherwise you can fix it through modifying the selector in your JavaScript and by assigning the edittable td elements with a class (eg. edittable-cell) so you're not assigning event listeners to other tables' td elements unnecessarily and causing unwanted behaviour elsewhere.
JavaScript
// Instead of the 'td' selector
$("td").dblclick(function() {
// .. your code here
});
// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
// .. your code here
});
If you are semantically nesting tables of data and/or still have this issue, you can try preventing the event from bubbling up to its parent elements.
JavaScript
$(".edittable-cell").dblclick(function(event) {
event.stopPropagation();
// .. your code here
});
I've sent various HTML emails in the past, and have seen the pretty large limitations associated with it. What I really need is the ability to have regions with a show/hide ability - click the plus sign or a header to toggle.
I'm figuring JS is out of the picture, CSS might be a possibility. I only need it to work in Outlook 2007-2010. Any suggestions?
Thanks!
You can do this in Outlook using anchor tags. The trick is to create 2 tables that are separated by a td cell with a large height specified so that you don't see the second table.
Both tables are exact duplicates except that table 1 has the show link, while table 2 has the content you want to show, and a hide link.
When you click the anchor tag, the email moves down to the position specified in your second table. As the content in both tables is the same except for the show/hide box visibility, you've created an illusion that the box is toggling.
If you have more than one show/hide box, you'll need to create more tables. The email will get really long, but the toggling effect still works in Outlook.
The anchor tags:
Click here to show content
<a name="section1"></a>
Here's a quick example: http://jsfiddle.net/mjcookson/nq3Re/
Update to comment: Also, your email might not fill the entire viewport, so a gap between tables is used to avoid seeing the second table immediately after the first table.
You can't do that in Outlook. Its HTML email rendering engine is pretty bad. I have seen it done for the mobile webkit and android browsers.
See this article: http://coding.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/
I'm working on a project which requires display of a set of product images and links in a tables and would like to implement the dynamic changing of a table cell on mouse over like they do on The Find http://www.thefind.com.
When you do a search and mouse over any table cell on the results page, the cell border changes to a raised 3-D type of border.
I'm wondering how to implement that effect?
There are quite a few different ways to go about it, give a few of these tuts a look:
http://css-tricks.com/row-and-column-highlighting/
Pure CSS: http://www.designisphilosophy.com/microsoft-expression-web/fancy-interactive-pure-css-list-boxes-with-hover-effect/
jQuery would be my way to go on this.
You could give a class to your table td's like <td class="niceBorder"></td>
Then either in an external .js file or in script tags in the head section of the page you can simply do somethign like the following:
$(".niceBorder").hover(function(){
$(this).css("border", "2px outset silver");
})
Make sure to include the jQuery library in your page before the .js file or the script tags in the head section.
I have a HTML table with several rows and columns and one radio-button in each column. I would like to make it possible to click in any row of the table to select the radiobutton in that column. I know it can be accomplished with the label-tag, by using javascript or some kind of CSS3.
But I would like to know if there is any pure HTML-way to do this? Without adding a label-tag for each cell in the table and not using javascript or CSS.
Because the table has like 15 rows and 10 columns, so it doesn't feel right to add 150 label-tags in the table and it would be nice not to have to rely on javascript or CSS3 that may not be supported or activated in all browsers.
I have read about the colgroup- and col-tags in HTML, but it doesn't seem they can add HTML like a label-tag for all cells in a column.
You should be able to add this feature with JavaScript. Add a click event to the whole <tr> in which you toggle the form field. I recommend using jQuery because it will (1) make this task a lost simpler, and (2) make your solution more likely to work across different browsers & versions.