I have a user control that is part of an update panel. The user control is a heading( tag) and a asp Table. The asp:Table is defined in the ascx file only with the headers. The contents of this table are updated dynamically from the code behind by reading a csv file. This set up is within an Update panel which updates every minute. After every minute the csv file gets updated and hence the table needs to be updated.
Here is the tricky part. Before the table is I updated I need to save a copy of the old table and then update the new table. Once the new table is updated and the page is about to be loaded I need to call a javascript function from in the page_load handler and pass the two tables. Inside the javascript function I need to compare the old table and the new table cell by cell and do some work based on the result of the comparison.
Here is how I copy the data from the table to another table before updating it.
TableCell tableCell;
TableRow tableRow;
for (int i = 0; i < Table1.Rows.Count; i++)
{
tableRow = new TableRow();
for (int j = 0; j < Table1.Rows[i].Cells.Count; j++)
{
tableCell = new TableCell();
tableCell.Text = Table1.Rows[i].Cells[j].Text;
tableRow.Cells.Add(tableCell);
}
oldTable.Rows.Add(tableRow);
}
But for some reason when I pass the tables to the javascript function and access the cells in javascript I see only the headers and not any values in the old table. But when I access the cells in my code behind itself I can see the values.
My HTML is
<table id="ContentPlaceHolderBody_ContentPlaceHolderBody_TradxPriceTable_5_oldTable" ClientID="oldTable">
<tr>
<td colspan="3">6M EURIBOR</td>
<td colspan="3">6M EURIBOR</td>
</tr><tr>
<td>Instr</td>
<td>Bid</td>
<td>Ask</td>
<td>Instr</td>
<td>Bid</td>
<td></td>
</tr><tr>
<td></td>
<td></td>
<td></td>
<td colspan="3">BASIS 3s6s</td>
</tr><tr>
<td></td>
<td></td>
<td></td>
<td>Instr</td>
<td>Bid</td>
<td>Ask</td>
</tr><tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
My javascript is
function foo(table1,table2)
{
var oldTable = document.getElementById(table1);
var newTable = document.getElementById(table2);
alert(oldTable.rows[2].cells[1].innerHTML+" "+newTable.rows[2].cells[1].innerHTML);
}
use html tables and form a string with the tables and the values and pass that string to javascript.
string newTable = "<Table><Tr><Td>"+ somevalue +"</Td></Tr></Table>"
in javascript
var newT = '<%= newTable %>'
Related
I have an HTML file that contains many tables, but I want to access a specific table from the file (not all tables).
So how can I do that?
Code is look something like below and all tables are without ids
`<table border=1>
<tr><td>VI not loadable</td><td>0</td></tr>
<tr><td>Test not loadable</td><td>0</td></tr>
<tr><td>Test not runnable</td><td>0</td></tr>
<tr><td>Test error out</td><td>0</td></tr>
</table>`
every table should have an Id or something that could be Identified from the others, if so you can get it via jquery. for example :
<table class="table table-striped" id="tbl1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
and get it like this:
var table = $('#tbl1').html();
if not you can find it by its priority in the file. for example you can access to 2nd table like this :
var table = $('table:nth-child(2)')
or in C# maybe this would help:
HtmlNode table = doc.DocumentNode.SelectSingleNode("//table[1]")
foreach (var cell in table.SelectNodes(".//tr/td"))
{
string someVariable = cell.InnerText
}
I'm returning a list of lists to an MVC view, displayed as a set of tables. I'm using nested for loops to try to return the values within each list.
The tables are returning to the view with the expected number of rows in each, but instead of values in each of the rows, they are returning the names of their parameters, rather than the actual value of each parameter.
The code in my view is currently:
#if (Model.Report != null)
{
for(var row = 0; row < Model.Report.Count(); row++)
{
<table>
<tr>
<td><h4>#Html.DisplayNameFor(m=>m.Report[row].ReportData[row].ReportingGroup)</h4></td>
</tr>
<tr class="table-header">
<td style="text-align: center">Name</td>
<td style="text-align: center">Area</td>
<td style="text-align: center">Message</td>
</tr>
#for (var listing = 0; listing < Model.Report[row].ReportData.Count(); listing++)
{
<tr>
<td style="text-align: center">#Html.LabelFor(a=>a.Report[row].ReportData[listing].Name)</td>
<td style="text-align: center">#Html.LabelFor(a => a.Report[row].ReportData[listing].Area)</td>
<td style="text-align: center">#Html.LabelFor(a => a.Report[row].ReportData[listing].Message)</td>
</tr>
}
</table>
}
}
Rather than the actual values of the parameters returning to each row in the view, I'm returning the parameter names("Name", "Area", and "Message") to each. I am wondering where I've gone wrong here.
LabelFor displays a label for the property you pass it. Without further attributes, that's just the property name.
You just want to print the value itself:
#Model.Report[row].ReportData[listing].Message
You should replace your for loop with a foreach so you don't need to do all that.
Change your LabelFor to DisplayFor or TextBoxFor in your for loop.
I have these tables:
<table>
<tbody>
<tr><th>Header 1</th></tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
<td>text 4</td>
<td>text 5</td>
</tr>
</tbody>
</table>
I am trying to transform into an array or List using this code:
var query = from table in doc.DocumentNode.SelectNodes("//table").Cast<HtmlNode>()
from row in table.SelectNodes("tr").Cast<HtmlNode>()
from header in row.SelectNodes("th").Cast<HtmlNode>()
from cell in row.SelectNodes("td").Cast<HtmlNode>()
select new {
Table = table.Id,
Row = row.InnerText,
Header = header.InnerText,
CellText = cell.InnerText
};
But it doesn't work. What is wrong?
Some notes:
You do not need a cast
you are assuming that each row have headers
SelectNodes needs to receive an xpath and you are passing just names
if i were you i would use a foreach and model my data, that way i get to have more control and efficiency, but if you still want to do it your way this is how it should be
var query = from table in doc.DocumentNode.SelectNodes("//table")
where table.Descendants("tr").Count() > 1 //make sure there are rows other than header row
from row in table.SelectNodes(".//tr[position()>1]") //skip the header row
from cell in row.SelectNodes("./td")
from header in table.SelectNodes(".//tr[1]/th") //select the header row cells which is the first tr
select new
{
Table = table.Id,
Row = row.InnerText,
Header = header.InnerText,
CellText = cell.InnerText
};
I have a Table with multiple rows. These rows contain an asp.net multirow textbox
<table>
<tr>
<td>Invoice 1</td>
<td><asp:TextBox ID="invoiceDesc" runat="server" Rows="1" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td>Invoice 2</td>
<td><asp:TextBox ID="invoiceDesc" runat="server" Rows="1" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td>Invoice 3</td>
<td><asp:TextBox ID="invoiceDesc" runat="server" Rows="1" TextMode="MultiLine"></asp:TextBox></td>
</tr>
</table>
The table is rendered using an asp.net gridview control. I'm trying to adjust each textbox number of rows depending on the content loaded.
So far I've tried adding the code below to $(document).ready :
var text = $("#<%=invoiceDesc.ClientID%>").val();
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
$('#<%=invoiceDesc.ClientID%>').attr('rows', count);
But the jQuery Code above doesn't work.
Replace the javascript code given below and pass your textarea id instead of test that i have used as sample.
var count = 20; //set the cols attribute of the textarea here i have set it to 20 just for an example which is by default for HTML textarea
var lineCount = ($('#test').val().length / count);
var lineBreaksCount = ($('#test').val().split('\r\n'));
alert(Math.round(lineCount)+1);
I hope this will solve your problem :)
I have something like this:
<table id="tableId" runat="server">
<thead>
<tr>
<th>Example thead1</th>
<th>Example thead2</th>
</tr>
</thead>
<tbody id="tb0">
<tr>
<td>Example 1</td>
<td>Something</td>
</tr>
</tbody>
<tbody id="tb1">
<tr>
<td>Example 2</td>
<td>Something</td></tr>
</tbody>
<tbody id="tb2">
<tr>
<td>Example 3</td>
<td>Something</td>
</tr>
</tbody>
</table>
I use multiple "tbody" with different IDs so I can delete it or create it anytime I want.
What I'd like to do is getting each row from multiple "tbody" from the table "tableId".
In C#, if I use the command "tableId.Rows[0].Cells[0].InnerHtml", I get the result: "Example thead1".
But if I use "tableId.Rows[3].Cells[0].InnerHtml", I can't get the "Example 3" as available in table row, instead of it I get an error which says that row doesn't exist or it's out of index.
I have tested the your code. and found that tableId.Rows[3].Cells[0].InnerHtml will give always Example 3 ..that's is correct as per your aspx markup code.
i think you have place row index incorrect i.e. something like below
tableId.Rows[4].Cells[0].InnerHtml which not exist in your table structure.
that's why you get error of Specified argument was out of the range of valid values.Parameter name: index
Hope this will helps you...happy coding...
Make the tbody elements server controls.
<tbody id="tb2" runat="server">
<tr>
<td>Example 3</td>
<td>Something</td>
</tr>
</tbody>
Then toggle the visibility as you need:
tb2.Visible = true / false;
As per comment:
Probably the designer doesn't create a reference to tb1, tb2, tb3 controls because they are inner controls of tableId.
If so:
var tb2 = tableId.FindControl("tb2");
tb2.Visible = ...
You could use JQuery, something like this....
$('tbody', '#tableid');
But I guess depends on what you want to do with them, and where
JQuery docs:
Selectors: http://api.jquery.com/category/selectors/
Traversing: http://api.jquery.com/category/traversing/