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>
Related
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>
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>
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.
I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.
Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}
I have a table with checkboxes that have a class of .toggle-extract and when clicked I'd like them to toggle the closest DIV with the class name .extract-years
Now the code I have should work, but it is driving me nuts trying to figure out why it won't trigger.
here is the JSFiddle example.
$(document).ready(function() {
$('.toggle-extract').on('click', function () {
$(this).closest('div').find('.extract-years').toggle("fast");
});
});
and here is the HTML
<table>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
</table>
You could change to
$(this).closest('tr').find('.extract-years').toggle("fast");
$(document).ready(function() {
$('.toggle-extract').on('click', function() {
$(this).closest('tr').find('.extract-years').toggle("fast");
});
});
body {
color: #000;
}
.extract-years {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
</table>
Fiddle
Update: for the second version mentioned as comment, the select statement can be changed to e.g.
$(this).closest('table').parent("td").next("td").
find('.extract-years').toggle("fast");
Adjusted Fiddle, and working version here:
$(document).ready(function() {
$('.toggle-extract').on('click', function() {
$(this).closest('table').parent("td").next("td").find('.extract-years').toggle("fast");
});
});
body {
color: #000;
}
.extract-years {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>
<table class="inline-table-body">
<tbody>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
<tr>
<td>
<table class="inline-table-body">
<tbody>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
</table>