Does jQuery mobile has anything for highlight? For example, highlight a table row. Jquery ui has ui-state-highlight.
<table>
<tr class="ui-state-highlight">
It should works with different themes and swatches.
Thanks.
/*
I'm also searching for that question. The only way I just now can think at this is using jQuery to find the selector:
$("table tr.myTR").addClass('error');*/
----------
<style>
.error {
background-color: #fbec88;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
<div data-role="content">
<table data-role="table" data-mode="" id="myTable">
<tbody>
<tr class="myTR">
<td>Alfreds Futterkiste</td>
</tr>
<tr>
<td>Maria Anders</td>
</tr>
<tr>
<td>Obere Str. 57</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td>12209</td>
</tr>
<tr>
<td>Germany</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(function () {
$("table tr.myTR").addClass('error');
})
</script>
Related
I'm new to Knockout.js and I'm trying to display data from observable array to a table.
The problem I have is it generates two tbody tags. But if I move the empty check logic into the foreach: loop, the No Data does showup at all.
Is there a better way to do this using table? I don't like to use ul or ol in this case.
<table>
<thead>
<tr>
<th>Permit</th>
<th>Region</th>
<th>Landowner</th>
</tr>
</thead>
<tbody data-bind="foreach: requestList">
<tr>
<td><span data-bind="text: permit"></span></td>
<td><span data-bind="text: region"></span></td>
<td><span data-bind="text: landowner"></span></td>
</tr>
</tbody>
<tbody data-bind="if: requestList().length === 0">
<tr>
<td colspan="3">No Data</td>
</tr>
</tbody>
</table>
When doing this we make a lot of use of virtual elements. They are outlined here http://knockoutjs.com/documentation/if-binding.html#note_using_if_without_a_container_element
The rest of your markup is fine, but you could wrap your first tbody in a virtual element like this:
<!-- ko if: requestList().length -->
<tbody data-bind="foreach: requestList">
<tr>
<td><span data-bind="text: permit"></span></td>
<td><span data-bind="text: region"></span></td>
<td><span data-bind="text: landowner"></span></td>
<td><button data-bind="click: $parent.remove">Remove</button></td>
</tr>
</tbody>
<!-- /ko -->
JSFiddle here: http://jsfiddle.net/ZKWMh/
Actually, your html markup is fine. I added the following javascript to your markup
$(document).ready(function() {
var a = [{
permit: "permit1",
region: 'region1',
landowner: 'landowner'},
{
permit: "permit2",
region: 'region2',
landowner: 'landowner2'}];
var vm = {};
vm.requestList = ko.observableArray([]);
ko.applyBindings(vm);
$('#loadData').click(function() {
var a1 = ko.mapping.fromJS(a);
var b1 = a1();
vm.requestList(b1);
});
});
And it seems to be working as you describe how you want things to work. It is working at http://jsfiddle.net/photo_tom/xmk3P/10/
I have a simple web page where for each row of data, I can pop up a jQuery UI dialog with the details of that row. Since there can be multiple rows in the sub-query a table is the best choice. The result is that I get an empty dialog box, and the table contained in that div (the one for the dialog) appears at the bottom of the page, whether the row is clicked to activate the dialog. Everything else works perfectly, the event for the click, the dialog popup, the passing of the right id for the div, all perfect.
But the dang table (the one inside the dialog, with the class of 'inner-table') appears at the bottom of the page, right off the bat.
The HTML is created in Groovy, with the HTMLMarkupBuilder, and the resulting HTML looks like the following:
<html>
<head>
<title>NAS Execution Groovy Servlet</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='js/jquery.dataTables.min.js'></script>
<script type='text/javascript' src='js/executions.js'></script>
<link rel='stylesheet' type='text/css' href='css/jquery.dataTables_themeroller.css'></link>
<link rel='stylesheet' type='text/css' href='css/jquery-ui.css'></link>
<link rel='stylesheet' type='text/css' href='css/nas.css'></link>
</head>
<body>
<div id='results' class='execution-results'>
<p id='rpt-header'>
<span class='rpt-header-txt'>Backup Schedule Report for </span>
<span class='rpt-header-asset'>ret2w089n1t1</span>
</p>
<table id='nas-table'>
<thead>
<tr class='table-header'>
<th class='hidden'>Backup ID</th>
<th>Schedule Name</th>
<th>Backup Product</th>
<th>Size Mb</th>
<th>Start Time</th>
<th>Duration</th>
<th>Expiration Date</th>
<th>Mon 17</th>
</tr>
</thead>
<tbody>
<tr class='row'>
<td class='hidden'>12345678</td>
<td class='row-data'>null</td>
<td class='row-data'>Product One</td>
<td id='size-mb' class='row-data'>601.31</td>
<td class='row-data'>00:09:03</td>
<td class='row-data'>158 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<tr class='row'>
<td class='hidden'>23456789</td>
<td class='row-data'>PolicyName</td>
<td class='row-data'>Product Two</td>
<td id='size-mb' class='row-data'>995.92</td>
<td class='row-data'>20:09:00</td>
<td class='row-data'>191 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<div id='dialog-23456789' class='details-dialog'>
<table class='inner-table'>
<thead>
<tr>
<th>JOB_TYPE_NAME</th>
<th>VENDOR_STATUS_NAME</th>
<th>KILOBYTES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Incr Backup</td>
<td>Successful</td>
<td>1019821</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</body>
</html>
The jQuery for this is pretty simple; it uses the id from the row clicked on, and pops up a dialog window. That works fine, but the table that is contained in that div is actually at the bottom of the screen, even before anything is clicked:
$(document).ready(function() {
$('#nas-table').dataTable( {
"bJQueryUI": true,
"aaSorting": [[4, 'asc']]
} );
$('.row').live("click", function(){
var target = $(this);
var backupId = $(this).children(":first").html();
var thisId = '#dialog-' + backupId;
$(thisId).dialog(
{
title: "Backup Job Detail",
width: 800,
height: 450
}
);
$(thisId).dialog("open");
$(thisId).dialog("widget").position({
my: 'left top',
at: 'left bottom',
of: target
});
});
} );
At first, I thought the Groovy HTMLMarkupBuilder was outputting the DOM before everything happened, but when I do a view source, copy it to a file, and open the file in my browser, I get the same result.
I would appreciate any help with this. I asked this question earlier, in case you want to complain about that, but I had to follow up some other potential issues in the Groovy code, which I resolved. This example is more complete, and represents exactly what my code will do.
Brian
The problem is that you have a div nested within a table outside of a TR and TD, which will cause the rendering and DOM to be a bit wrong. If you adjust the html so that it resembles something like this it will work:
<div id='results' class='execution-results'>
<p id='rpt-header'>
<span class='rpt-header-txt'>Backup Schedule Report for </span>
<span class='rpt-header-asset'>ret2w089n1t1</span>
</p>
<table id='nas-table'>
<thead>
<tr class='table-header'>
<th class='hidden'>Backup ID</th>
<th>Schedule Name</th>
<th>Backup Product</th>
<th>Size Mb</th>
<th>Start Time</th>
<th>Duration</th>
<th>Expiration Date</th>
<th>Mon 17</th>
</tr>
</thead>
<tbody>
<tr class='row'>
<td class='hidden'>12345678</td>
<td class='row-data'>null</td>
<td class='row-data'>Product One</td>
<td id='size-mb' class='row-data'>601.31</td>
<td class='row-data'>00:09:03</td>
<td class='row-data'>158 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<tr class='row'>
<td class='hidden'>23456789</td>
<td class='row-data'>PolicyName</td>
<td class='row-data'>Product Two</td>
<td id='size-mb' class='row-data'>995.92</td>
<td class='row-data'>20:09:00</td>
<td class='row-data'>191 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
</tbody>
</table>
<div id='dialog-23456789' class='details-dialog' style="display:none;">
<table class='inner-table'>
<thead>
<tr>
<th>JOB_TYPE_NAME</th>
<th>VENDOR_STATUS_NAME</th>
<th>KILOBYTES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Incr Backup</td>
<td>Successful</td>
<td>1019821</td>
</tr>
</tbody>
</table>
</div>
</div>
The trick is to move the div outside of the parent table and also you need to set the display:none on the details table or it will be shown when the page is rendered.
I'm trying to add a jQuery dialog in each row of a table, using jQuery, and dataTables plugin.
I want to add in the dialog data specific to each row.
I've seen in other post that you can think of two ways:
1) One dialog for each row.
2) Only one dialog for all the rows, and then fill it with specific data.
In this example, I have a list of courses in a table, with name(nombre), code(codigo), and mode(modo).
For each row, there is a button (modificar) that should show a dialog to edit the data for that course. Of course, in each dialog, must be loaded the data of that row.
My idea (viewed other ideas in other post) is to put the dialog inside the row, so I can load the data from that row.
I created a class (masInfo) and in the Javascript code, I put a function that should open the dialog after the button is. But it doesn't work.
Do you have any idea? Thanks.
HTML Y JSP
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css"
href="css/milk.css" rel="stylesheet" />
<title>Paginadores tablas</title>
</head>
<body>
<%
CatalogoCursos catalogoCursos = CatalogoCursos.getCatalogoCursos();
ArrayList<Curso> cursos = catalogoCursos.getCursos();
%>
<div id="miTabla">
<form id="formulario" name="formulario" method="post">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
<div title="Modificar curso">
<table>
<tr>
<td><input type="text" name="mod_nombre" value="<%=curso.getNombre()%>"/></td>
<td><input type="text" name="mod_codigo" value="<%=curso.getCodigo()%>"/></td>
<td><input type="text" name="mod_modo" value="<%=curso.getStringModo()%>"/></td>
</tr>
</table>
</div>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</form>
</div>
</body>
</html>
JAVASCRIPT
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
(function($) {
// Dialog
$('.masInfo').next().dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
$('#dialog').dialog('open');
return false;
});
});
You are much better off using just one dialog and populate the relevant information in the dialog on the button click. The way you currently do it will result in a lot of duplicated input elements.
So, the HTML would look like:
<div id="miTabla">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
<div title="Modificar curso" id="ModificarDialog">
<form id="formulario" name="formulario" method="post">
<table>
<tr>
<td><input type="text" name="mod_nombre" id="mod_nombre" /></td>
<td><input type="text" name="mod_codigo" id="mod_codigo" /></td>
<td><input type="text" name="mod_modo" id="mod_modo" /></td>
</tr>
</table>
</form>
</div>
JavaScript would change to:
(function($) {
// Dialog
$('#ModificarDialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
var cells = $(this).parent().find('td');
$('#mod_monbre').val(cells.eq(0).text());
$('#mod_codigo').val(cells.eq(1).text());
$('#mod_modo').val(cells.eq(2).text());
$('#dialog').dialog('open');
return false;
});
});
I have a jquery dialog that contains a jquery accordion among other things. When I click the accordion headings to expand the different sections, the elements above the accordion lose their padding for the duration of the animation. The result is that these elements shift to the left for the duration of the animation. Below are the HTML/JS snippets in question.
Any thoughts?
HTML:
<div id="bodyDiv">
<!-- Dialog -->
<div id="patientPopup" title="Patient:" class="ui-widget">
<table style="width: 100%">
<tr>
<td class="AppointmentImage">
<img src="images/John-Petrucci-tn.jpg" alt="Patient Photo">
</td>
<td>
<b>Name:</b> Smith, Sally <b>DOB:</b> 02/15/1984 <br />
<b>SSN:</b> 999-99-9999 <b>Address:</b> 123 Main St Nashville, TN 37204
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%">
<!--Accordion-->
<div id="patientSummary">
<h3>Encounters</h3>
<div>
<table class="PatientSummary">
<tr>
<th>12/03/2011</th>
<td>
Office visit - this is text for the office visit. some notes perhaps.
</td>
</tr>
<tr>
<th>10/16/2011</th>
<td>
GYN visit - this is text to fill some space.
</td>
</tr>
</table>
</div>
<h3>Alerts</h3>
<div>
<ul>
<li>Diabetic</li>
<li>Due for FluShot</li>
</ul>
</div>
<h3>Labs/Radiology</h3>
<div>
<table style="vertical-align: text-top;">
<tr>
<th>Date</th>
<th>Lab</th>
<th>Result</th>
</tr>
<tr>
<td>12/03/2011</td>
<td>Blood Panel</td>
<td>N</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Pregnancy Test</td>
<td>Y</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Blood Panel</td>
<td>N</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Pregnancy Test</td>
<td>Y</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Blood Panel</td>
<td>N</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Pregnancy Test</td>
<td>Y</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
<button id="showPatient">Show Patient</button>
</div>
JavaScript:
$("#patientPopup").dialog({
autoOpen: false,
modal: true,
height: 530,
width: 600,
draggable: false,
resizable: false,
open: function () {
$("#patientSummary").accordion({
fillSpace: true,
autoHeight: true
});
}
});
$("#showPatient").button().click(
function () {
$("#patientPopup").dialog("open");
}
);
Any help would be appreciated. Thanks!
The solution was quite simple. I ended up putting the image and text in a completely separate table than the accordion.
Never determined exactly why the top elements were losing their padding though...
I am trying to figure out the difference between putting an align attribute on a table cell vs using text-align css attribute. The code below shows different results in IE vs Others. In IE, the align ends up aligning every sub child, so the text 'test' is centered aligned, while in FF/Webkit this is not the case and it remains left aligned. What is the correct behavior?
<!DOCTYPE html>
<html>
<head>
<style>
table { width: 60%; }
table td { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td align='center'>
<table>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The align attribute is old-style "tag-soup" HTML, deprecated according to an official W3 document. Prefer CSS styling, as with
<td style="text-align: center;">
<!-- Content -->
</td>
Better still, give the TD a className (e.g., a semantic className like "center") and set that style in the stylesheet:
td.center {
text-align: center;
}
CSS:text-align and HTMLElement.align property works differently if there are block elements(Ex: tables) as children, so replace with caution.
See this demo below for reference.
.Container { border: solid 1px gray; width: 400px }
.Container table { border: solid 1px yellow; width: 250px }
.Container div { border: solid 1px red; width: 250px }
.CenterSelf { margin: auto }
.CenterChildren { text-align: center /* For inline elements. */ }
.CenterChildren table, .CenterChildren div
{ margin: auto /* For common block elements. Add other element selectors if necessary. */ }
.ResultTable { border-collapse: collapse }
.ResultTable td { text-align: center; border: solid 1px #ccc; padding: 0.3em }
<table class="Container" align="center">
<tr><td>TABLE1</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<table class="Container" style="text-align: center">
<tr><td>TABLE2</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<div id="Container1" class="Container" align="center">
DIV1
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container2" class="Container" style="text-align: center">
DIV2
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container3" class="Container CenterChildren">
DIV3
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container4" class="Container CenterChildren CenterSelf">
DIV4
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<hr />
<table class="ResultTable">
<tr>
<td> </td>
<td colspan="2">TABLE</td>
<td colspan="2">DIV</td>
</tr>
<tr>
<td>Elements</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
</tr>
<tr>
<td>Self</td>
<td>O</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>inline child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>inline child of inline child</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>
<tr>
<td>block child</td>
<td>X</td>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>inline child of block child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
</table>
O: Centered
X: Not centered