I am building an editable table in jquery for fun.
Here is my table:
<table id="horiz-min" summary="Indices">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr onclick="show();" id="IDOL-FT">
<td class="editable" id="edit">Edit</td>
<td class="edit-field">454</td>
<td class="edit-field">TEXTTEXTTEXTTEXT</td>
<td class="editable">Details</td>
<td class="editable">Feeds</td>
<td class="editable">Fields</td>
</tr>
</tbody>
</table>
The first thing i would like to do is to make the ID and Descriptions editable by clicking on edit.
So in JQUERY, i am trying to do this to replace, these td's content with the content that is currently inside of them, in an editable text box.
Fixed: but what i have gives a console error of "$ is not defined"
jquery:
$('td.edit-field').replaceWith('<textbox></textbox>');
The "$ is not defined" sounds like you're not properly including jQuery in your HTML file. Make sure the following appears in the head section of your HTML file (adjust the version as appropriate)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Additionally since you're using jQuery you should avoid the use of assigning handlers directly in your HTML and instead should use jQuery hookup. For example
$(document).ready(function() {
$('#IDOL-FT').click(function() {
show();
});
});
use the contenteditable attribute
<td class="editable" id="edit" contenteditable="true">Edit</td>
$('#edit').click(function() {
$('.editable').attr("contenteditable", "true");
})
Example
Related
I'm a novice programmer with a basic grasp of JS and JQuery. I am using Fancybox to pull an HTML Table via Ajax and show it to users of our system.
HTML (within Fancybox):
<table>
<thead>
<tr>
<th class="priority-2 sortable date" style="min-width:150px">Date / Time</th>
<th class="priority-2 sortable text" style="min-width:150px">Changed By</th>
<th class="priority-1 sortable text" style="min-width:150px">Previous Value</th>
<th class="priority-1 sortable text" style="min-width:150px">New Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="priority-2">15/12/2021 11:23</td>
<td class="priority-2">John Smith</td>
<td class="priority-1">Stalled</td>
<td class="priority-1">Test</td>
</tr>
<tr>
<td class="priority-2">14/12/2021 16:58</td>
<td class="priority-2">David Jones</td>
<td class="priority-1">Live</td>
<td class="priority-1">Stalled</td>
</tr>
</tbody>
</table>
I have some Javascript that I use elsewhere to sort tables when the is clicked which works OK. I know that to get this to work on Ajax content I have to change the .click() to use .on() but with my my limited knowledge I cannot get the syntax to work correctly.
JS (in seperate .js file):
Original Code:
$('thead th.sortable').each(function(index, listItem) {
$(this).click(function(e){
e.preventDefault();
// sort column code here
});
});
My attempt at amending the code:
$('thead th.sortable').each(function(index, listItem) {
$(this).on('click', function(e) {
e.preventDefault();
// sort column code here
});
});
I have tried using $(document).(this) etc. but to no avail. The above works in the main HTML but not in the Fancybox window.
I use the following JS Code to show/hide sections which I've successfully adapted to work in the Fancybox window:
$(document).on('click', '.header-row', function(e) {
// Toggle Section code here
});
Any help with the syntax I need is appreciated. Apologies in advance for the poor coding knowledge.
I have a table within my Spring MVC web application that uses JSP to serve up the data, the table is a dynamically loaded list of jobs to be worked on, what I am trying to do is when the table row is selected change the color of the Row to red and hide all other rows in the table.
The rows are getting highlighted but when I try to hide the rows I have no success, any ideas or help is much appreciated , please she what I have tried below with table structure. Thank You
What happens when table data link is pressed is a form is opened with table data passed to form
Table:
<table class="table table-hover" id="no-more-tables" style="margin-bottom: 0px;">
<thead>
<tr>
<th>Service Id</th>
<th>Vehicle</th>
<th>Due date</th>
<th>ServiceType</th>
<th>Last update</th>
<th>Frequency</th>
<th>Start</th>
</tr>
</thead>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id2" class="">
<td data-title="Service Id">2</td>
<td data-title="Vehicle">vehicle two</td>
<td data-title="Due date">2018-02-14</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-14</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=2' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id3" class="">
<td data-title="Service Id">3</td>
<td data-title="Vehicle">VAN1</td>
<td data-title="Due date">2018-02-20</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-20</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=3' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
</tbody>
</table>
Jquery code:
$(document).ready(function() {
$(window).on('load',function(){
var service_id = $('#service_id').val();
if(service_id){
$('#serviceRow').toggle();
$('#table_row_id'+service_id).addClass('danger');
$('#table_row_id'+service_id).siblings().hide();
}
});
});
Other way I approached:
$(document).ready(function(){
$(window).on('load',function(){
$( "table tbody tr" ).siblings( ".danger" ).hide();
});
});
I have researched solutions on SO and on-line with no joy including this one:
How to hide all tr from table except clicked one
Please if you decide to down-vote my question please provide a reason as to why and we can try rectify the issue, thanks for your time, let me know if need anything else. Jason
There are a few issues with your code.
1. You are not attaching click event handler for the table row. You are writing the logic inside window onload event which won't trigger when you click on a row.
2. You do not have any element with id service_id. I assume you are trying to get the content of the cell with data-title="Service Id"
3. val() is used to get the value of input, select or textarea elements. To get content of cell, you need to use text() or .html(). See jquery documentation to understand the difference.
4. You have wrapped each row in a tbody tag. As such, calling sibling() on the row elements will return empty collection.
Here is the working plunker: https://plnkr.co/edit/O33Xnwvg3yslLkG3DeHT?p=info
I hope that somebody can help. I've got an issue whereby I've got an x-editable link on a footable which works when used on a desktop browser, but not on a mobile device. This can be replicated by simply reducing the width of the browser, as footable hides columns and gives the option to expand downwards to see the hidden columns.
I have created a JSFiddle here: fiddle
Specifically the issue is that even though the link is present in the expanded compact view, no amount of clicking will render the x-editable input for the link. Oddly when I have encountered this issue on my own server, when you go back into full width browsing there are multiple instances of the x-editable input box visible, but I can't replicate this behaviour in the fiddle.
Let me know if you need any clarification!
Thanks in advance.
This is the code:
<table class="footable table">
<thead>
<tr>
<th data-class="expand">
Col1
</th>
<th>
Col2
</th>
<th data-hide="phone,tablet">
Col3
</th>
<th data-hide="phone,tablet">
Col4
</th>
<th data-hide="all" data-ignore="true">
Id
</th>
</tr>
</thead>
<tbody>
<tr class="fooNewRecord">
<td>12345</td>
<td>done</td>
<td>23</td>
<td>20</td>
<td>1</td>
</tr>
</tbody>
</table>
And
$(function () {
$('.footable').footable();
});
$.fn.editable.defaults.mode = 'inline';
$('.myeditable').editable();
$('table').footable();
I want to add a column to a jQuery Datatable. It will be used to contain a delete button for each row, like I have for another table. The button picture and class are specific in the php file that retrieves the table data from a database.
Simply adding a column to the html as the following breaks the javascript on the page:
<th>New Column</th>
I do not see anything in the aoColumnDefs settings that does anything to the added column. What code and where do I need to add or edit to accommodate the new column?
I am not the original developer behind the existing tables.
You can add one or more th from here like Revenue2
<table class="mws-table">
<thead>
<tr>
<th>Date</th>
<th>Transaction ID</th>
<th>Segment</th>
<th>Revenue</th>
</tr>
</thead>
<tbody id="transactions">
<tr>
<td class="trDate"></td>
<td class="transactionId"></td>
<td class="segment"></td>
<td class="revenue"></td>
</tr>
</tbody>
<tfoot>
<tr class="customFooterRow">
<th>Total</th>
<th></th>
<th></th>
<th align ="left" class="revenueTotal"></th>
</tr>
</tfoot>
</table>
You might have forgotten to add the column for the body as well and in cases where you have a "tfoot" you will need to add another column to it as well.
I am have a rails app that I am writing cucumber test for. I am trying to get a number out of specific row so I can assert against it. I have a table that looks like this:
<table class="table table-striped" id="kids">
<thead>
<tr>
<th>Name</th>
<th>Balance</th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-link="/kids/2">
<td>Jason</td>
<td>
<span>$</span>
<span class="money">1.00</span>
</td>
</tr>
<tr data-link="/kids/3">
<td>Neely</td>
<td>
<span>$</span>
<span class="money">0.50</span>
</td>
</tr>
</tbody>
</table>
I need to select a td that has a specific name, and then get the balance from the span in the following td. I am sure there is a way to do this with Xpath, but I cannot figure it out. Any help would be great.
You asked for XPath so here it is:
//td[preceding-sibling::td[text()='Neely']]/span[#class='money']
Note that XPathes aren't very readable and it may be better to use Capybara's ruby methods instead:
tr = find('tr', text: 'Neely')
tr.find('.money').text