Get Columns Name or Header Text of GridView Using JavaScript - javascript

I am developing a web application where I need Column's name of grid view using javascript. After that, display this column's name on Div.
Please help me out this.

There is no standard way to do so. GridView is nothing but a html table at runtime. So best you can do is to grab this table through javascript and grab its columns.
Suppose, you have declared your gridview like this:
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
and have bound it at runtime like this:
DataTable dt= new DataTable();
db.Columns.Add("Col1");
db.Columns.Add("Col2");
db.Rows.Add("one", "two");
GridView1.DataSource = dt;
GridView1.DataBind();
then at runtime, a markup like below is generated for your gridView
<table cellspacing="0" rules="all" border="1" id="GridView1"
style="border-collapse:collapse;">
<tr>
<th scope="col">Col1</th>
<th scope="col">Col2</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
so clearly, columns are the th elements in the GridView table, which you can easily grab through javascript like below:
var table = document.getElementById('GridView1');
var headers = table.getElementsByTagName('th');
for(var i=0;i<headers.length;i++)
{
alert(headers[i].innerText);
//or append to some div innerText
}
see this fiddle on how to grab table elements

GridView is rendered as HTML table on your page source, hence you can use Jquery to get the , view source and check if its associated with any class and then you can use it as selector, or regular $('table tr th') this post may help you How to get a table cell value using jQuery?

Related

Dynamic adding row in datatable make searchbox and row uneditable

I am using this patch to dynamically add row in datatable. After the row is added it makes row and searchbox uneditable. Hence I'm not able to search and perform editing on the table. This is my javascript and HTML code.
$('#example').dataTable().fnAddData([
count++,
order['wabn'],
picker_name,
order['client'],
])
This is my javascript which runs if a request is successful. It runs and adds the row in table. But then search box becomes uneditable. Before this table is editable, but once the row is added dynamically it is uneditable.
Here is my html code. In this I am adding my table in my template.
<table id="example" class="display table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>AWB</th>
<th>Reciever</th>
<th>client</th>
</tr>
</thead>
</table>
I have tried with make editable method but it did not work. Is there any way?

Search a table in jQuery after new rows have been added

I am very bad at Javascript/Jquery. Now that that's out of the way, I need some help with searching a dynamically built table. Here's the problem: on the pageload of my asp site, the repeater is bound, and the table is populated. I can use some sweet javascript function to filter the table, and that works very well. Unfortunately, I also rely on SignalR to get some realtime data into the table (it's a debug logger for another software project). Using SignalR and jQuery, I am able to prepend the new table row at the top and delete the last row so everything stays the same size. Once a new row is added to the table, though, my Javascript search breaks and is unable to search the newly added rows. I'm going to assume javascript does some sort of index on the table, but I'm not sure if that's right, and if it is, can I reindex? Yes, I have linked signalr and jquery up correctly. Thanks!
Below you'll find all the relevant code
HTML/ASP:
<HeaderTemplate>
<table id="debugTable" class="table table-bordered table-condensed">
<thead>
<tr >
<th >Time Stamp</th>
<th >Level</th>
<th >Logger</th>
<th >Message</th>
</tr>
</thead>
<tbody class="list">
</HeaderTemplate>
<ItemTemplate>
<tr >
<td class="timestamp"><%#Eval("Time_Stamp")%></td>
<td class="debuglevel" ><%#Eval("Level")%></td>
<td class="logger"><%#Eval("Logger")%></td>
<td class="message"><%#Eval("Message")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
Javascript:
<script type="text/javascript">
$(function () {
var myChatHub = $.connection.myChatHub;
myChatHub.client.newMessageReceived = function (time, level, logger, text) {
$('#debugTable tr:first').after('<tr> <td>' + time + '</td><td class="debuglevel">' + level + '</td><td>' + logger + '</td><td>' + text + '</td> </tr>');
$('#debugTable tr:last').remove();
}
});
$('.search').keyup(function() {
$.each($(".list").find("tr"), function () {
if ($(this).text().toLowerCase().indexOf($('.search').val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
</script>
you search function is this one right?
$('.search').keyup(function(){ . . . . })
evertime you add new ROWS in your TABLE the event needs to be called again, because the jQuery was loaded the old structure of HTML Elements.
So, to prevent a chain events in your page and solve the problem, you need to change your implementation to this:
function search(){
$('.search').unbind('keyup').bind('keyup', function(){ . . . });
}
search();
And call the function everytime you add new rows in your table:
search();
Cheers,
I found the problem!
It turns out every time I was adding a new row to the table, I was adding it to the thead. As a result, the search function was simply skipping those new rows. By simply changing my jquery selector to the following, I was able to add things to the tbody, and not the thead.
$('#debugTable tbody tr:first')
As opposed to
$('#debugTable tr:first')
A big shoutout to Cícero Feijó, who helped me with the search function and the event binding/unbinding. I have marked his response as the answer because that is the right way to do this, it was just a small oversight in my code that prevented his solution from working.

Adding html to a table using jquery

I have html table like this:
<table cellpadding="2" cellspacing="1" width="700">
<tbody>
<tr>
<td class="dark" colspan="2">
Customer Details
</td>
</tr>
<tr>
<td>
Customer Contact Name
</td>
<td>
<input name="tbname" type="text" id="tbname" class="widetb">
</td>
</tr>
</tbody>
</table>
I want to add Some text at the start of the table so it's the first td in the table, how can I do this using jquery? I really don't have clue where to start.
I have to do it this way as I don't have access to change this via the html.
Here is a one liner :
$('td.dark').text('Enter your text here!'); // the class is present in your HTML
This will search for the td with class dark which represents the first td and it will insert the text.
In case you have multiple tables:
$('td.dark').eq(0).text('Enter your text here!');
// here 0 represents the position of the table minus 1 , you want to change the text
As example, so:
$('td', 'table').first().text('hello!');
You could try a google search next time.
The jquery method find finds the set of elements in a parent matching a selector, and eq selects a certain element from the set (with element 1 being referenced by 0 as in arrays). Therefore, you can use the following if you only have one table in your entire document:
$("table") // select all tables
.eq(0) // select the one you want (the only one)
.find("td") // select all td's
.eq(0) // select the first one (the one you want)
.html("insert new content here"); // set the td's inner html
If you have multiple tables, it's tricky. You will need the index of your table relative to other tables. For example, if you have
<table>...</table>
...
<table>...</table>
...
<table>table you are targeting</table>
.......
Then the index of your table would be 2 because it is the third table in the document, and indices start at 0. If you have an index, you can use
var table_index=// set this to the index
$("table") // select all tables
.eq(table_index) // select the one you want (with the index)
.find("td") // select all td's
.eq(0) // select the first one (the one you want)
.html("insert new content here"); // set the td's inner html
It helps if you give your table an id, then you can do something similar to:
$('#id >tbody').prepend('<tr><td>A shiny new row<td></tr>');
Give ID to that First td as your code looks like
<table cellpadding="2" cellspacing="1" width="700">
<tbody>
<tr>
<td id="firsttd" class="dark" colspan="2">
Customer Details
</td>
</tr>
<tr>
<td>
Customer Contact Name
</td>
<td>
<input name="tbname" type="text" id="tbname" class="widetb">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#firsttd').text("Your title here");
</script>
If you can't access the HTML at all and if you have multiple tables then this will work:
var newTR = $( "<tr id='newRow'/>" );
var newTRcontent = "<td colspan=1>Your New Text Here</td>";
$("table:nth-of-type(2) tbody tr").first().before(newTR);
$("#newRow").html(newTRcontent);
I made an example fiddle here
Basically it about using the proper JQuery selector so $(table:nth-of-type(2) will select the second table. Then you can use the code I have above or maybe even better yet here is a one-liner:
$("table:nth-of-type(2) tbody tr").first().before("<tr><td>Your New Text Here</td></tr>");

get data from a remote site - html table

I want to create a html page that get data from a website table (not a database table -html one)
The code looks sorda like this:
http://jsfiddle.net/wpVtc/
I tried to use jQuery ".find" but I couldn't get it to work.
It dosn't have ANY classes of id's .
Then, when I get the data I want to display only that.
Thank u!
~Stephan
EDIT:
The data is always going to be at the same place and it as always going to end with either 'GB' or 'MB'.
If the data is always in the same position you could use .eq(n).
So if you example is:
<table>
<tr>
<tr> <--- i assume this is wrong
<td>
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>DATA I WANT</tr>
the selector would be:
"table tr td table tr:eq(6)"
See: http://api.jquery.com/eq-selector/
Another solution:
"table tr td table tr:contains(DATA I WANT)"
See: http://api.jquery.com/contains-selector/

How to remove an element without id

I have the following code:
<%-- other tags --%>
<table>
<tr width="100%">
<td width="130" />
<td id="BottomCell" width="100%" />
</tr>
<tr>
<td/>
<td/>
</tr>
</table>
<%-- other tags --%>
There may be more than one table on the page. I want the td before "BottomCell" to be removed (or hidden) when the page is loaded. How can I do this with javascript or css?
Thanks.
BTW, I'm developing a Sharepoint WebPart that will be put onto a page. The is on that page, which i don't have control of directly. But the WebPart should remove this as long as it shows up on the page.
Wow, going back to basics after using a framework is hard work.
var element = document.getElementById('BottomCell').previousSibling;
var parent = element.parentNode;
parent.removeChild(element);
In jQuery:
$('#BottomCell').prev().detach();
Well, assuming you have only one table, then you could do something like this (in javascript):
var firstCell = document.getElementsByTagName('tr')[0].getElementsByTagName('td')[0];
firstCell.parentNode.removeChild(firstCell);
It would get the first cell of the first row in the entire DOM tree, and remove that cell.
tr > td should do the trick.
Child and Sibling selectors
http://css-tricks.com/child-and-sibling-selectors/
#diodeus if there are only 2 data cells that would be acceptable, however if you wish to remove the first data cell regardless of however many cells are located in that row, you can do something like
var el = document.getElementById('BottomCell');
el.removeChild(el.parentNode.firstChild);
In jQuery I would find the parent and use the :first selector probably

Categories

Resources