Friends i have created a dynamic table which expends as data comes i want column Qty to be editable.
This is my code for appending data to dynamic table
the cells are appending to "customer2" table on click of tr of "customer1" table.
$('#custorder1').on('click', 'tr', function()
{
var zitemNo=$(this).find('td:first').text();
var z1Pkg=$(this).find('td:nth-child(8)').text();
for(var i=0;i< itemForSale.length;i++)
{
var obj = itemForSale[i];
var vitemNo = obj["itemNo"];
var vpkg = obj["pkg"];
var vRate = obj["regPrice"];
if(zitemNo == vitemNo && z1Pkg == vpkg)
{
var Markup = "<tr><td>"+" "+"</td><td>"+vmobileNo+"</td><td>"+ vitemNo + "</td><td>"+vpkg+"</td><td>"+vRate+"</td><td>"+ +"</td></tr>";
// $("#custorder2 tbody").append(Markup);
$("#custorder2 tr:last").after(Markup);
}
}
});
// This is code for creating table skeleton
<table class="CSSTableGenerator" id="custorder2">
<col width="100">
<col width="100">
<col width="100">
<col width="100">
<col width="100">
<col width="100">
<thead id="headOn">
<tr id="head2">
<th>
Order No.
</th>
<th>
Mobile No.
</th>
<th>
Item No.
</th>
<th>
Pkg
</th>
<th>
Rate
</th>
<th>
Qty
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
// Help me please.
Use contenteditable='true'
var Markup = "<tr><td>" + " " + "</td><td>" + vmobileNo + "</td><td>" + vitemNo +
"</td><td>" + vpkg + "</td><td>" + vRate +
"</td><td contenteditable='true'>"+ +"</td></tr>";
Related
I have a table in html.
I want that when I mouse over a cell, it pop-ups a text. The text popped-up, should depend of the text inside of the cell.
Example of an html table:
City number
Paris 1454
Madrid 1345
Roma 684
If I mouseover a City (Paris), it should pop-up the country (France).
I have seen partial solutions, (
https://www.w3schools.com/howto/howto_js_popup.asp
https://www.w3schools.com/css/css_tooltip.asp), but I don´t know how to solve the conditional part of the pop-up.
Thank you
I think that you need a hover
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
https://www.w3schools.com/tags/tag_abbr.asp
There is an easier way to have "hover-popups" in HTML. You can add a title property to set the text shown in the popup:
<td title="France">Paris</td>
You can also set this via JavaScript:
td.title = "France"
I don't know if that is what you're looking for, but if it is, it's easier that way
Supposing a DOM like that :
<table>
<thead>
<tr>
<th>City</th>
<th scope="col">Number</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Paris </th>
<td>1454</td>
</tr>
<tr>
<th scope="row">Madrid</th>
<td>1345</td>
</tr>
<tr>
<th scope="row">Roma</th>
<td>684</td>
</tr>
</tbody>
</table>
Assuming you have a JS code that show the popup on hover.
You can use the data attribute to set the country on each city cell:
<th scope="row" data-country="France">Paris</th>
And patch the JS code to use it:
const elts = document.getElementsByTagName('th');
for (let elt of elts) {
elt.addEventListener("mouseover", (evt) => {
const country = evt.target.getAttribute('data-country');
yourPopupScript(country); // this trigger your popup, and you can write the country into
});
}
Static generated Table:-
var list = [{
city: "Italy",
country: "Rome"
}, {
city: "Belgium",
country: "Brussels"
}];
var statusCol = "";
var table = '<table><tr><th>City</th><th>Country</th></tr>';
var ID = 0;
for (var i = 0; i < list.length; i++) {
var row = "<tr class='staff-row' >";
row += '<td title=' + list[i].city + '>' + list[i].city + '</td>';
row += '<td title=' + list[i].country + '>' + list[i].country + '</td>'
row += "</tr>"
ID++;
table += row;
}
table += '</table>';
$('#DisplayTable').html(table);
$('#DisplayTable').tooltip({
'show': true,
'selector': '.staff-row',
'placement': 'bottom',
'title': function(event) {
var $this = $(this);
var tds = $this.find('td');
return
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
Static Table:-
<table class="popup">
<tr onclick="myFunction(event)">
<th title="City">City</th>
<th title="Country">Country</th>
</tr>
<tr>
<td title="Delhi">Delhi</td>
<td title="India">India</td>
</tr>
<tr>
<td title="Paris">Paris</td>
<td title="France">France</td>
</tr>
</table><br /> Dynamic Table:-
<div id="DisplayTable"></div>
I am unable to send the value of javascript variale 'userResults' to .html.
I want to display the contents of the form in tabular form.
Can you tell me a workaround for this?
This is in index.html
<form onSubmit="App.retrieveTransaction();" class="form2">
<h1 class="text-center">Retrieve transactions</h1>
<div class="form-group">
<label for="enterregnoselect">Reg No:</label><input id ="enterregnoselect" class="form-control" type ="text" required/>
</div>
<button type="submit" class="btn btn-primary" >Retrieve</button>
<hr />
<table class="table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Name</th>
<th scope="col">Item</th>
<th scope="col">Credit</th>
<th scope="col">Debit</th>
<th scope="col">Price</th>
<th scope="col">Qty</th>
</tr>
</thead>
<tbody id="userResults">
</tbody>
</table>
<hr/>
</form>
This is the retrieveTransaction function in app.js called on submitting the form in index.html
retrieveTransaction: function() {
var transactionInstance;
var enteredregno = $('#enterregnoselect').val();
// var enteredregno = "0015/55";
App.contracts.Payment.deployed().then(function(instance) {
transactionInstance = instance;
return transactionInstance.transactionCount();
}).then(function(transactionCount) {
var userResults = $("#userResults");
userResults.empty();
for (var i = 1; i <= transactionCount; i++) {
transactionInstance.transactions(i).then(function(transaction) {
var date = transaction[0];
var regno = transaction[1];
var name = transaction[2];
var item = transaction[3];
var credit = transaction[4];
var debit = transaction[5];
var price = transaction[6];
var qty = transaction[7];
if(enteredregno == regno) {
var userTemplate = "<tr><th>" + date + "</th><td>" + name + "</td><td>" + item + "</td></tr>" + credit + "</th><td>" + debit + "</td><td>" + price + "</td></tr>" + qty + "</td></tr>";
userResults.append(userTemplate);
}
});
}
});
First, I want to delete all the columns and then use the select command to bring all the columns back for perform the refresh operation on the DataTable without refreshing page. So I need a piece of code that I can delete all the columns.
I shared my html and javascript code as shown following.
Can someone help me about this regard?
//CSHTML
<table id="datatables" class="table table-striped table-no-bordered table-bigboy" cellspacing="0" style="width:100%;">
<thead>
<tr>
<th class="disabled-sorting">Room Plan</th>
<th>Name</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Room Plan</th>
<th>Name</th>
<th class="text-right">Actions</th>
</tr>
</tfoot>
<tbody id="colmn">
#* *#
</tbody>
</table>
//*********************************JS*********************************//
//-------------------------SELECT ROOM START----------------------------
$.post("/Home/selectRooms", {}, function (data) {
var ndx = 0;
$.each(data.xroom_name, function (key, value) {
var Xroom_name = data.xroom_name[ndx];
var Xroom_plan = data.xroom_plan[ndx];
var column =
('<tr>' +
'<td>' +
'<div class="img-container">' +
'<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
'</div>' +
'</td>' +
'<td id="imgname">' + Xroom_name + '</td>' +
'<td class="text-right">' +
'<i class="fa fa-edit"></i>' +
'</i>' +
'</td>' +
'</tr>');
document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;
ndx++;
});
});
I also delete the column information that I clicked like this:
var table = $('#datatables').DataTable();
table.on('click', '.remove', function (e) {
$tr = $(this).closest('tr');
table.row($tr).remove().draw();
e.preventDefault();
});
I want to delete all columns because of I can refresh the table immediately after adding, updating and deleting. I do not want to delete the column that I clicked only.
I am making multiple ajax request using JQuery to populate table rows. How to sort the table column. I am using the first API to fetch all symbol's value. The second API is used to find the values of that particular symbol. These values are appended into table. I want to use sorting on columns of the table.
tablesorter() is is a function which sorts table is not working. This is working fine for a simple table.
Here is my code.
<script type="text/javascript">
// HTTPRequest
var value = [];
$.ajax({
method: "GET",
url: "https://api.binance.com/api/v1/exchangeInfo"
})
.done(function(data){
data.symbols.forEach(function(element, index) {
value[index] = element.symbol;
$(".tablefriendsname").append("<tr><td>" + element.symbol + "</td></tr>");
$.ajax({
method: "GET",
url: "https://api.binance.com/api/v1/ticker/24hr?symbol=" + data.symbols[index].symbol
})
.done(function(data2){
$(".tablefriendsname2").append("<tr><td>" + data2.priceChange + "</td></tr>");
$(".priceChangePercent").append("<tr><td>" + data2.priceChangePercent + "</td></tr>");
$(".weightedAvgPrice").append("<tr><td>" + data2.weightedAvgPrice + "</td></tr>");
$(".prevClosePrice").append("<tr><td>" + data2.prevClosePrice + "</td></tr>");
$(".lastPrice").append("<tr><td>" + data2.lastPrice + "</td></tr>");
$(".lastQty").append("<tr><td>" + data2.lastQty + "</td></tr>");
$(".bidPrice").append("<tr><td>" + data2.bidPrice + "</td></tr>");
$(".bidQty").append("<tr><td>" + data2.bidQty + "</td></tr>");
$(".askPrice").append("<tr><td>" + data2.askPrice + "</td></tr>");
$(".askQty").append("<tr><td>" + data2.askQty + "</td></tr>");
$(".openPrice").append("<tr><td>" + data2.openPrice + "</td></tr>");
$(".highPrice").append("<tr><td>" + data2.highPrice + "</td></tr>");
$(".lowPrice").append("<tr><td>" + data2.lowPrice + "</td></tr>");
$(".volume").append("<tr><td>" + data2.volume + "</td></tr>");
$(".quoteVolume").append("<tr><td>" + data2.quoteVolume + "</td></tr>");
$(".openTime").append("<tr><td>" + data2.openTime + "</td></tr>");
$(".closeTime").append("<tr><td>" + data2.closeTime + "</td></tr>");
$(".firstId").append("<tr><td>" + data2.firstId + "</td></tr>");
$(".lastId").append("<tr><td>" + data2.lastId + "</td></tr>");
$(".count").append("<tr><td>" + data2.count + "</td></tr>");
$('#myTable').trigger('update');
}) // closed Inner done
}) // CLOSE FOREACh
}); // CLOSE outer DONE
<!-- Sorting Columns -->
$(document).ready(function()
{
$("#myTable").tablesorter();
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.5/js/jquery.tablesorter.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Crypto Api Fetch</title>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th class="">symbol</th>
<th class="">priceChangePercent</th>
<th class="">weightedAvgPrice</th>
<th class="">prevClosePrice</th>
<th class="">lastPrice</th>
<th class="">lastQty</th>
<th class="">bidPrice</th>
<th class="">bidQty</th>
<th class="">askPrice</th>
<th class="">askQty</th>
<th class="">openPrice</th>
<th class="">highPrice</th>
<th class="">lowPrice</th>
<th class="">volume</th>
<th class="">quoteVolume</th>
<th class="">openTime</th>
<th class="">closeTime</th>
<th class="">firstId</th>
<th class="">lastId</th>
<th class="">count</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="tablefriendsname"></td>
<td class="tablefriendsname2"></td>
<td class="priceChangePercent"></td>
<td class="weightedAvgPrice"></td>
<td class="prevClosePrice"></td>
<td class="lastPrice"></td>
<td class="lastQty"></td>
<td class="bidPrice"></td>
<td class="bidQty"></td>
<td class="askPrice"></td>
<td class="askQty"></td>
<td class="openPrice"></td>
<td class="highPrice"></td>
<td class="lowPrice"></td>
<td class="volume"></td>
<td class="quoteVolume"></td>
<td class="openTime"></td>
<td class="closeTime"></td>
<td class="firstId"></td>
<td class="lastId"></td>
<td class="count"></td>
</tr>
</tbody>
</table>
</body>
</html>
Load jQuery first.
Don't append a row into a cell; create a row string, add each cell, then append it to the table:
.done(function(data2){
var tr = '<tr><td class="symbol">' + element.symbol + '</td>';
// array of each table column in order
['priceChangePercent', ..., 'count'].forEach(item => {
tr += '<td class="' + item + '">' + data2[item] + '</td>';
});
$('#mytable).append(tr).trigger('update');
});
I have an HTML table which is populated in my JSP view. This table always contains data of the default today date. The data is retrieved by an automatic batch that fetch data from a database. However i have to give a functionnality to be able to select data on a daterange. This is why I use a daterangepicker. I succeeded to apply to datefilter with ajax calls.
What I want to do is to now when I select a new DateRange i update my already HTML table with the default date with Data from the selected date to replace the old data with new data in my table
Here is my JSP page with the table i want to update when i Select a DATERANGE:
<div class="panel-body">
<table width="100%"class="table table-striped table-bordered table-hover" id="tableUp">
<thead>
<tr>
<th>FormName</th>
<th>Type</th>
<th>Language</th>
<th>Sent To NAS</th>
<th>Sending Date</th>
<th>FeedBack Received</th>
<th>Feedback not Received</th>
</tr>
</thead>
<tbody id='tbod'>
<tr class="odd gradeX" id="myTable">
<c:forEach var="item" items="${eblinb2b_list}">
<tr id=1>
<td><c:out value="${item.form_name}" /></td>
<td><c:out value="${item.mode}" /></td>
<td><c:out value="${item.language}" /></td>
<td><c:out value="${item.count}" /></td>
<td><c:out value="${item.sendingDate}" /></td>
<td><c:out value="" /></td>
<td><c:out value="" /></td>
</tr>
</c:forEach>
</tr>
</tbody>
</table>
</div>
For the purpose of understanding a put here a new table in the lower part of my JSP view so that you understand:
<!-- DateRange PICKER -->
<div class="panel-body">
<table width="100%" class="class2" id="mainTable">
<thead>
<tr>
<th>FormName</th>
<th>Type</th>
<th>Language</th>
<th>Sent To NAS</th>
<th>Sending Date</th>
<th>FeedBack Received</th>
<th>Feedback not Received</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX" id="myTable1"></tr>
</tbody>
</table>
<input type="text" name="datepickerinput" id="datepicker" value="" />
</div>
<!-- /.panel-body -->
<button onclick="filterByDate()" id="button">Apply filter</button>
Here is my JavaScript function part that populate my second table for illustrating
**//Function for populating second table with Ajax JSON response**
var table = $("#mainTable tbody");
$.each(data, function(idx, elem) {
var time = new Date(elem.sendingDate);
var parsedTime = time.getDate() + "/" + (time.getMonth() + 1) + "/"
+ time.getFullYear();
table.append("<tr><td>" + elem.form_name + "</td><td>"
+ elem.mode + "</td><td>" + elem.language
+ "</td><td>" + elem.count + "</td><td>"
+ parsedTime + "</td></tr>");
I finally succeeded to manage the problem this is my final function that updates the table by putting the data and replacing the old one:
function prepareTable(data) {
//Function for populating table with Ajax JSON response
var table = $("#tableUp #tbody1");
var html = "";
$.each(data, function(idx, elem) {
var time = new Date(elem.sendingDate);
var parsedTime = time.getDate() + "/"
+ (time.getMonth() + 1) + "/"
+ time.getFullYear();
html += "<tr><td>" + elem.form_name + "</td><td>"
+ elem.mode + "</td><td>" + elem.language
+ "</td><td>" + elem.count + "</td><td>"
+ parsedTime + "</td><td></td><td></td></tr>";
});
table.html(html);
}
The prepareTable() function is triggered (called) when the Ajax call succeeded:
function filterByDate() {
var startDate = document.getElementById("datepicker").value
.substring(0, 10);
var endDate = document.getElementById("datepicker").value
.substring(13, 23);
$.ajax({
url : '/gms/eblinb2b/filterOnDate',
data : {
"startDate" : startDate,
"endDate" : endDate
}, //here you send the daterange over an Ajax request and by default it's sended with a GET method
success : function(data) {
//here you will see displaying the callback result coming from your spring controller
console.log(data);
//Here we populate the HTML table with the new data based on the new daterange filter applied and replace the old data in my table
prepareTable(data);
},
error : function(xhr, ajaxOptions, thrownError) {
if (xhr.status == 404) {
alert(thrownError);
}
}
});
}