I am using responsive jquery datatable.
Check this link
http://jsfiddle.net/82v4p7cL/1/
<div id="tblSkippedItems_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="row"><div class="col-sm-12"><table id="tblSkippedItems" class="table table-striped table-bordered nowrap dataTable no-footer dtr-inline collapsed" cellspacing="0" width="100%" role="grid" aria-describedby="tblSkippedItems_info" style="width: 100%;">
<thead>
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="tblSkippedItems" rowspan="1" colspan="1" style="width: 159px;" aria-label="Itemnumber: activate to sort column descending" aria-sort="ascending">Itemnumber</th><th class="sorting" tabindex="0" aria-controls="tblSkippedItems" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Location : activate to sort column ascending"></th></tr>
</thead>
<tbody>
<tr role="row" class="odd parent">
<td class="sorting_1" tabindex="0" style="">02-273-BU</td>
<td style="display: none;">
<select id="ddlTest" style="width: 300px">
</td>
</tr>
<tr class="child">
<td class="child" colspan="2">
<ul data-dtr-index="1">
<li data-dtr-index="2" data-dt-row="1" data-dt-column="2"><span class="dtr-title">Location <small>(Picking)</small></span> <span class="dtr-data"><span class="ClsLocName">N/A </span> <select id="ddlTest" style="width: 300px"></select></span></li>
</ul>
</td>
</tr>
</tbody>
</table></div></div>
</div>
I have dropdown column in jquery datatable.
In responsive mode, new tr is created with class "child".
And old tr is hide.
Both tr contain dropdown with same id.
When I try to add options to dropdown using jquery, no effect on dropdown.
var ddl = $('#DdlTest');
ddl.append($("<option></option>").val('0').html('Selectvalue'));
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
Try using a different id in your dropdown, you can only have 1 element with a specific id in every page, the script is working but it will append the options on the first element with that specific id.
There are several issues with your html and jquery select. first you didn't close the select tag try closing it and second ddlTest is not equal to DdlTest. you need to fix these issues then append your option.
<select id="ddlTest" style="width: 300px"></select>
JavaScript
var ddl = $('#ddlTest');
ddl.append($("<option value="0"></option>");
Related
I have a kendo Grid which is generating below code:
<div id="myGrid" class="k-grid k-widget" data-role="grid" style="display: block;">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table role="grid">
<colgroup>
<col>
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" data-field="filename" rowspan="1" data-title="Nombre" data-index="0" id="9d93448e-a9f6-42bd-8ba6-c8b31334efcc" class="k-header">Name</th>
<th id="1b52a29e-730e-471c-978f-a44cffad7d90" rowspan="1" data-index="1" class="k-header">/th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table role="grid">
<colgroup>
<col>
</colgroup>
<tbody role="rowgroup">
<tr data-uid="368518f3-0ffc-4797-b262-85346e89430e" role="row">
<td class="text-disabled-color" role="gridcell">
myFile.pdf
</td>
<td style="display:none" role="gridcell">
<a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
From the second table only, I would like to remove the two following inline class and css style from the td elements:
class="text-disabled-color"
style="display:none"
I know I can do that by using jQuery:
$("td[class='text-disabled-color']").removeAttr("class");
$("td[style='display:none']").removeAttr("style");
However this is a bit dangerous because if another td element has this same inline class and style it will get removed.
I want to remove the inline class and style from the second table within the div container myGrid. Imagine there is another table with td elements with the same inline class and style, in that case I do not want to remove them, only those within myGrid container. How can I do this?
As you always need to remove second table css & style you can use table:eq(1) this will refer to second table i.e :
$("#myGrid table:eq(1) td.text-disabled-color").removeAttr('class')
$("#myGrid table:eq(1) td[style='display:none']").removeAttr("style");
you can make use of below script where find the table inside div with class k-grid-content. Find all tds within table and remove class / attribute.
$(function(){
var $table = $('#myGrid div.k-grid-content table[role=grid]');
$table.find('td[role="gridcell"]').each(function(){
$(this).removeClass('text-disabled-color');
$(this).removeAttr('style');
});
});
.text-disabled-color {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myGrid" class="k-grid k-widget" data-role="grid" style="display: block;">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table role="grid">
<colgroup>
<col>
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" data-field="filename" rowspan="1" data-title="Nombre" data-index="0" id="9d93448e-a9f6-42bd-8ba6-c8b31334efcc" class="k-header">Name</th>
<th id="1b52a29e-730e-471c-978f-a44cffad7d90" rowspan="1" data-index="1" class="k-header"></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table role="grid">
<colgroup>
<col>
</colgroup>
<tbody role="rowgroup">
<tr data-uid="368518f3-0ffc-4797-b262-85346e89430e" role="row">
<td class="text-disabled-color" role="gridcell">Some text
myFile.pdf
</td>
<td style="display:none" role="gridcell">Some text
<a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have the access to this DOM node in temp1.$el.
And here is the content which the above variable has:
<table id="__BVID__730" aria-busy="false" aria-colcount="10" aria-rowcount="14" class="table b-table table-striped table-hover">
<thead class="thead-class-hidden">
<tr>
<th aria-colindex="1" class="">
<div style="white-space: nowrap;">
Header1 Name
</div>
</th>
<th aria-colindex="2" class="">
<div style="white-space: nowrap;">
Header2 Name
</div>
</th>
</tr>
</thead>
<tbody class="">
<tr class="">
<td aria-colindex="1" class="">
<div style="white-space: nowrap;">
Row1 Column1 Value
</div>
</td>
<td aria-colindex="2" class="">
<div style="white-space: nowrap;">
Row1 Column2 Value
</div>
</td>
</tr>
</tbody>
</table>
I'm working in plain JavaScript and what I need to get is the width of the element under:
table thead tr th (child-1)
table thead tr th (child-2)
I tried many things like:
temp1.$el.tHead.firstElementChild.children[0].offsetWidth
temp1.$el.tHead.firstElementChild.children[0].clientWidth
temp1.$el.tHead.firstElementChild.children[0].firstElementChild.offsetWidth
temp1.$el.tHead.firstElementChild.children[0].firstElementChild.clientWidth
But all of them are not working. The table thead tr th widths depends of the actual content inside of them, and I need to take the widths and later to apply them on a different table.
I managed to get them to the variable temp1.$el but from here, I'm not able to success to get the widths that I need.
You could get this done using the ParentNode property children.
The ParentNode property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called.
var element = document.getElementById('__BVID__730');
console.log(element.tHead.children[0].children[0].offsetWidth)
<table id="__BVID__730" aria-busy="false" aria-colcount="10" aria-rowcount="14" class="table b-table table-striped table-hover">
<thead class="thead-class-hidden">
<tr>
<th aria-colindex="1" class="">
<div style="white-space: nowrap;">
Header1 Name
</div>
</th>
<th aria-colindex="2" class="">
<div style="white-space: nowrap;">
Header2 Name
</div>
</th>
</tr>
</thead>
<tbody class="">
<tr class="">
<td aria-colindex="1" class="">
<div style="white-space: nowrap;">
Row1 Column1 Value
</div>
</td>
<td aria-colindex="2" class="">
<div style="white-space: nowrap;">
Row1 Column2 Value
</div>
</td>
</tr>
</tbody>
</table>
What exactly is the $el? This looks like jQuery, and not vanilla js.
Based on your code.
// Table
// Or querySelector('table') if you have only one
const table = document.getElementById("__BVID__730");
console.log(table.clientWidth);
// Thead & Tbody
const thead = table.querySelector("thead");
const tbody = table.querySelector("tbody");
console.log(thead.clientWidth);
console.log(tbody.clientWidth);
// Tr th
const theadColumns = thead.querySelectorAll("tr th");
if (theadColumns) {
console.log(theadColumns[0]);
console.log(theadColumns[1]);
// OR
theadColumns.forEach(column => console.log(column.clientWidth));
}
Here is the working demo to get width of first th (Used jQuery 1.8.3):
http://jsfiddle.net/7dg5bvou/
Also this might help you solve your problem:
first include jQuery library in head section of your HTML.
temp1.$el.find("table[id='__BVID__730']").find(".thead-class-hidden").children("tr:first-child").children("th:first-child").width();
Also you can use "eq" to find respective element like: td:eq(1)
I made many researches about that topic but not getting any success.
Issue
When i am trying to do rowspan based on custom attribute rowspanx at that time it is not working properly.
How i am making rowspan based on rowspanx?
So i am trying to find previous elements and next elements with prevAll and nextAll
if i found prevAll() > 1 than it should work but it is not working properly. it is working proper only once but not second time.
I m getting unexpected output. which is in code snippet.
My expected output like below.
EDIT
my logic is if current element td have rowspanx==1 so query should check for its all previous or next element have rowspanx == 2 if it is found true in any siblings elements than current td add rowspan = 2.
This is my logic but it is not working properly.
Need Help!
$('table.overview-table tr').each(function()
{
$($(this).find("*")).each(function(i)
{
if($(this).attr("rowspanx") == 1 && $(this).attr("rowspanx") != undefined && ($(this).prevAll().attr("rowspanx") > 1 || $(this).nextAll().attr("rowspanx") > 1)){
$(this).attr("rowspan","2");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100" border="1" class="table overview-table">
<tr style="display: table-row;">
<th scope="row" class="" rowspan="2">10:00</th>
<td class="orange white" rowspan="1" rowspanx="2" style="height: 20px;">test</td>
<td class="grey white" rowspan="1" rowspanx="2" style="height: 20px;">test</td>
<td class="orange" rowspan="1" rowspanx="1" style="height: 20px;"></td>
<td class="orange" rowspan="1" rowspanx="1" style="height: 20px;"></td>
</tr>
<tr style="display: table-row;">
<td class="orange fat" rowspan="1" rowspanx="1" style="height: 20px;"></td>
<td class="grey fat" rowspan="1" rowspanx="1" style="height: 20px;"></td>
</tr>
</table>
For the sake of simplicity the CSS classes are omitted:
<table width="100" border="1" id="table">
<tr>
<th rowspan="2">10:00</th>
<td rowspan="1" rowspanx="2">test</td>
<td rowspan="1" rowspanx="2">test</td>
<td rowspan="1" rowspanx="1"></td>
<td rowspan="1" rowspanx="1"></td>
</tr>
<tr>
<td rowspan="1" rowspanx="1"></td>
<td rowspan="1" rowspanx="1"></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#table tr td').each(function()
{
if($(this).attr("rowspanx")==1)
{
$(this).attr("rowspan","2");
}
});
</script>
Example of JSFiddle
I have a Bootstrap accordion table that shows a hidden table with content whenever someone clicks anywhere on the row. The hidden table is then a different color (#DDD). What I'm trying to achieve is have the actual row changing the color too when clicked and opened and changing back to white when it is closed.
How would I achieve that?
Here is the HTML markup I currently have:
<table class="table">
<thead>
<th class="">First</th>
<th class="">Last</th>
<th class="">Phone</th>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#001" class="accordion-toggle">
<td class="">Bill</td>
<td class="">Clinton</td>
<td class="">000-000-0000</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="001">More details about Bill Clinton here.</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#002" class="accordion-toggle">
<td class="">Abraham</td>
<td class="">Lincoln</td>
<td class="">111-111-1111</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="002">More details about Abraham Lincoln here.</div>
</td>
</tr>
</tbody>
</table>
and the CSS:
.hiddentablerow{
padding: 0px 0px !important;
background-color: #DDD;
}
And of course a fiddle: http://jsfiddle.net/kxtk6w4y/
You can use jQuery to fire an onClick for the row clicked that toggles the hidden row.
Fiddle
And here's the snippet I created for it:
$('.accordion-toggle').click(function() {
if ( $(this).attr('aria-expanded') == "true" ) {
$(this).children().css('background-color', '#FFF');
} else {
$(this).children().css('background-color', '#DDD');
}
});
I am working on an application.
The requirement is I have a table and each row is populated via ng-repeat from json data.
While clicking on each row the row has to expand and there would be an nested table and clicking on any row on nested table will expand that row and there would be another nested table.
Till now I am not even able to get the first nested table to open while clicking on row.
Ideally I prefer the each nested view to have a separate html template, but for simplicity I am trying with normal collapsible div.
Here is my code.
<div class="col col-md-12 col-sm-12 col-xs-12">
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>ID</th>
<th>Status</th>
<th>Name</th>
<th>Description</th>
<th>Size</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#endpoints" data-ng-repeat="data in datafromservice">
<td>{{data.id}}</td>
<td>{{data.status}}</td>
<td>{{data.name}}</td>
<td>{{data.description}}</td>
<td>{{data.size}}</td>
<td>{{data.level}}</td>
<!-- edit button -->
<td class="edit"><i class="glyphicon glyphicon-pencil"></i>
</td>
<!-- button button -->
<td class="delete"><i class="glyphicon glyphicon-trash"></i>
</td>
</tr>
</tbody>
<div class="collapse" id="endpoints">
<p>Hello world</p>
</div>
</table>
</div>
I must be missing something very obvious, and I am not able to figure out.