Let's say I have the following table that works with bootstrap css and knockout:
<table style="cursor:pointer;" class="table table-striped table-bordered table-hover table-condensed">
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name"></td>
</tr>
<tr data-bind="if: somecondition">
<td>test</td>
</tr>
</tbody>
</table>
Now if I set "somecondition" to return "true", I can see the result table has the zebra striping. Everything is fine. But if I change the condition to "false", obviously the row disappears from the screen, but I don't see any alternating row color at all. Anybody knows why and how I can make the alternating row color shown?
The problem is that the Knockout if binding doesn't control whether the element it's on will exist or not, just whether that element's content will exist or not. (This isn't as clear from the documentation as it might be, but it is there, mostly in the "Note: Using “if” without a container element" bit). So the if in your example will control whether the content of the tr is present, but the tr will be there regardless, giving you a tr with absolutely nothing in it, which counts as part of the :nth-child work that the Bootstrap striping does but not occupying any vertical space. (You can see this by rendering the page, then right-clicking the table and using "Inspect element" in any modern browser to look at what's actually in the DOM.)
To make the entire row exist/not exist based on the condition, wrap the row with a KO virtual element:
<!-- ko: if: somecondition -->
<tr>
<td>test</td>
</tr>
<!-- /ko -->
Example of your original code, not striping correctly: http://jsbin.com/tupusemu/1
Example using a virtual element, striping correctly: http://jsbin.com/tupusemu/2
Just simply remove tbody tag from your table it will smoothly work..
Related
I have a table like the following
the table as rowspans because for some users I need to have 2 lines (Like you see at column 'D')
I am trying to use datatables:
<table class="table table-bordered table-hover table-striped" id="myTable">
(...)
</table>
And I call this at the begining of the code:
<script>
$( document ).ready(function() {
$('#myTable').DataTable();
});
</script>
But I have this error:
TypeError: i is undefined
And the table is not like a datatable type!
Maybe it doesn't work with rowspans?
Any idea??
FWIW you can also get this error if you don't have the same number of <td></td> elements in every row. Make sure you aren't adding any rows with nav buttons or links or anything like that that may not be formatted the same way as the other rows.
jQuery DataTables plug-in doesn't support ROWSPAN attribute by default. However there is a RowsGroup plugin for jQuery DataTables that groups cells together to make them look like as if ROWSPAN attribute is used.
See this example for code and demonstration.
See jQuery DataTables – ROWSPAN in table body TBODY for more details.
For future referer.
It is because you are using Rowspan or colspan which is not supportable.
If you want to use colspan you can use it outside </tbody>.
Thanks.
This problem happens if your table is not well formed, for example you should have
<table>
<thead>
<th>
<tbody>
<tr>
<td>
And then the id of the table should not overlap with id of any thing else on the same page. Other wise you will get errors like i is udefined or c is undefined.
I'd say your table is not a data table because you have undefined data and the 'i' referred to is the internal iterator of the DataTable loop, the use of rowspans is the problem - I would redesign your table to have an entire row for each piece of data (in your example 250 would require an entire row with duplicate values for all other columns except D) - it is wholly possible to use css to hide values that are duplicated for the same visual effect, this would allow datatable filtering to still work on those rows (although you may need some hooks to reveal hidden data when these 'extra' rows are filtered).
I was facing the same issue. The main reason for the error is due to using the colspan & rowspan. Because the jQuery DataTables plug-in does not support them and hence causing the error.
TypeError: i is undefined
So, If you are using any colspan or rowspan within any <tr></tr> inside the <tbody></tbody> then make sure that each <tr></tr> having the same no of <td></td> for each row. If not, then repeat the <td style='display:none'></td> to match the same no e.g
<table border='1' cellspacing='2'>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">name</td>
<td>200</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
<tr>
<td >300</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
</tbody>
</table>
I think by following the above suggestion will help you sure.
Please bear with me if I sound a little inexperienced (I am), but I'm currently trying to add a tooltip or a popover (either one, doesn't matter) to a td using Angular2 and Bootstrap to ultimately get rid of an unnecessary column. I would like the popover or tooltip to open on hover rather than on click. I've tried installing the ng2-popover module via nodejs as was recommended on another post on here, but to no avail. Here's a simplified version of the beginning of my table:
<table class="table table-striped table-bordered table-hover">
<tbody><tr>
<th>Table Name</th>
<th> Max As Of Date </th>
<th> Row Count for Date</th>
<th> Comments </th><th>
<td> Table Data </td>
The original guy who recommended to someone else to use the ng2-popover module rather than JQuery suggested the following:
<span popover="content to be shown in the popover">
element on which this popover is applied.
</span>
However that didn't work for me when I put a td in there. Thank you in advance if you have any clue how to do this!
You can use the
angular's bootstrap: https://angular-ui.github.io/bootstrap/#/tooltip
already has tooltip feature adapted for angular.
<div class="form-group" ng-class="{'has-error' : !inputModel}">
<label>Disable tooltips conditionally:</label>
<input type="text" ng-model="inputModel" class="form-control"
placeholder="Hover over this for a tooltip until this is filled"
uib-tooltip="Enter something in this input field to disable this tooltip"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-enable="!inputModel" />
</div>
Just adding the directive like:
uib-tooltip: text to display
tooltip-placement: place or where will the text will be positioned
tooltip-trigger: what will make the text appears (can be any event)
Here an example
I would like to repeat adding table rows using a template tag with vue.js, but it doesn't work in IE11. Here is the code.
<table border="1">
<tr>
<td rowspan="2">ID</td>
<td colspan="2">Name</td>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<template v-repeat="items">
<tr>
<td rowspan="2">{{id}}</td>
<td colspan="2">{{name}}</td>
</tr>
<tr>
<td>{{height}}</td>
<td>{{weight}}</td>
</tr>
</template>
</table>
Any help?
See http://vuejs.org/guide/components.html#Using_Components and the warning at the end of that section:
The table element has restrictions on what elements can appear inside
it, so custom elements will be hoisted out and not render properly. In
those cases you can use the component directive syntax:
<tr v-component="my-component"></tr>.
I found a solution that changed the <template> tag to a <tbody> tag. However there would be multiple <tbody> tags in a table, I hope this is the best solution in this case.
Make a long story short, This is HTML restrictions in IE, if you want compatibility, you will have to change your HTML structure.
I found an issue with similar question like yours here: https://github.com/vuejs/vue/issues/2404
Vue renders the template into real html before compiling it, so the same html restrictions apply for Vue templates, no matter how you define it.
IE does not support inside elements like , ..
I have a table wich shows products. The table is created by a mysqli_fetch_array($var)
like:
<tr> <td>Product-Name</td> <td>Product-Nr</td> <td>Price</td> </tr>
and for the Details of the product, a div takes place (for xmlhttp), after the first tr, like this:
<tr> <td> <div id="det+php"> .... </td> </tr>
PROBLEM1: To make it viewer-friendly, i used tr:nth-of-type(even) to Color the <tr>, but since the div is inside a tr, the table is all white. But the Div-Part should be always white.
is there a command like "dont affect this tr" with the style?
PROBLEM2
Since i use asc/desc sorting in the table, the <tr> with the div gets sorted to the top/bottom what is very wrong, the <tr> with the div should be ALWAYS! be direct under the product <tr>, to display the details there
How can this be solved?
To show what i tried, i made a fiddle,
http://jsfiddle.net/pt2w3/33/
Im also open for ideas to solve this a complete other way
I am trying to use editInPlace JavaScript code with Python & Django on Google App Engine.
After editing the row of the table:
<table>
<tr id="editme" class="editme">
<td>Date</td>
<td>Description</td>
<td>Details</td>
</tr>
<tr id="editme" class="editme">
<td>Date</td>
<td>Description</td>
<td>Details</td>
</tr>
<tr id="editme" class="editme">
<td>Date</td>
<td>Description</td>
<td>Details</td>
</tr>
</table>
Which looks like this:
___ ___ ___
|___|___|___|
|___|___|___|
|___|___|___|
I maid that editInPlace JavaScript would save original string like "<td>Date</td><td>Description</td><td>Details</td>" by replacing it with striped string without <td> (ex. "Date Description Details") placing the string in to the <td colspan="3"><form>...</form></td> for editor to edit.
So here I prepared that the Http Response after submitting a new value would also be imitating 3 cols, I mean would have <td></td> tags (ex. "<td>ResponseDate</td><td>ResponseDescription</td><td>ResponseDetails</td>") to be placed in between <tr></tr> tags.
But the problem is such that after AJAX replacing values without refreshing hole page, gives me nasty table.
All the row in Chrome v12 is like moved a side and starts filling from the second col:
___ ___ ___
|___|___|___|___
___|___|___|___|
|___|___|___|
Please use Chrome Developer Tools to inspect the affected row after it has been edited (and displayed in the wrong way) - right-click on any cell and select "Inspect Element" in the popup menu. The DevTools window will show up, and you will be able to examine (in the Elements panel) whether the final DOM is correct. If it is, then it's a Chrome/WebKit bug.
Summary of my problem
After sometime debugging my issue i found my problem was caused by the following situation.
A class with a style content: "" being applied to a target TR prior to an ajax call which would replace the TDs with a fresh set of TDs, then, after removing that class I had the same problem as the OP; The end result was the shifting of the TDs to the right. The HTML on inspection was sound.
In detail this is what I had.
I had a TR which was my targetId container.
I had a TD with an ajax link that then returned a set of TDs to replace the old set within the targetId TR.
I am using jquery ajax and prior to the call I applied a class to the targetId TR, the class of which can be found in this answer and contains the content: "" style.
After the ajax call completes, removing that class.
This is what I ended up doing.
The ajax masking class I was using for the targetId, I replaced with a new class that just did some opacity. I kept the ajax masking class for the sender control.
Relating to the OP's problem
I downloaded and searched the "jquery-editinplace" the OP uses but could not find a content style being applied. Maybe someone with good search tools may find it. As stated in the comments above, the problem disappeared when chrome upgraded. This is my case of it remaining because of something possibly related.
I have not made a fiddle of this situation as I had trouble creating an ajax scenario. I would have liked to to prove it is a chrome bug and to submit it to Google.
Feel free to comment if something is unclear and I will update my answer accordingly.
To me, use same Id on multiple <tr> seems awkward.
It might cause some weird behavior.
Keep your unique Id per DOM.
Also I would use
<div>
Instead of tables
because with <div>, you can get more control with CSS.
HTML:
<div>
<div class="editme">
<div>Date</div>
<div>Description</div>
<div>Details</div>
</div>
<div class="editme">
<div>Date</div>
<div>Description</div>
<div>Details</div>
</div>
<div class="editme">
<div>Date</div>
<div>Description</div>
<div>Details</div>
</div>
</div>
CSS:
.editme { clear:both; }
.editme div { float:left; }
So after changing your HTML and CSS like this
you can simply replace those three divs
with a single DIV with FORM
Here is an example of DIV version