How to sort multiple tables with jQuery - javascript

I want to sort all values but jquery sorts only three values
I want multiple table sort on tag h2 but when i sort it only sort first 3 values but i want all values
$('#alphBnt').on('click', function() {
var sorting = $(".box").sort(function(a, b) {
return $(a).find("h2").text() > $(b).find("h2").text();
});
$("#container").html(sorting)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<table border=2px class="box">
<tr>
<td class="name">
<h1>mui</h1>
</td>
<td class="number">
<h2>4512</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>oinecellars</h1>
</td>
<td class="number">
<h2>566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>34566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>1</h2>
</td>
</tr>
</table>
</div>


You need to use - :
$('#alphBnt').on('click', function() {
var sorting = $(".box").sort((a, b) => $(a).find("h2").text() - $(b).find("h2").text()).appendTo("#container")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<table border=2px class="box">
<tr>
<td class="name">
<h1>mui</h1>
</td>
<td class="number">
<h2>4512</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>oinecellars</h1>
</td>
<td class="number">
<h2>566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>34566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>1</h2>
</td>
</tr>
</table>
</div>

Related

Can you generate a CSV file from a HTML Table, and simultaneously upload that CSV file to an input type = "file" field. Without prompting a download

Basically i have an interactive table below setup on my website which i would like to be able to generate a CSV file from the table on a button click, and have simultaneously upload that CSV file to an input type = "file" field. Without prompting a download on the browser.
<table>
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Title</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
</tbody>
</table>

Table Header Scroll using JS

Hi I am working on handling two tables one with table has table head and another table has table body.Need help in fixed table head and two table content with proper alignment.while fixing the header i could not align the table content subsequently to it. With help of id i fix the table header.can anyone fix this alignment.Thanks in advance.
<table id="table-1" class="table table-hover">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<body>
<div class="content">
<table class="table table-striped">
<tbody>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
Here is the Demo

You want to show a fixed thead (clone table) on top of a scrolling table (original table).
Check this working demo: CODEPEN demo
Is this what you are looking for? How it works:
HTML part:
<!-- a CONTAINER for everything -->
<div id="table-holder">
<!-- a fixed TOP that is visible or hidden on scroll -->
<div id="table-top">
<!-- a TABLE CLONE that contains the THEAD -->
<table id="table-clone" border="1"></table>
</div>
<!-- a CONTAINER that allows the original table to scroll -->
<div id="table-scroll">
<!-- the ORIGINAL TABLE -->
<table id="table-original" border="1">
<!-- the THEAD -->
<thead>....</thead>
<!-- the TBODY -->
<tbody>....</tbody>
</table>
</div><!-- endof: #table-scroll -->
</div><!-- endof: #table-holder -->
CSS part:
#table-holder {
position:relative;
}
#table-top {
width:100%; /* important */
position:absolute; /* important -> always at top */
display:none; /* hidden at first */
}
#table-scroll {
float:left;
width:100%;
height:100%;
overflow-y:scroll; /* important */
}
table {
width:100%;
}
JS part (jQuery):
// set main table html vars
var $table_top = $("#table-top");
var $table_scroll = $("#table-scroll");
var $table_clone = $("#table-clone");
var $thead_original = $("#table-original thead");
var $thead_clone = $thead_original.clone();
// copy the original THEAD into table-top
$table_clone.append($thead_clone);
// adjust table-top width (consider the width of the Y scrollbar)
$table_top.css("width", $thead_original.width())
// set vars needed to show/hide table-top
var thead_height = $thead_original.height();
//// set the threshold for the show/hide action
var visible_top = $table_scroll.offset().top;
var table_top_visible = 0;
// set onScroll action: show/hide table-top
$table_scroll.on("scroll",function(){
// the the current offset of the original THEAD
var thead_top = $thead_original.offset().top;
//// get the position of the bottom of the THEAD
var thead_bottom = thead_top + thead_height;
// check if the original THEAD is hidden
if (thead_bottom < visible_top) {
// if the original is hidden -> show the clone
if (!table_top_visible) {
table_top_visible = 1;
$table_top.fadeIn();
}
} else {
// else, the original is visible -> hide the clone
if (table_top_visible) {
table_top_visible = 0;
$table_top.fadeOut();
}
}
});

Input field to the next line with CSS or JavaScript without altering the HTML

I'm working on a Survey and on the system that I work I don't have access to change the HTML directly but I can add CSS or JavaScript to the existing code.
I have the following HTML and I would like the input field to be right underneath the first name. I can only use the ID's as the classes are the same in many other fields that I don't want changing them. I'm a bit stack so if anyone has an idea I would really appreciate..Thanks!
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>

Please check if this helps you to achieve the desired style
td.pd_label ~ td {
float: left;
position: absolute;
left: 7px;
margin-top: 1em;
}
The same selector (td.pd_label ~ td) works in JavaScript also.

You can use the + selector
#pnlPersonalDetails2 + .surveyquestions td {
display:block;
}
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
<div id="someId"></div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>

Move table columns from one row into another

I am working with software that automatically generates a form after you select your options, so the code is automatically generated and I cannot directly edit it. The code it outputs for this form is in tables. I would like the Amount, the radio buttons and their labels to all appear in one line however?
Because I cannot edit the code directly, is there a way to do this w js? Possibly moving all of the columns into one row?
Here is the link to a jsfiddle to the basic code it outputs: https://jsfiddle.net/jelane20/Lt36fq6f/1/
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00" >
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
Thank you so much for your help!

You may add to your css the following rule:
#options tr {
display: inline-table;
}
If you want to achieve the same result with jQuery you can write:
$('#options tr').css('display', 'inline-table');
Instead, if you need to move the sub table content to the upper table you can:
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
The snippet (css solution):
#options tr {
display: inline-table;
}
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight" >
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
The snippet (jQuery solution):
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>

Convert existing input and table to Kendo Textbox and Kendo Grid

I have a login form and I would like to kendofy it i.e. basically convert it into a responsive form like this: http://demos.telerik.com/kendo-ui/validator/index
Is there a quick way that would allow me to convert my existing username and password fields to kendo textbox fields such that I am able to achieve the responsive design without actually creating the fields again myself? Looking forward to your suggestions.
My Form:
<form action="https://../Portal" method="post" name="loginForm">
<input name="act" value="portalLogin" type="hidden">
<input name="c" value="12912" type="hidden">
<input name="p" value="101074" type="hidden">
<input name="d" value="101076" type="hidden">
<input name="g" value="101097" type="hidden">
<input name="objDefId" value="13439" type="hidden">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div id="rbi_S_101098" name="Notification Message">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="k-content" id="rbi_S_101100" name="User Login">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<table>
<tbody>
<tr>
<td nowrap="" align="right"><strong>Login Name </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="loginName" maxlength="50" size="40" type="text">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td nowrap="" align="right"><strong>Password </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="password" maxlength="50" size="40" type="password">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignmant="right" nowrap="">
<strong><input class="btn btn-small" value=" Login " type="submit"></strong> </td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignment="right" nowrap="">
Forgot your password? </td>
</tr>
</tbody>
</table>
</td>
<script>
document.loginForm.loginName.focus();
</script>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div id="rbi_S_114558" name="Scripts Section">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="detailHTMLCol" colspan="2">
</td>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Cheers.

Categories

Resources