I have a HTML table. It has 3 columns. The first column is name. 2nd is School and 3rd is HomeAddress.
The table loads records from the DB, therefore the number of rows may vary from time to time. The 3rd Column (HomeAddress) should have no rows, while the other 2 columns (name and school) can have more rows. How should i model the HTML table to have the 3rd column with no rows ?
<table border="1">
<tr>
<th>
Name
</th>
<th>
School
</th>
<th>
Home Address
</th>
</tr>
#foreach (var i in Model.allPpl)
{
<tr>
<td>
#Html.DisplayFor(modelItem => i.name)
</td>
<td>
#Html.DisplayFor(modelItem => i.school)
</td>
<td>
// THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
</td>
</tr>
}
Rowspan attribute is your only friend.
Try <td rowspan="rowcount"></td> for third column where rowcount is the no. of rows returned.
And modify your foreach loop as follows:
#bool flag=false;
#foreach (var i in Model.allPpl)
{
<tr>
<td>
#Html.DisplayFor(modelItem => i.name)
</td>
<td>
#Html.DisplayFor(modelItem => i.school)
</td>
if(!flag){
<td rowspan="#Model.allPpl.count">
// THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
</td>
}flag=true;
</tr>
}
Note: I haven't tested this razor view code so please take care of compiler error if shows any.
I think these entries will help you:
http://www.w3schools.com/tags/att_td_rowspan.asp
http://www.w3schools.com/tags/att_td_colspan.asp
Related
I am using primeNg row expansion feature.
Code is here : https://primefaces.org/primeng/showcase/#/table/rowexpansion
I have a requirement to display yellow background for odd rows and grey background for even rows, but the additional inserted row having the child table should not be included during calculation.
Consider the below html example, where user has expanded the first row. I do not want the rows with 'table-row-expand' class to be considered in the even/odd rule. Here I want first row to have yellow color, second row to have grey color and third row to have yellow again. The expanded row should not have any background.
Note that the .table-row-expand row gets added to the DOM only when user expands the corresponding row. Kindly help me with this problem.
.table-row:nth-child(odd) {
background-color: yellow;
}
.table-row:nth-child(even) {
background-color: grey;
}
<table>
<tr class='header-row'>
<th> </th>
</tr>
<tr class='table-row'>
<td> // first row (should be gray)</td>
</tr>
<tr class='table-row-expand'>
<td> // expanded row (should not be colored)
<div>
<p-table> // child table </p-table>
</div>
</td>
</tr>
<tr class='table-row'>
<td> // second row (should be yellow)</td>
</tr>
<tr class='table-row'>
<td> // third row (should be gray)</td>
</tr>
</table>
Save yourself a headache and drop in a wee bit 'o JavaScript. You may need to put this code in a function to be called when new rows are added.
.table-row.odd {
background-color: yellow;
}
.table-row.even {
background-color: grey;
}
<table>
<tr class='header-row'>
<th> </th>
</tr>
<tr class='table-row'>
<td> // first row (should be gray)</td>
</tr>
<tr class='table-row-expand'>
<td> // expanded row (should not be colored)
<div>
<p-table> // child table </p-table>
</div>
</td>
</tr>
<tr class='table-row'>
<td> // second row (should be yellow)</td>
</tr>
<tr class='table-row'>
<td> // third row (should be gray)</td>
</tr>
</table>
<script>
const styledRows = document.querySelectorAll('.table-row');
const isOdd = n => Boolean(n % 2); // returns true if n / 2 has a remainder
styledRows.forEach((row, i) => {
row.classList.add(isOdd(i) ? 'odd' : 'even');
});
</script>
I'm trying to display a table from a model. But the problem is that my model class has a string that already includes an <a> tag.
My view is:
#model MyWeb.Models.Incidente
#{
Layout = null;
ViewBag.Title = "Communication for " + Model.num.ToString();
}
<h2>#ViewBag.Title</h2>
<table class="table">
<tr>
<th> User </th>
<th> Date </th>
<th> Time </th>
<th> Message </th>
</tr>
#foreach (MyWeb.Models.Comunication item in Model.GetComunications())
{
<tr>
<td> #Html.DisplayFor(modelItem => item.user) </td>
<td> #Html.DisplayFor(modelItem => item.date) </td>
<td> #Html.DisplayFor(modelItem => item.time) </td>
<td> #Html.DisplayFor(modelItem => item.message) </td>
</tr>
}
</table>
The problem is that one item in GetComunications() has a message that include a link to Google:
You can Google it, just press Here!. Thank you!
So when the table is displayed the message shows the tag instead of creating the link in "Here!".
How can I solve this problem, and show a message that already has a link on the string?
If you are sure about the sanitation of your output, you can use Html.Raw:
#Html.Raw(Html.DisplayFor(modelItem => item.message))
I have similiar structure to this:
<table class="superclass">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
<table cellspacing="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
This is how I get the first table with class:
HtmlNode firstTable = document.DocumentNode.SelectSingleNode("//table[#class=\"superclass\"]");
Then I read the data. However I don't know how to get straight to the another table and read that data too. Any ideas?
I'd rather avoid counting which table it is and then using index to that table.
There is XPath following-sibling axis which allows you to get element following current context element at the same level :
HtmlNode firstTable = document.DocumentNode.SelectSingleNode("//table[#class=\"superclass\"]");
HtmlNode nextTable = firstTable.SelectSingleNode("following-sibling::table");
If you want to access multiple nodes, you can consider SelectNodes(xpath) method over SelectSingleNode(xpath) method.
I'll provide a sample code here for reference, it may not work towards your need.
var tables = htmlDocument.DocumentNode.SelectNodes("//table");
foreach (HtmlNode table in tables)
{
if (table.GetAttributeValue("class", "").Contains("superclass"))
{
//this is the table of class="superclass"
}
else
{
//this is the other table.
}
}
I'm really new at using Razor with MVC, and so far I really like it.
One little thing I want to do is write a variables value to an attribute in HTML.
For example, if I had the following:
<table style="width: 100%">
<tr>
<th>
ID
</th>
<th>
Name
</th>
<th>
Value
</th>
</tr>
#foreach (var item in Model)
{
<tr id="ID#item.id">
<td>
#item.id
</td>
<td>
#item.name
</td>
<td>
#item.value
</td>
<td>
</tr>
}
</table>
I would want all the tags to have an ID equal to "ID[insert item's id]", but instead I get an ID equal to "ID#item.id".
How do I write a variable's name between HTML quote marks?
Thanks!
This pattern is recognized as an email address. Do the following to work around this behavior:
<tr id="ID#(item.id)">
I have an html table
<table border="0" width="100%">
<tr class="headerbg">
<th width="5%">
No
</th>
<th width="30%">
Name
</th>
<th width="20%">
Department or Division
</th>
<th width="25%">
Email
</th>
<th width="20%">
Staff/Student
</th>
</tr>
<tr class="bg2">
<td>
1
</td>
<td>
<strong><a class="searchLink2" href="tel_search.php?fore=Dave&sur=Rumber">Dave Rumber</a></strong>
</td>
<td>
Medical School
</td>
<td>
<a class="searchLink2" href="mailto:Dave.Rumber#Home.com">Dave.Rumber#Home.com</a>
</td>
<td>
Student
</td>
</tr>
</table>
Sometimes there will be more than one row of people results.
I would like to be able to go through each row and pluck out the name and e-mail information and do some other processing. Put the data in a datagrid, and possibly into a database.
I guess my question is how do I do this?
string table = GetContents(buffer);
table = table.Replace(" ", "");
table = table.Replace("&", "&");
XElement inters = XElement.Parse(table);
I can put it into an XElement but I am not quite sure where to go from here!
Thanks!
Here's some freehand code that should get you started. Don't do this in production, this is an educational demonstration only.
List<XElement> rows = inters
.Descendants
.Where(x => x.Name == "tr")
.Skip(1) //header
.ToList();
//
// and now to turn rows into people
List<Person> people = rows
//filter to anchor. should be two.
.Select(r => r.Descendants.Where(a => a.Name = "a"))
//Project each anchor pair into a Person
.Select(g => new Person()
{
Name = g.First().Value,
Email = g.Skip(1).First().Value
})
.ToList();
You can actually use an HTML table as a data source for OLE DB:
http://connectionstrings.com/html-table
Full Disclosure: I haven't actually tried this - but I'm guessing it'll be much easier than trying to parse XML out of HTML.