Dynamic apply the costom css to tabulator table cell
I need to change the style of "ID" column depands on dynamic number. It was done as you can see the tail of my codes but use SPAN tag to make it works.
Of coz i want to use CSS style sheet to make it look nice and i tried somethings like:
<div class="myclass">ID</div>
<font class="myclass">ID</font>
to make it work but fail.
How can i add costom CSS to tabulator table cell?
Or any better suggestion for my case?(Dynamic apply the costom css to tabulator table cell)
var table = new Tabulator("#table_1", {
height:"100%",
rowHeight:40,
layout:"fitColumns",
movablecolumns:true,
vertAlign:"middle",
columns:[
{title:"name", width:25,hozAlign:"center"},
{title:"age", width:80, hozAlign:"left" },
{title:"sex", width:25,hozAlign:"center",headerSort:false, headerVertical:true},
{title:"ID", width:25, hozAlign:"center", headerVertical:true,
formatter:function(cell, formatterParams){
var value = cell.getValue();
if(value <= 3){
return "<span style='width:20px;height:20px;background-color:blue;color:white;'>" + value + "</span>"
}else{
return "<span style='width:20px;height:20px;background-color:red;color:white;'>" + value + "</span>"}
}
},]})
Related
First I create my dynamic table and add the data-content to the table. Then I add my popup code but it is not working. How can I solve this problem?
var attachmentList = $("#newTable");
var table = $('<table id="list-table"></table>')
.addClass('ui very basic table listpeople');
var row = $("<tr class='tablerow'></tr>");
$("<td>").addClass("collapsing general-popup")
.attr("colspan", 3)
.html("<center><div class='ui image fluid label clearfix ellipsisSection wait-popup' id='wait-approve' data-content='Hello Stackoverflow'>" + labelMessage + "</div></center>")
.appendTo(row);
table.append(row);
attachmentList.append(table);
$('.wait-popup').popup();
I'm writing a script to login to an internal html site, click around to the appropriate place, click on a specific row in an HTML table, and click a submit button. I'm pretty much there, except I can't figure out how to click the correct row - or any row for that matter.
Here is the source of the table: HTML Source
Here is what I've tried so far after navigating to the page with the table of interest (with no results, but no errors):
Set mainTable = IE.Document.getElementByID("main").contentwindow.document
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(0).getElementsByTagName("td").Item(3).focus
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(0).getElementsByTagName("td").Item(3).click
The code below tries to change the attributes in the HTML table based on changes that I've observed when manually clicking on a cell, but these changes have no effect on the view of the table (the row should be highlighted when a cell within it is clicked) and still don't allow me to click the submit button, which requires a row to be selected:
currScenario = mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(1).getElementsByTagName("td").Item(2).realValue 'gets string value for "Current Scenario" field, which I've unsuccessfully tried to use to manually update the "selected" attribute in the table
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).setAttribute "selected", "ScenarioName=" & currScenario
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(0).setAttribute "class", "Skin_Selection_Color"
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(0).style.setAttribute "highlight", "true"
I am a little fuzzy on what you need, but I think that using css for the row highlight and a onClick for the cell selection..
"the row should be highlighted when a cell within it is clicked"
CSS:
#msg_table tr:hover{background-color:white; }
Javascript:
/* create HTML table in Javascript */
for (var j = 0; j < search_results_length; j++){
// get zebra striping
if (j % 2 == 0){
//even
zebra = "zebra_0";
}else{
//odd
zebra = "zebra_1";
}
...
myTable+="<tr class='" + zebra + "' onClick='collapse_section_switch(" + j + ")'>"
/* row click here */
myTable+="<td align='right' onClick='balance_stuff(\"search_results[j].customer_number\")'>" + search_results[j].customer_balance + "</td>"
/* cell click here */
...
}
Does this help at all?
I still don't understand why the .click() command wouldn't click on the cell, but it turns out the answer was to use .FireEvent("onmouseup").
I am attempting to find a way so that when a user enters text into the data list, they can come across the same entry by course number (E.G. "CS 101") or course name (E.G. "Intro to Computer Science).
Currently, what I have is only searchable by the value field:
<datalist id="tagList">
<option value=""></option>
<option value="CSCI 4950">Senior Software Project</option>
<option value="CSCI 5117">Developing the Interactive Web</option>
<option value="CSCI 5421">Advanced Algorithms</option>
<option value="CSCI 5980">Design Methods for Comp. Sci.</option>
</datalist>
The solution needs to work in the Android Webkit web browser (Phonegap) -- Chrome seems to handle Datalists the same as Android's native browser so if it works in Chrome I should be ok.
It needs to display both the course name and course number to the user
This needs to be generalizable and not hard-coded as I am using AngularJS to actually populate the full list of courses.
What I've tried
https://stackoverflow.com/a/22827978/2831961 -- For some reason, this didn't work.
I've also tried a similar strategy, but with the data-value attribute. That didn't work either. Unless I am responsible for some behind the scenes Javascript work that I am unaware of.
http://jsfiddle.net/rh48cgrj/3/
Here's a fiddle. I put the option values/text into key:value pairs in a javascript object. NOTE: the key is an index number and the value is the option value attribute AND the text. This makes it easier to search them for our text.
var i = 0;
var selectItems = {}
$('#tagList option').each(function() {
var listvalue = $(this).val();
var listtext = $(this).text();
selectItems[i] = listvalue + " " + listtext + ",";
i++;
});
Then I split them into rows that included both value and text.
count = i;
for(i=0; i < count;i++) {
var blockoftext = blockoftext + " " + selectItems[i].toLowerCase() + ",";
}
I then setup a search function that would search those rows to see if any returned a match, and if they did the result was outputted to a div below the search box.
var texttosplit = blockoftext.split(",");
var searchresults;
for(i=0; i < texttosplit.length; i++) {
(texttosplit[i].indexOf(searchvalue.toLowerCase()) != -1) ?
(searchresults = texttosplit[i] + "<br>") : false;
$("#searched").html(searchresults);
}
There's an example for all of the above in the fiddle.
EDIT: The below is the commented code for the loop to check if search text is in the datalist per op request.
for (i = 0; i < texttosplit.length; i++) {
//The above loops through our array of class values and titles
(texttosplit[i].indexOf(searchvalue.toLowerCase()) != -1) ?
// The above determines if our search text is in class title using a ternary operator
// our array of class values and titles is lowercase so we make
//sure our search text is lowercase as well
// if we find a match between the search text and the class title/values perform the following:
(searchresults = texttosplit[i].replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
})
// The above replaces the first char of every word with an uppercase char
.replace("Csci", "CSCI") + "<br>",
// The above finds Csci and changes it to CSCI since all THOSE letters should be uppercase
prevtext = $("#searched").html(),
//get current text of element with id "searched" and place it in prevtext
$("#searched").html(prevtext + searchresults))
//append "searched" by adding it's current text with the new searchresults
:
//if search text is not in the class title return false
false;
}
I am new to MVC and I use Webgrid to display some customer values.
I need to hide columns together with their headers. How do i do this?
CSS: gridhide { visibility:hidden }
Code: grid.Column("Id", "ID", style: "gridhide"),
I hide particular column:
Please Try This:
WEBGRID
grid.Column(null,null, format: #<input type="hidden" name="IDHidden" value="#item.IDHidden"/>),
I ended up using jQuery to hide the column on the client side. Not ideal but easy to implement. Eg to hide the second column:
$('td:nth-child(2),th:nth-child(2)').hide();
Another option would be to simply not add the column to the grid in the first place like so, as seen here: https://forums.asp.net/post/5850519.aspx
var books = db.Query(sql);
var columns = new List<WebGridColumn>();
columns.Add(new WebGridColumn(){ColumnName = "BookId", Header = "Book Id" });
if(books.Any(b =>b.Price != null)){
columns.Add(new WebGridColumn(){ColumnName = "Price", Header = "Price" });
}
var grid = new WebGrid(books);
gridhide is a class, define class instead of style in grid.column
Is there a way to autosize HTML table height based on content? Also if it's a cell (or cells) next to a neighbor cell with multiple rowspans.
E.g. if I have a table like this (cell on the right has Rowspan="2" and height of the cell content = 600px, in each cell on the left height of the cell content = 150px):
there is a gap between 2 cell consents on the left because cells themselves autosized their height. I'd like it to look like this:
Where top cells automatically collapse to cell content height. Is there anyway to achieve this?
This sets the last row of cells to the correct height (demo):
function grow(td) {
var table, target, high, low, mid;
td = $(td);
table = td.closest('table');
target = table.height();
low = td.height();
// find initial high
high = low;
while (table.height() <= target) {
td.height(high *= 2);
}
// binary search!
while (low + 1 < high) {
mid = low + Math.floor((high - low) / 2);
td.height(mid);
if (table.height() > target) {
high = mid;
} else {
low = mid;
}
}
td.height(low);
}
$('tr:last-child td').each(function() { grow(this); });
It should be trivial to convert this into plain JavaScript.
Update: For more complicated tables, you'll want to replace the last line with this (demo):
$.each($('td').get().reverse(), function() { grow(this); });
The idea is to call grow() on every cell, starting with the last row and working upwards.
considering table id="mytable" it would be:
$("#mytable").find("td").each(function(){
var ContentHeight = $($(this).html()).height();
$(this).height(ContentHeight);
});
at the end of the your page create a javascript code and let it do it for you:
<script type="text/javascript">
document.getElementById("idOfTd").style.height="100px";
</script>
I think it better create like this http://jsfiddle.net/miqdad/w9QYB/