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
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 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>");
I am currently using this SB Admin as bootstrap UI.
I search for one of my problem and I found this one SO LINK. Below are my codes. I try to use the code in my link. But its not working.
var checkedRows = [];
$('#dataTables-SalesMenu').on('check.bs.table', function (e, row) {
debugger;
checkedRows.push({ id: row.id, name: row.name });
console.log(checkedRows);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<div class="col-sm-12">
<table class="table table-striped table-bordered table-hover table-responsive nowrap dataTable no-footer" role="grid" style="width: 100%;" id="dataTables-SalesMenu" aria-describedby="dataTables-SalesMenu_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="dataTables-SalesMenu" rowspan="1" colspan="1" aria-label="Menu: activate to sort column ascending" style="width: 400px;">
Name
</th>
<th class="sorting" tabindex="0" aria-controls="dataTables-SalesMenu" rowspan="1" colspan="1" aria-label="Menu: activate to sort column ascending" style="width: 180px;">
Position
</th>
<th class="alignRight sorting_desc" tabindex="0" aria-controls="dataTables-SalesMenu" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending" style="width: 180px;">
Party
</th>
<th class="alignCenter sorting_disabled" rowspan="1" colspan="1" aria-label="Add To Tray" style="width: 90px;">
Click to Vote
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>
Name
</td>
<td class="alignRight sorting_2">
Position
</td>
<td class="alignRight sorting_2">
Party
</td>
<td class=" alignCenter">
<center>
<label>
<input type="checkbox" value="" />
</label>
</center>
</td>
</tr>
<tr role="row" class="even" style="color: white; background-color: rgb(82, 136, 75);">
</tr>
</tbody>
</table>
</div>
<button id="buttonId">Heheheheh</button>
</div>
I try to search the .bs on my project but my problem is after a while of searching my VS is being NOT RESPONDING.
I'm trying to use data-tables features after the information have been injected into the table itself upon jquery post. The HTML markup for table is:
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 70px;" aria-label="First name: activate to sort column ascending">Store Name</th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 268px;" aria-label="" aria-sort="ascending">Comment</th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width:18px;" aria-label="Last name: activate to sort column descending" aria-sort="ascending">Your Rating</th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 18px;" aria-label="Last name: activate to sort column descending" aria-sort="ascending">Seller Feedback</th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 18px;" aria-label="Last name: activate to sort column descending" aria-sort="ascending">Delete</th>
</thead>
<tbody>
#if (ViewBag.Products != null)
{
foreach (var item in ViewBag.Products)
{
<tr role="row" class="odd">
<td class="" tabindex="0">#item.SaleNumber</td>
<td class="sorting_1">#item.SaleNumber</td>
<td class="sorting_1">#item.SaleNumber</td>
<td class="sorting_1">#item.SaleNumber</td>
<td class="sorting_1 deleteAction"><i class="fa fa-close"></i></td>
</tr>
}
}
</tbody>
</table>
The table is initially empty upon the page load... This is where I inject the data into the table when the post is done like following:
var dbtb = $('<table />').append(data).find('#datatable-responsive').html();
$('#datatable-responsive').html(dbtb);
But the table is completely unresponsive, I can't use any of its features, is there any way to let it know that I injected the data into it ??
I'm playing with a little drag & drop ui, and I'm a bit stumped on the DROP.
You can see the Fiddle here.
IMMEDIATE GOAL:
I just need to find out how to get the .draggable span into either of the .droppable divs.
Presuming I'm on the right path with append(), how do I access the content of the clone?
ULTIMATE GOALS:
Ultimately, I'll need to add a way do delete items from the drop-zone divs and limit the .textfield input/div to accepting only a single drop (the .textarea input/div can accept an unlimited number of "payloads").
CODE:
/* html */
<table>
<thead>
<tr role="row">
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 494px;" aria-sort="ascending" aria-label="Company: activate to sort column descending">Company</th>
<th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 66px;" aria-label="Contact">Contact</th>
<th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 79px;" aria-label=" "> </th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class="sorting_1 has_draggable_children">
<span draggable="true" class="ui-draggable" data-companyid="0101" data-companyname="**BD">**BD</span>
</td>
<td>Contacts</td>
<td>Edit
Delete
</td>
</tr>
<tr class="even">
<td class="sorting_1 has_draggable_children">
<span draggable="true" data-companyid="0202" data-companyname="0024" class="ui-draggable">0024</span>
</td>
<td>Contacts</td>
<td>Edit
Delete
</td>
</tr>
<tr class="odd">
<td class="sorting_1 has_draggable_children">
<span draggable="true" class="ui-draggable" data-companyid="0303" data-companyname="Acme, Inc.">Acme Anvil Corp</span>
</td>
<td>Contacts</td>
<td>Edit
Delete
</td>
</tr>
</tbody>
</table>
<section class="offset7" id="dragged-drop-zone" >
<div class="look-like-input textfield droppable" contenteditable></div>
<br />
<div class="look-like-input textarea droppable" contenteditable></div>
</section>
.
/* js */
// DRAG
$('span[draggable]').draggable({
revert: true,
helper: "clone"
});
// DROP
$('.droppable').droppable({
tolerance: 'pointer',
drop: function(event, ui) {
//console.log(this);
$(this).append($(ui.helper));
}
});
Any and all help and suggestions are welcome
Alright ... got to the bottom of it.
The clone just doesn't seem to operate the way one would expect.
You end up having to use a custom function to package up your own clone into an object, and then pull it back out of your object in the drop.
You can see the working example here on jsFiddle.
Here's what ended up working:
// Drag
$('span[draggable]').draggable({
revert: true,
helper: function() {
var container = $('<div/>');
var dragged = $(this);
container.append(dragged.clone());
return container;
}
});
// Drop
$('.droppable').droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$(this).append($(ui.helper.children()));
}
});