Can we use Jquery JQgrid with div element instead of table
No, you can't replace <table> to <div>.
The problem is that the code of jqGrid really work with the content of the grid as with the table. The DOM representation of <tr> element has cells and rowIndex properties (see here for example), the <table> has rows property (see here) which supports namedItem method (see here) and so on. The usage of methods which are specific for <table> improves performance of jqGrid code.
In any way the code of jqGrid really uses that main element of jqGrid is <table> and not <div>. So the code of jqGrid contains the following lines (see the source code)
if(this.tagName.toUpperCase()!='TABLE') {
alert("Element is not a table");
return;
}
In other words if you would use come other element (like <div>) instead of <table> you would get error message with the text "Element is not a table" instead of displaying the grid.
I think that jqgrid plugin has been created to design tables via jquery, so it will be a bit strange using it to design div instead of tables
Related
I am using gopherjs to accompish this task.
I only need to change data in one cell. But I have severally similar templates.
I can add data to any element by id. But in this case, I am wondering if I am doing something wrong.
Right now I am just getting the element by id directly, but I am wondering if I need to be more specific about the row, table and div.
I have the following table:
<div class="container">
<h2>Search results</h2>
<table class="table">
<thead>
<tr>
<th>Results</th>
</tr>
</thead>
<tbody>
<tr>
<td align="result" id="expirydata">John</td>
</tr>
</tbody>
</table>
</div>
I only need to change the epirydata cell. Do I need to give the row an id? Do I also need a table Id?
Disclaimer: I have never worked with gopherjs.
IDs in HTML are supposed to be unique within a web page. the function getElementById depends on it. If you need to programmatically modify always the same cell based on the same template occurring in multiple places within a page, here are your options:
have parametrized/configurable ID. Pass it into your template and getElementById accordingly. Upside: easy to implement. Downside: hard to maintain due to leaky abstraction and having to manage all the IDs outside the templates.
have a template builder method, which will accept a content as a function parameter and will output the template with already replaced content. Upside: implementation details encapsulated. Downside: with larger templates you degrade performance and might have to introduce caching of parameters if there will be multiple placeholders to fill into.
parametrize the template by putting ID into the top-level element in your template, e.g. table or a div. Don't use ID in the nested elements, rather use class to navigate within the ID element using the querySelector function. This gives you flexibility, maintainability and reusability.
I assume you use .innerHTML = 'content' approach. Beware of the XSS attacks.
Modern frameworks like react or angular go the 2) way and handle/offer the performance the optimizations as well as the security aspect out of the box. There might be other frameworks/view libraries which might be slimmer and/or work in coordination with gopherjs. Try to look for these.
const table = document.querySelector("table");
table.rows[1].cells[0].textContent = "changed_text";
//First find table by tagname or class name.
//then travel into table by its rows and cells number
I am using an ASP.NET MVC helper method to create a webgrid. I want to dynamically set the colors of a table row but I have no access to the td tag to change its properties or add an id.
So what I am trying to do from the backend is inject a script in the td's body to conditionally change its color. I have tried:
<script>$(this).css("background-color", "red !important");</script>
and this did not work. If this didn't work then I am not sure what else I can do as this seemed like the most direct approach; although I am a novice with javascript so I am looking for some help on this.
I have found other topic questions similar to what I am asking but the responses seems to mostly use contains, onclick, or make use of an id tag.
Basically if this was pure markup, and you had a table,
<table>
<tr>
<td>
how to insert a script here to change this current elements color
without know its id?
</td>
</tr>
</table>
You can use
<script type="text/javascript">
var allTD = document.getElementsByTagName("td");
</script>
Wich will return a collection of all the td elements in your HTML file.
Then, all you have to do is to iterate over the collection and change the style of the elements.
More info at Mozilla Developer Network.
I have few DataTables in hidden <div>s. This tables are works and sortable. When I insert this tables in other places of my page using .html() jQuery method (so I am dynamically copying HTML of each table to the other place) this tables becomes unsortable.
How can I force them to be sortable again?
Your initialization with .DataTable() has to be attached to something that is already on the page after the initial loading of the DOM elements.
Try $("body").find(".yourTable").DataTable() for initializing.
(If you have a more specific static container that contains all you DataTables at any point in time, replace body with that one for better performance.)
Don't use an ID if you end up having multiple elements with the same ID on the page, use a class instead. Otherwise the jQuery selector might only pick up the first occurrence.
Try with this:
var table = $('#yourTable');
table.clone().appendTo('#newParent');
table.remove();
The .clone() method, should clone all JS events with it.
(Be carefull, I removed the original table because you would have duplicated IDs, if its not the desired result you might need to change IDs with some JS)
.clone()
I have an empty table in my code like so:
<table id='rostertable'></table>
When I add a <tr> using jQuery's append function, then according to my chrome inspector, my table looks like this:
<table id='rostertable'><tbody><tr>...</tr></tbody></table>
It seems like the tbody got added by itself, and this causes problems later when I'm traversing the DOM.
For consistency's sake, I figured it would be better if I added the tbody myself and appended directly to it. Is this possible? I tried making my placeholder <table id='rostertable'><tbody></tbody></table> but the jQuery selector $('#rostertable tbody') returns null and my chrome inspector doesn't show the tbody tags either.
Edit: Never mind, it ended up being an unrelated bug in my javascript. At one point I was clearing out the contents of the table and running $("#rostertable").html(""), which of course deleted the tbody. I accepted the first valid answer to this question.
You should not get null, if no element matches the selector still you will get object containing zero elements.
Your selector is returning tbody and you might be using some wrong method.
Live Demo
alert($('#rostertable tbody').html());
To append to the tbdoy your code should work as long as you append valid html.
The below works ok:
$('#rostertable tbody').append('<tr><td>new row - cell 1</td><td>new row - cell 2</td></tr>');
DEMO
You need to make sure you append a <td> as well as the <tr>. For example in Chrome, the following will simple add an empty <tr>
$('#rostertable tbody').append('<tr>no cells added, just row</tr>');
I use jQuery to get values of presaved elements from some websites, using paths like this:
HTML BODY #bodyContainer #mainContentContainer #mainContent #productContentRight #swatchContent #colorSwatchContent SPAN
The problem i faced when the websites page contains tables and there are same element in another similar path such as:
/html/body/div/center/div/div[3]/div/table/tbody/tr[5]/td/div/table/tbody/tr/td/table/tbody/tr/td/table/tbody/tr[3]/td
In the last path as you can see that there are 5 tr which means that its possible to find the same element in another path.
I use the path as a selector for jQuery and jQuery will return array of elements, i don't know which one is the right element.
So my question is:
How to save the path for better later use? and how to parse this new path to be ready as a jQuery selector.
If the question is not clear please ask me and i will do my best to explain more.
I don't know why there are so many answers that you are using XPath because XPath was deprecated a long time ago and jQuery no longer supports it without the XPath compatibility plugin.
See Release Notes of 1.2 : http://www.learningjquery.com/2007/09/upgrading-to-jquery-12
XPath compatibility plugin : http://docs.jquery.com/Release:jQuery_1.2#XPath_Compatibility_Plugin
Just use $("#colorSwatchContent span") as your selector. Which is a css style seclector meaning find me all descendent span elements of an element with id colorSwatchContent. Since id's in html are unique identitfiers, this is about as specific as you can get.
$("#colorSwatchContent > span") will only select DIRECT descendents (immedieate children)
$("#colorSwatchContent > span:first") will select the first span direct descendent
In order to grab one specific element when there are many that match you should give the elements classes, for example give each table a class describing what is in it, then give each tr a class describing what the row is about. Then each td with a class describing the specific part of the row that it describes, for example:
<table class="person">
<tr class="john-doe">
<td class="name">John Doe</td>
<td class="phone-numbers">
<table class="phone-numbers">
<tr class="cell-phone">
<th class="label">Cell Phone:</th>
<td class="number">555-1234</td>
</tr>
<tr class="home-phone">
<th class="label">Home Phone:</th>
<td class="number">555-1234</td>
</tr>
</table>
</td>
</tr>
</table>
Once you have your elements properly described then you can use CSS style selectors in jQuery. for example getting just the td that has the home phone would be as simple as doing:
$('table.person tr.home-phone td.number');
Hope this gets you heading the right way.
One thing to note tho, If you have incredibly complex table structures you might want to rethink whether it needs to be in a table or not.
tr[5] doesn't mean there are 5 trs (there could be 10!), it means that it is selecting the 5th one.
It looks to me like you are using an XPath selector to get your elements... which jQuery supports.
if you have control of the HTML, the easiest way to select a specific element is to give it an id... which in your first example,
HTML BODY #bodyContainer #mainContentContainer #mainContent #productContentRight #swatchContent #colorSwatchContent SPAN
is equivilant to
#colorSwatchContent SPAN
Since jQuery supports xpath you could use firebug to get the specific xpath, and then use that in jQuery.
Just browse the source in firebug, right click any element, and then choose copy xpath.