As of right now my table looks like this:
But I want to split the foreach to have it look something like this
Is possible to do this?
And this is the foreach:
#foreach (var date in ViewBag.MissingDays)
{
var isoDate = date.ToString("yy-MM-dd");
<tr>
<td>
#isoDate
</td>
</tr>
}
You can use the following code to generate rows containing 9 columns
#{var counter = 1; }
<tr>
#foreach (var date in ViewBag.MissingDays)
{
var isoDate = date.ToString("yy-MM-dd");
<td>#isoDate</td>
if (counter % 9 == 0)
{
#:</tr><tr> // end current row and begin new one
}
counter++;
}
</tr>
Related
In my Blazor server app, I am reading the CNC Files of a remote machine and listing them in the table's rows.
So far everything is OK.
When the user clicks on one TD element, the content of the CNC file will be shown on the screen in another table(This part I have not shown because it is not related to my problem)
I want that the last choosen CNC file (last clicked ) should be highlighted (font=red).
That means each time when the user selects another CNC-File, just the related should be higlighted all others should be in default color (black).
If I would have a static table I would use the a:focus. But my problem is that my td's will be generated dynamically. And I have to apply the a:focus function for just one td (that was clicked).
How can I do that?
I have tried to call a function in the style of the td style="#Style_CNC_File()" but the colors that I define in the function are applied to all of the td's.
Here is my code:
<table >
<tr>
<td>CNC Files</td>
</tr>
#{ if (Deltalogic.Return_Read_CNC_File == 0 && Deltalogic.Selected_CNC_File_Path_Type == "file")
{
for (var i = 0; i < Deltalogic.CNC_File_Array_lenght_dir - 1; i++)
{
var arg0 = "abc";
var arg1 = "def";
var arg2 = "ghi";
<tr >
<td style="#Style_CNC_File()" #onclick='#(e => Read_CNC_Files(arg0,arg1,arg2))'>/#Deltalogic.CNC_File_Out_Array_dir[i]</td>
</tr>
}
}
}
</table>
In my razor.cs file:
public string Style_CNC_File()
{
if (var_clicked == true)
{
return "color:#FF0000";
}
else
{
return "color:#000000";
}
}
Maybe you can set an id to your td and store the selected id :
<tr>
<td>CNC Files</td>
</tr>
#{ if (Deltalogic.Return_Read_CNC_File == 0 && Deltalogic.Selected_CNC_File_Path_Type == "file")
{
for (var i = 0; i < Deltalogic.CNC_File_Array_lenght_dir - 1; i++)
{
var arg0 = "abc";
var arg1 = "def";
var arg2 = "ghi";
<tr >
<td #onclick='#(e => HandleClick(i, arg0,arg1,arg2))' style="#Getstyle(i)">/#Deltalogic.CNC_File_Out_Array_dir[i]</td>
</tr>
}
}
}
</table>
#code {
int selectedId = -1;
void HandleClick(int id, string args0, string args1, string args2)
{
selectedId = i;
Read_CNC_Files(arg0,arg1,arg2);
}
void Getstyle(int id)
{
if (selectedId == i)
return "background-color:red;";
return string.Empty;
}
}
You can change the class or style as you want according to the index of the line.
I am having some issues on <tr> background color, having the same <tr id="">
Here is my Table.
<table class="table">
<tr id="2552">
<td>Roll No 1</td>
<td>800</td>
</tr>
<tr id="2552">
<td>Roll No 1</td>
<td>700</td>
</tr>
<tr id="4444">
<td>Roll No 11</td>
<td>800</td>
</tr>
<tr id="4444">
<td>Roll No 11</td>
<td>900</td>
</tr>
<tr id="7676">
<td>Roll No 12</td>
<td>800</td>
</tr>
<tr id="7676">
<td>Roll No 12</td>
<td>900</td>
</tr>
</table>
What I want.
Every 2 <tr> have same id But these ids are dynamic.
I want the <tr> having same id get different background-color.
Now in this table there are 3 ids are used. So 3 different colors can be there.
I have applied many jquery codes but failed.
Please help me
I Developed Dynamic table row id based color set and i hope its solve your problem. Code Reference
var table = document.getElementsByTagName("table")[0];
var secondRow = table.rows[1];
var count=0;
var trid =[];
var clr =[];
for(var i=0;i<table.rows.length;i++)
{
trid.push(table.rows[i].id);
}
var uniqueArray = [];
for(i=0; i < trid.length; i++){
if(uniqueArray.indexOf(trid[i]) === -1) {
uniqueArray.push(trid[i]);
}
}
for(var i = 0; i < uniqueArray.length; i++)
{
clr.push('#'+Math.floor(Math.random()*16777215).toString(16));
}
for (var i = 0; i < table.rows.length; i++) {
for(var j = 0; j < uniqueArray.length; j++)
{
if(table.rows[i].id ==uniqueArray[j]){
table.rows[i].style.backgroundColor = clr[j];
}
}
}
Hi Use looping in Jquery, loop through each tr and determine its ID, then apply bg color
$( "tr" ).each(function( index ) {
var ID = $(this)..attr('id');
if(ID == '2221')
{
$(this).css('background-color', 'red');
}
else if(ID == '2223')
{
$(this).css('background-color', 'blue');
}
});
How about something like this?
const used_ids = []
$( "tr" ).each(function( index ) {
const id = $(this).attr.('id')
if (!used_ids.includes(id)) {
// If the id has not been met before, add it to the array.
used_ids.push(id)
}
// Get index of id from array of used ids
const index = used_ids.indexOf(id)
// If index is an even number, set background colour to grey, otherwise white
if (index%2 === 0) $(this).css('background-color', 'white');
else $(this).css('background-color', 'grey');
})
It builds an array of unique ids, then assigns white to those with an even index in the array and grey to the odd indices.
i Need to get the content of the table. Below is my table
<tr class="oddRow" id="activeFiles25472825Row">
<td>Author Photo</td>
<td></td>
<td>
<div id="active_25472825_CALLOUT" class="fileTruncateCallout" style="position:absolute; display:none">JCS.jpg</div>
</td>
<td>01/28/2017</td>
<td>30.7 KB</td>
<td>Member</td>
<td>
download
</td>
</tr>
Here is my code. But i don't know what's next. I tried getting the value i need but i can't make it work. it didn't give me output, or error
HtmlAgilityPack.HtmlDocument newdoc = new HtmlAgilityPack.HtmlDocument();
newdoc.LoadHtml(htmlString);
GeckoElementCollection links = wb.Document.GetElementsByTagName("td");
foreach (var itm in links)
{
}
And the output
is
Name: JCS.jpg
Link: https://google.com.download
You can try something like this, I didn't test it but hopefully you understand the idea behind
foreach (var td in newDoc.DocumentNode.Descendants("td"))
{
var div = td.ChildNodes.FirstOrDefault(c => c.Name.Equals("div") && c.GetAttributeValue("class", "").Equals("fileTruncateCallout"));
if (div != null)
{
var name = div.InnerText;
}
else
{
var aNode = td.ChildNodes.FirstOrDefault(c => c.Name.Equals("a"));
if(aNode != null)
{
var href = aNode.GetAttributeValue("href", "");
}
}
}
In above link we have a table and show data using a url.
I want to sum Forks column on the result return by search something in table.
Eg. if I search boot or anything in search box,then it is showing result. I also want to put a footer like this,
<tfoot>
<tr class='info'>
<td>Sum of Forks</td>
<td> forks sum of return search result </td>
</tr>
</tfoot>
How to do this ?
Fiddle Link
You could use getData method to achieve what you want.
You can add your own Javascript like so:
$('#table').on('search.bs.table', function(param) {
var data = $('#table').bootstrapTable('getData');
sumForks(data);
})
function sumForks(dataObject) {
var sum = 0;
for (var key in dataObject) {
// skip loop if the property is from prototype
if (!dataObject.hasOwnProperty(key)) continue;
var obj = dataObject[key];
for (var prop in obj) {
// skip loop if the property is from prototype
if(!obj.hasOwnProperty(prop)) continue;
//alert(prop + " = " + obj[prop]);
if(prop === 'forks_count')
sum += parseInt(obj[prop]);
}
}
$('#table .info .forks_sum').html(sum);
}
Updated your fiddle also: http://jsfiddle.net/e3nk137y/4005/
Is this what you wanted?
I have a html table stucture. I need to get the value of the value of the first <td> in the final <tr> tag. Here is my table structure. The value I require from the below function getFinalNodeValue is "3".
<table id="test">
<tr>
<td>ID</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>1</td>
<td>Yasoda</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Samantha</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>Sajee</td>
<td>26</td>
</tr>
</table>
Here is the code I wrote using HtmlAgilityPack.
public String getFinalNodeValue(String URL)
{
var webGet = new HtmlWeb();
var pageSource = webGet.Load(URL);
var table = pageSource.DocumentNode.SelectSingleNode("//table[#id='test']//tr[1]");
string id = null;
IEnumerable<HtmlNode> trNodes = table.DescendantsAndSelf();
foreach (var currentItem in trNodes)
{
if (currentItem == trNodes.Last())
{
IEnumerable<HtmlNode> tdNodes = currentItem.Descendants();
foreach (var x in tdNodes)
{
if(x == tdNodes.First())
{
id = x.InnerText;
}
else
{
break;
}
}
}
else
{
continue;
}
}
return id;
}
The method doesn't return a value. Any help is highly appreciated.
This should do it:
HtmlDocument doc = new HtmlDocument();
doc.Load(MyHtmlFile);
HtmlNode node = doc.DocumentNode.SelectSingleNode("//table[#id='test']/tr[last()]/td");
Console.WriteLine(node.InnerText);
Note the usage of the XPATH last() function
The XPath you use to populate the table variable - "//table[#id='test']//tr[1]", selects the second TR element, no the table.
This most likely should just be "//table[#id='test']".
At this point, to fetch the descendant TR nodes into the trNodes variable, you should use:
IEnumerable<HtmlNode> trNodes = table.SelectNodes("tr");
if you change your table like this:
<table id="test" runat="server">
You can iterate over it in the codebehind, like this:
HtmlTable myTable = this.test;
int rowCount = myTable.Rows.Count;
HtmlTableCell td = myTable.Rows(rowCount - 1).Cells(0);
string val = td.InnerText;