Im making a page (for IE) where is shows some values in a table format. But somehow there's some kind of whitespace before the first column making it uneven with the following columns.
i just want the columns to be aligned
http://i49.tinypic.com/14b3kuh.jpg
out.println("<div id='tablePos'>");
out.println("<ul class='ulStyle'>");
out.println("<li>");
out.println("<table border='1'>");
out.println("<div id='divTableForms'>");
out.println("<tr id='process'><td>PROCESS</td></tr>");
while(rs.next()){
String process = rs.getString(2);
String processtype = rs.getString(1);
out.println("<tr id='process'><td id='process2'>"+processtype + "-" +process+"</td></tr>");
}
out.println("<tr id='process'><td id='process2'></td></tr>");
out.println("</div>");
out.println("</table>");
out.println("</li>");
First of all,I think its because of ur divTableForms div... And second, u have used out.println("< tr id='process'>< td id='process2'>< /td>< /tr>");
But i dont get for wat u have included it.... Abd finally never use the same id for multiple tag... Particularly inside loop never use it..
empty Table-Data (TD element) always was problem. view this http://bignosebird.com/docs/h34.shtml OR CSS to make an empty cell's border appear?.
out.println("<tr id='process'><td id='process2'> </td></tr>");
also id attribute value must be unique in html document . your code duplicate 'process' identifier in html document use class instead of Id Attribute
Related
I'm generating a table using xslt, but for this question I'll keep that side out of it, as it relates more to the actual generated structure of a html table.
What I do is make a vertical table as follows, which suits the layout needed for the data concerned that originated in a spreadsheet. Example is contrived for brevity, actual data fields contain lengthy strings and many more fields.
Title: something or rather bla bla
Description: very long desription
Field1: asdfasdfasdfsdfsd
Field2: asdfasfasdfasdfsdfjasdlfksdjaflk
Title: another title
Description: another description
Field1:
Field2: my previous field was blank but this one is not, anyways
etc.
The only way so far I found to generate such a html table is using repeating tags for every field and every record e.g.:
<tr><th>Title</th><td>something or rather bla bla</td></tr>
<tr><th>Description</th><td>very long desription</td></tr>
...
<tr><th>Title</th><td>another title</td></tr>
<tr><th>Description</th><td>another description</td></tr>
...
Of course this is semantically incorrect but produces correct visual layout. I need it to be semantically correct html, as that's the only sane way of later attaching a filtering javascript facility.
The following correct semantically produces an extremely wide table with a single set of field headers on the left:
<tr><th>Title</th><td>something or rather bla bla</td><td>another title</td></tr>
<tr><th>Description</th><td>very long desription</td><td>another description</td></tr>
...
So to summarise, need a html table (or other html structure) where it's one record under another (visually) with repeating field headers, but the field headers must not be repeated in actual code because that would wreck any record based filtering to be added later on.
Yo. Thanks for updating your question, and including some code. Typically you'd also post what you've tried to correct this issue - but I'm satisfied enough with this post.
Since you want the repeating headers in vertical layout (not something I've seen often, but I can understand the desire), you don't have to modify the HTML formatting, just use a bit more JavaScript to figure it out. I haven't gone through and checked to see if I'm doing things efficiently (I'm probably not, since there are so many loops), but in my testing the following can attach to a vertical table and filter using a couple variables to indicate how many rows there are in each entry.
Firstly, here's the HTML I'm testing this one with. Notice I have a div with the id of filters, and each of my filter inputs has a custom attribute named filter that matches the header of the rows they are supposed to filter:
<div id='filters'>
Title: <input filter='Title'><br>
Desc: <input filter='Description'>
</div>
<table>
<tr><th>Title</th><td>abcd</td></tr>
<tr><th>Description</th><td>efgh</td></tr>
<tr><th>Title</th><td>ijkl</td></tr>
<tr><th>Description</th><td>mnop</td></tr>
<tr><th>Title</th><td>ijkl</td></tr>
<tr><th>Description</th><td>mdep</td></tr>
<tr><th>Title</th><td>ijkl</td></tr>
<tr><th>Description</th><td>mnop</td></tr>
<tr><th>Title</th><td>ijkl</td></tr>
<tr><th>Description</th><td>mnop</td></tr>
</table>
Here are the variables I use at the start:
var filterTable = $('table');
var rowsPerEntry = 2;
var totalEntries = filterTable.find('tbody tr').size() / rowsPerEntry;
var currentEntryNumber = 1;
var currentRowInEntry = 0;
And this little loop will add a class for each entry (based on the rowsPerEntry as seen above) to group the rows together (this way all rows for an entry can be selected together with a class selector in jQuery):
filterTable.find('tbody tr').each(function(){
$(this).addClass('entry' + currentEntryNumber);
currentRowInEntry += 1;
if(currentRowInEntry == rowsPerEntry){
currentRowInEntry = 0;
currentEntryNumber += 1;
}
});
And the magic; on keyup for the filters run a loop through the total number of entries, then a nested loop through the filters to determine if that entry does not match either filter's input. If either field for the entry does not match the corresponding filter value, then we add the entry number to our hide array and move along. Once we've determined which entries should be hidden, we can show all of the entries, and hide the specific ones that should be hidden:
$('#filters input').keyup(function(){
var hide = [];
for(var i = 0; i < totalEntries; i++){
var entryNumber = i + 1;
if($.inArray(entryNumber, hide) == -1){
$('#filters input').each(function(){
var val = $(this).val().toLowerCase();
var fHeader = $(this).attr('filter');
var fRow = $('.entry' + entryNumber + ' th:contains(' + fHeader + ')').closest('tr');
if(fRow.find('td').text().toLowerCase().indexOf(val) == -1){
hide.push(entryNumber);
return false;
}
});
}
}
filterTable.find('tbody tr').show();
$.each(hide, function(k, v){
filterTable.find('.entry' + v).hide();
});
});
It's no masterpiece, but I hope it'll get you started down the right path.
Here's a fiddle too: https://jsfiddle.net/bzjyfejc/
The code I used to Produce This is the same as the one WITHOUT this problem
(just pulling from a different database column)
if (!string.IsNullOrEmpty(childspec.titlew)) {
wtitle = childspec.titlew;
ltlMasterPageTitle.Text = HttpUtility.HtmlDecode(wtitle) + "";
} else {
wtitle = childspec.laytitle;
ltlMasterPageTitle.Text = "Company Name - " + HttpUtility.HtmlDecode(wtitle);
}
here is the code that does the output.
When its the ELSE case then the content does not have a wrapper around this
not sure if this is a serious SEO issue as well**
ALSO how do i remove this extra Tab space infront of the text?
I still don't know where the extra space came from but I just applied
Trim()
again before the output code and it removed all extra spacing and quotes
I want to perform an HTML table search on one column of a table. The table in this example here shows 2 columns. I have added classes to the tags to select column "Title 1" to filter only - however, the code is still looking at the "Title 2" column for the filter.
var $rows = $('#table tbody tr td[class = "col1"]');
$('#search').keyup(function() {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
Could anyone provide some advice to the mistake I am making?
The main problem of your code is that when you do hide(), you're hiding out the <td> instead of the <tr> so that you end up searching col2 when the <td> of col1 is hidden. So, in that regard you need to use the parent <tr> and hide it.
}).parent("tr").hide();
Another problem i saw is that your $row is good initially but once you
hide at least a row you end up with less rows to work with. So, in that regard you
need to preserve the original number of rows and use it to hide those that need to be hidden and show those need to be shown.
See my updated JSFiddle Demo
As per the OPs comments.
I think you're running into trouble because your selector is too detailed. try:
var $rows = $(".col1", "table");
I have an account with a Note in notesandattachment related list.
I want to display the text of 8 lines, out of 50 lines on a section of visualforce page.
And remaining 42 lines in another section of same visualforce page.
what i know :
I need to split the notes.body into two substrings. One, with 8 lines of text and second one with 42 line.I need to use div tags to get this done on the visualforce page. I might be wrong.
Please suggest me, how do i achieve this.
Appreciate the help.
You can split the text in controller by using split() method like this
String allLines[] = allText.split('\n');
String first8Lines = '';
String restLines ='';
for(Integer i =0; i<8 ; i++){
first8Lines += allLines[i];
}
for(Integer i =7; i<50 ; i++){
restLines += allLines[i];
}
And then put {!first8Lines} in one place and {!restLines} in another
I'm using Qwebkit and I like to be able to insert into html table each data input that comes last
as first record (<tr><td>...my data ...</td></tr>) in to the table.
Here is my code this is only example :
ui.webView->page()->mainFrame()->setHtml("<html><body><p>HTML Table Test</p>"
"<table id=\"mainTable\" name=\"mainTable\" BORDER=1 BORDERCOLOR=RED></table>"
"</body></html>");
QWebElement body = ui.webView->page()->mainFrame()->documentElement();
QWebElement mainTable = ui.webView->page()->mainFrame()->findFirstElement("#mainTable");
mainTable.appendInside ("<tr><td>1111111<\/td></\tr>"); ///<-- this is i like to be last in the end
mainTable.appendInside ("<tr><td>2222222<\/td></\tr>"); ///<-- this is i like to be in the middle
mainTable.appendInside ("<tr><td>3333333<\/td></\tr>"); ///<-- this is i like to be in the first
The content of the records are coming dynamically and not as I show here, so I can't do it hard coded; in short I need LIFO algorithm here ..
How should I do that ?
The QWebElement::appendInside method add the parameter to the end of the web element.
The QWebElement::prependInside method add the parameter to the beginning of the web element.
If we have a QWebElement *elt containing a empty table such as :
<table><table>
to create the following table,
<table>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
</table>
You can use one of the two following methods, they are equivalent.
Method 1, with appendInside
elt->appendInside("<tr><td>A</td></tr>");
elt->appendInside("<tr><td>B</td></tr>");
elt->appendInside("<tr><td>C</td></tr>");
or method 2, with preprendInside
elt->prependInside("<tr><td>C</td></tr>");
elt->prependInside("<tr><td>B</td></tr>");
elt->prependInside("<tr><td>A</td></tr>");
Using prependInside or appendInside gives you the control over the FIFO or LIFO behaviour of your algorithm.