I have a table that looks like such:
<div style="float: left;">
<table id="table_id">
<thead style="background: #DAE6F0;">
<th width="96">Action</th>
<th width="110.5">Location</th>
<th width="107">SelectionType</th>
</thead>
<tbody>
#foreach (var item in Model.List)
{
<tr>
<td style="width: 49px; cursor: pointer"><a class="display" onclick=" getTeplate(#item.Id); ">Display</a></td>
<td style="width: 49px; cursor: pointer"><a class="delete" onclick=" deleteTemplate(#item.Id); ">Delete</a></td>
<td style="width: 120px; text-align: center">#Html.DisplayFor(modelItem => item.AdvertisementLocation)</td>
<td style="width: 107px; text-align: center">#Html.DisplayFor(modelItem => item.AdvertisementSelectionType)</td>
</tr>
}
</tbody>
</table>
The first column displays the word "Display" which is a link that when clicked fires a function to get the contents of a template and display it. It does this by sending the Id to the function that is associated with that row. On load I populate a list with all the ads, and then foreach ad in the list a row is added to the table.
My question is how could I access the Id that is associated with the the Display column for that row with javascript. the work flow is a user can select an ad and edit it, upon update I refresh the page for the changes to be displayed in the table, and the table loads with row 1 in focus. I would would like to be able to focus the table on the row that had just been updated.
Related
I want to add an extra row with some extra calculations to an existing table. The table doesn't have a header tag, it's just figuring out what CSS to apply by itself. I'm adding an extra header via the code found below. Right now it's adding the header twice. The (edited) code of the table looks like this:
<!--This code is in a <form> with the id="train_form", hence the usage in the jQuery code-->
<table class="vis" style="width: 100%">
<tbody>
<tr>
<th style="width: 20%">Eenheid</th>
<th style="min-width: 400px">Behoefte</th>
<th>In het dorp/Totaal</th>
<th style="width: 120px">Rekruteren</th>
<th style="width: 80px">To Do:</th>
</tr>
<tr class="row_a">
<td class="nowrap">
<a href="#" class="unit_link" data-unit="spear">
<img src="image.png" style="vertical-align: middle" alt="" class="">
Speervechter
</a>
</td>
</tr>
<!-- There are 3 more entries here, but to not be too long I've removed them. They are not really necessary-->
<tr>
<td colspan="3">
</td>
<td>
<input class="btn btn-recruit" style="float: inherit" type="submit" value="Rekruteren" tabindex="11">
</td>
<th style="width: 80px">To Do:</th>
</tr>
</tbody>
</table>
The lines <th style="width: 80px">To Do:</th> are added by my script. The problem is that it also adds it to the last <td>. I've looked at quite a few 'solutions', but they are not helping. It's still adding the code twice (see screenshot below).
The code that I'm using to add the lines:
$(function() {
var done = false;
if (!done) {
$("#train_form > .vis > tbody > tr:not(.row_a, .row_b)").one().append("<th style='width: 80px'>To Do:</th>");
done = true;
};
}).one();
As you can see I've tried using the .one() methods, and I've tried using a bool for it. Both don't work, since this code still gives the table seen in the image above.
Just to be clear, I have no control over the source, this is a script for an online browser game.
What am I doing wrong?
I think you want $.first() instead of $.one():
$("#train_form > .vis > thead > tr:not(.row_a, .row_b)")
.first()
.append("<th style='width: 80px'>To Do:</th>");
Step 1 : In table 1st table i want to copy table row the 2nd table, when click on the "copy" button after inputting the value in input text field.(value should be copied instead of input text field)
Step 2 : After click on the "copy" button the button should be change to "Undo" to remove the table row from 2nd table.
Step 3 : after deleting the row from 2nd table the button should be changed again to "copy" button with step 1 functionality in table 1.
Step 4 : the copied row in 2nd table should have "Delete" button.When click on the delete button the row should be deleted from 2nd table and the button should be changed again to"copy" button with step 1 functionality in table 1.
$(function() {
$('#myTable tbody tr').each(function(){
$(this).append('<td><button class="copy">Copy</button></td>');
});
$(document).on('click', 'button.copy', function(){
var $tr = $(this).parents('tr:first').clone();
$tr.appendTo($('#stopsTable > tbody'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="height: 700px;width: 100%;overflow: auto; float: left;">
<table id="myTable" border="1px" style="width: 24%; font-size: 10px; float :left;" >
<thead>
<tr>
<th>S No</th>
<th>Stop Name</th>
<th>Longitude</th>
<th>Latitude</th>
<th>ETA</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr >
<td >1</td>
<td>The Indian Heights School</td>
<td><input type="text" width="70"/></td>
<td>77.05249</td>
<td>06:06:12</td>
<td>Ignition_On</td>
</tr>
<tr >
<td >2</td>
<td>The Indian Heights School</td>
<td><input type="text" width="70"/></td>
<td>77.05246</td>
<td>06:06:23</td>
<td>Ignition_On</td>
</tr>
<tr >
<td >3</td>
<td>The Indian Heights School</td>
<td>28.56135</td>
<td>77.05242</td>
<td>06:06:31</td>
<td>Start</td>
</tr>
<tr >
<td >4</td>
<td>The Indian Heights School</td>
<td>28.56139</td>
<td>77.05245</td>
<td>06:06:41</td>
<td>Ignition_On</td>
</tr>
</tbody>
</table>
<table id="stopsTable" border="1px" style="width: 24%; margin-left: 10px; font-size: 10px; float :left;">
<thead>
<tr>
<th>S No</th>
<th>Stop Name</th>
<th>Longitude</th>
<th>Latitude</th>
<th>ETA</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
jsfiddle or codepen example will be very appriciated.Thanks in advance.
not exactly what you wanted but might give you the idea.
Append button 'copy' to table #myTable
copy row from table #myTable to #stopsTable and append button remove while hiding button copy.
add class .remove to button remove with remove() function. (It will remove table row when clicking the remove button.)
$(function() {
$('#myTable tbody tr').each(function() {
$(this).append('<td><button class="copy">Copy</button></td>');
});
$(document).on('click', 'button.copy', function() {
var $tr = $(this).parents('tr:first').clone();
$tr.appendTo($('#stopsTable > tbody'));
$tr.append('<td><button class="remove">Remove</button></td>');
var $td = $('#stopsTable > tbody > tr').find('td:eq(6)').hide();
});
$(document).on('click', 'button.remove', function() {
$(this).closest('tr').remove()
});
});
I have kendo grid. The first column of the grid has check boxes and header has select all check box.
Expected Behavior
Probably We have seen this behavior on several web sites. when user clicks on select all, then all the check boxes should get selected. If user unchecked select all then all the check boxes should get unselected. In addition if user select or unselect individual check box in the row then "select all" check box should also get toggled based on how many check boxes are selected.
I copied the grid as it is from rendered HTML. ( and removed some extra columns) and attached javascript functions.
Issue
There are 2 click events attached in document ready function. One for the select all check box and other for check boxes in each row.
Below is my code snippet. If you run the code then its working here exactly as i wanted. However the same code is not working on my machine.
When i debug i found, the click event for the check boxes in rows never get fired. Not sure why its working here but not my machine. I'm using IE 10
$("#assetImportDetail th input:checkbox").click(
function () {
$("#assetImportDetail td input:checkbox").prop("checked", $(this).prop("checked"));
}
);
$("#assetImportDetail tbody input:checkbox").click(
function () {
var checkedCount = $("#assetImportDetail td input:checkbox:checked").length;
var totalCount = $("#assetImportDetail td input:checkbox").length;
$("#assetImportDetail th input:checkbox").prop("checked", checkedCount === totalCount);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="k-widget k-grid" id="assetImportDetail" data-role="tooltip">
<table role="grid">
<colgroup><col style="width: 30px;"><col><col><col><col><col><col><col></colgroup>
<thead class="k-grid-header" role="rowgroup">
<tr role="row">
<th class="k-header" scope="col" data-title="Batch Detail ID" data-index="0" data-field="BatchDetailID">
<input id="selectAll" type="checkbox">
</th>
<th class="k-header" aria-sort="ascending" scope="col" data-title="State" data-index="1" data-field="BatchKey" data-dir="asc" data-role="columnsorter"><a class="k-link" href="#">State<span class="k-icon k-i-arrow-n"></span></a></th>
<th class="k-header" scope="col" data-title="Cost" data-index="2" data-field="OriginalCost" data-role="columnsorter"><a class="k-link" href="#">Cost</a></th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-uid="dd43907a-1d2d-4f7d-9426-5278ffe8a0db">
<td role="gridcell"><input name="selectedIds" type="checkbox" value="31"></td>
<td role="gridcell">TX</td>
<td role="gridcell">$19,200.00</td>
</tr>
<tr class="k-alt" role="row" data-uid="a7e6d3a4-3bff-4f26-8e37-d53485ab50f3">
<td role="gridcell"><input name="selectedIds" type="checkbox" value="32"></td>
<td role="gridcell">TX</td>
<td role="gridcell">$19,200.00</td>
</tr>
</tbody>
</table>
</div>
I think I found it. I was attaching the click event to the check boxes in the rows in document ready event. Im my case there wont be any rows in the grid when page loads. So I have to attach the click event in grid's dataBound event instead of document ready event.
I'm testing tablesorter and my table is :
Table
It contains list of products and one product has 2 rows, one row contains its name and the other is the input field for the user to make changes.
I would like to do a tablesorter to sort the products with the empty input fields to the top of the table.
Table Expected Result
It means the products which don't have text in the input fields will be displayed on top.
I'm using tablesorter jquery.
my HTML Table: Tr1 holds first 'data' line, TR2 holds the input fields;
<table class="tablesorter">
<thead>
<tr>
<th class="sorter-inputs empty-top code">Code</th>
<th class="sorter-inputs empty-top designation">Designation</th>
</tr>
</thead>
<tbody>
<tr class='tr1'>
<td>
<div class='code'> </div>
</td>
<td>
<div class='designation'>abc 111</div>
</td>
</tr>
<tr class='tr2'>
<td>
<input type="text" class='CodeInput'/>
</td>
<td>
<input type="text" class='designationInput'/>
</td>
</tr>
...
</tbody> </table>
If you are using my fork of tablesorter, you have two options.
1) Leave out the input rows and use the editable widget, which actually makes the table cell editable using contenteditable. This does require a modern browser.
2) Use the input parser & set the emptyTo option to keep empty rows at the top (demo)
NOTE: the parser-input-select.js file used in the demo is actually pointing to the master branch of the repository.
HTML
<table class="tablesorter">
<thead>
<tr>
<th class="sorter-inputs empty-top code">Code</th>
<th class="sorter-inputs empty-top designation">Designation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> </div>
<input type="text" />
</td>
<td>
<div>abc 111</div>
<input type="text" />
</td>
</tr>
...
</tbody>
</table>
* Note *: I don't think using child rows will work in this case because the sort would occur based on the parent row content. So I added a <div> to each cell with the labels.
CSS
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
.code { width: 20%; }
.designation { width: 80%; }
input { width: 90%; margin: 4px; background: #fc7565; border: solid 1px #999; }
table { border-collapse: collapsed; border-spacing: 0; }
.tablesorter-blue tbody td { padding: 0; vertical-align: bottom; }
td div { background: #ccc; padding: 4px; }
Script
$(function () {
$('table').tablesorter({
theme: 'blue'
});
});
I have a table like that:
<table id="myTable" cellspacing="0" cellpadding="10" border="0" width="100%">
<tbody>
....
<tr style="color: blue;" id="bankRecord377">
<td align="center" class="styleOdd"> <input type="checkbox" value="377" name="377"></td>
<td align="center" class="styleOdd">377</td>
<td align="center" class="styleOdd"></td>
<td align="center" class="styleOdd">391</td>
</tr>
....
<tr style="color: blue;" id="bankRecord386">
<td align="center" class="styleEven"> <input type="checkbox" value="386" name="386"></td>
<td align="center" class="styleEven">386</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">396</td>
</tr>
...
<tr style="color: blue;" id="bankRecord322">
<td align="center" class="styleEven"> <input type="checkbox" value="322" name="386"></td>
<td align="center" class="styleEven">322</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">314</td>
</tr>
...
</tbody>
</table>
class="styleOdd" makes row gray background class="styleEven" makes row background blue. I iterate over that table with Struts2 and define classes but user can remove some of table rows when he sees that HTML file. If user remove one of the table row, e.x. :
<tr style="color: blue;" id="bankRecord386">
...
</tr>
Colors of background was gray, blue, gray. However it is gray, gray now(because user removed a tr which includes classEven tds).
All in all what I want is iterate over that table again and defining classes styleOdd, styleEven, styleOdd, styleEven... again.
How can I do it with JavaScript or JQuery?
PS: I want to it for my table(which has id=myTable)'s every tds of trs.
EDIT: I want it except for the first tr(and it's tds).
You can use :even and :odd, but then you would iterate over the table rows twice. That might lead to unacceptable performance if your table has many rows.
I'd suggest using each() instead:
$("#myTable tr").each(function(index, row) {
var $cells = $("td", row);
if (index & 1) {
// Odd.
$cells.removeClass("styleEven").addClass("styleOdd");
} else {
// Even.
$cells.removeClass("styleOdd").addClass("styleEven");
}
});
You can use the :odd selector to target odd rows. (there is also a :even selector)
$('.td:odd').class('odd');
Trigger this when removing a row from the table to update classes.
There are also both CSS Selector but not widely supported.
$('#myTable tr:odd td').toggleClass('styleOdd', true).toggleClass('styleEven', false);
$('#myTable tr:even td').toggleClass('styleOdd', false).toggleClass('styleEven', true);
I believe you could also do it automatically using CSS. Although it requires a fairly modern browser.
Updated to take into account the table ID