I'm trying to use: https://github.com/markcell/jquery-tabledit/blob/master/README.md, and have it set up so its sending data to the form, unfortunately it currently not including the identifier in the form post, an would be grateful for any help.
I'm using the example on the website:
HTML Code:
<table class="table table-striped table-bordered" id="example">
<caption>
Click the table cells to edit.
</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
$('#example').Tabledit({
url: 'example.php',
editButton: false,
removeButton: false,
columns: {
identifier: [0, 'id'],
editable: [[1, 'First Name'],[2, 'Last Name'],[3, 'Username', '{"1": "#mdo", "2": "#fat", "3": "#twitter"}']]
}
});
The only data in the post is the field that was edited and the action. Any help getting the identifier into the post would be most grateful. as you can tell new to this.,
I just had the same problem, but I figured it out. Are you using an older example or from another website? I recognise it from looking for in-line editors, but I can't find it again.
Anyway, you want to change
<th scope="row">2</th> to <td scope="row">2</td>
Looks like you have to keep <th> in the header (where it supposedly belongs)
Related
I've got some text displaying in a table (oldschool, I know) and I'm trying to identify that specific <td> element so I can use jQuery to wrap() <a href> tags around it and convert it to a link.
The problem is, none of the <td>'s in the table have unique classes or ID's, and there will always be an unknown amount of <td>'s before the one I want to access, so I don't think I can use nth of child.
The ONLY unique way that <td> is identifiable is the <td> DIRECTLY before it, which will contain some text that will always be the same. Can I use jQuery to find that <td> based on the text inside it, then target the <td> directly after that? Or is there a better way to do this?
You can use jQuery to fetch element that contains specific text and access the next td as required with a single line of jQuery code. This won't thrown an exception in case when there is no next td.
$(document).ready(function() {
var yourVal = $('td:contains("2.2")').next('td').text();
console.log(yourVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</tbody>
</table>
You are looking for the nextElementSibling of the <td> with unique textContent. In order to find it, loop over all the <td>s and then get the nextElementSibling of the <td> with unique textContent. And when you find it, break.
const tds = document.querySelectorAll("td")
for (let td of tds) {
if (td.innerText.includes("Larry")) {
const element = td.nextElementSibling
console.log(element.innerText)
break;
}
}
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
If you like jQuery, use this.
const td = jQuery("td:contains('Larry')").next("td").text()
console.log(td)
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
I want to create a table with datatables and DOTNET MVC. How Can I create a row above the header that contains every select tag each column so I can filter the data? it looks like the image below
<table id="orderTable" class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Customer </th>
<th>Order date</th>
<th>Phone Number</th>
<th>Dish</th>
<th>Delivery Address</th>
<th>Message</th>
</tr>
</thead>
<tbody>
#foreach (var order in Model.Orders)
{
<tr>
<td>#order.OrderId</td>
<td>#order.CustomerName</td>
<td>#order.OrderDate</td>
<td>#order.PhoneNumber</td>
<td>#order.Dish</td>
<td>#order.DeliveryAddress</td>
<td>#order.Message</td>
</tr>
}
</tbody>
</table>
I found some plugin on internet which creates png image from HTML table. But this plugin downloads file through browser. I need to save that file on some directory on the server.
This plugin I have found.
Link for plugin download
This is my html table code:
<img src='icons/png.png' alt="PNG" style="width:24px"> PNG
<table class="table table-striped table-bordered" id="countries">
<thead class="thead-dark">
<tr>
<th scope="col">Number</th>
<th scope="col">Full Name</th>
<th scope="col">Working time</th>
<th scope="col">Pause</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>07:00-17:00</td>
<td>30 min</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>07:00-17:00</td>
<td>30 min</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>07:00-17:00</td>
<td>30 min</td>
</tr>
</tbody>
</table>
This is js code:
function doExport(selector, params) {
var options = {
//ignoreRow: [1,11,12,-2],
//ignoreColumn: [0,-1],
//pdfmake: {enabled: true},
tableName: 'Table name'
};
jQuery.extend(true, options, params);
$(selector).tableExport(options);
}
This is my project: Link to download
I have worked in file "test/test.html"
You have to make a http post / put request to the server with the image as request content.
On the server a backend api server should be listening the any http request made from your domain and handle accordingly.
I am generating a html table serverside with Java and sending it as a JSON to the client. So my response is a plain text looking like this:
<table class="table"></table><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody>
My jQuery Script looks like this
if(reply.type === "highscores") {
var el = reply.value.replace(/\s+/g,' ').trim();
console.log(el);
$('.score-table').empty();
$('.score-table').html(el);
}
the console.log outputs the plain text quoted above.
Now the expected behavior is that the table will be displayed in the div with the class "score-table" but instead its just showing the following:
# Username Score 1 Marvin 3.0 2 testerich 3.0
So it basicly stripped al the html tags off the string? Im searching for hours now but did not find a solution for this.
The problem is your html response, not jQuery or js. Look at the first row of your html:
<table class="table"></table>
This doesn't make any sense. It needs to look like this:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> 1 </th>
<td>Marvin</td>
<td>3.0</td>
</tr>
<tr>
<th scope="row"> 2 </th>
<td>testerich</td>
<td>3.0</td>
</tr>
</tbody>
</table>
You have closed the Table right after you opened it..
<table class="table"></table>
update your html to this:
<table class="table"><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody></table>
I have a table that is displayed on a certain page. The column toggle works for this table since it is already loaded in the page. The table structure looks like this:
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke infotbl hidecol">
<thead>
<tr>
<th data-priority="1" class="ui-table-priority-1">Campaign</th>
<th data-priority="1" class="ui-table-priority-1">Description</th>
<th data-priority="3" class="ui-table-priority-3">Leads</th>
<th data-priority="3" class="ui-table-priority-3">Quotes</th>
<th data-priority="3" class="ui-table-priority-3">Sales</th>
<th data-priority="4" class="ui-table-priority-4">Premium</th>
<th data-priority="5" class="ui-table-priority-5">P-Factor</th>
<th data-priority="1" class="ui-table-priority-1">Lead To Quote</th>
<th data-priority="1" class="ui-table-priority-1">Sale Conversion</th>
<th data-priority="2" class="ui-table-priority-2">Total Comm</th>
<th data-priority="2" class="ui-table-priority-2">IMU</th>
<th data-priority="1" class="ui-table-priority-1">Total After IMU</th>
<th data-priority="1" class="ui-table-priority-1">VPL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="alleft">1013-HCBC-1</td>
<td class="alleft"></td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0.00</td>
<td>4</td>
<td>0%</td>
<td>0%</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td class="alleft">1013-LIFE-1</td>
<td class="alleft">medicalaidsite.co.za</td>
<td>46</td>
<td>15</td>
<td>3</td>
<td>506.00</td>
<td>4</td>
<td>33%</td>
<td>7%</td>
<td>2024.00</td>
<td>355.09</td>
<td>1420.35</td>
<td>30.88</td>
</tr>
</tbody>
</table>
The table changes depending on the date range selected. I send the data through AJAX and then there's a script that processes it and returns back a table similar to this. The problem is: the column toggle is not applied to the data (table) that the AJAX returns.
This is the AJAX/Javascript code:
$('.frankbtngo').click(function(){
var date = $('#frankdate').val();
$('#frankstats').html(fetch_data);
$.ajax({
type: 'post',
url: 'frankstatsfilter.php',
data: {
date:date
},
success:function(data){
$('#frankstats').html(data);
}
});
});
I tried to put $(".hidecol").table("refresh"); on the success part but it doesn't work. Is there any way I could re-enable/re-apply the column toggle to the table returned by AJAX?
When you load the html content onto the page the widgets aren't created. To solve this trigger the create method after you've loaded the data.
success:function(data){
$('#frankstats').html(data);
$('#frankstats').trigger('create');
}