I'm trying to remove from 2 buttons events a class.
What I want to achieve is that when I press the button the class 'success' will be removed.
I tried to do so in the next 2 buttons:
// Button handlers
$('#study_acrf').click(function() {
_this.start();
$('#soa_table').removeClass('success'); //success
});
$('#export_acrf').click(function() {
$('#table_data').val($("<div />")
.append($("#soa_table").clone()).html());
$('#preview_form').submit();
window.open('/study_versions/' + studyVersionId + '/export?study_version[export_type]=acrf');
});
In this what happening is that on button pressing I'm showing a view where there is a table. This table is cloned from another view where you can select one column and that is the class 'success'. This class makes the cell header of the columns green and I want to rid off it when the table is in the new view. I tried various stuff but I have no idea how to solve this issue. In the screenshot shared you can see the table with those greens which I don't want to see anymore.
The HTML of the table where this happening:
<table id="soa_table" class="table table-striped table-bordered table-condensed soa-table">
<thead>
<tr>
<th>SoA</th>
<th id="6" class="soa-column text-center">V1</th>
<th id="102" class="soa-column text-center success">V2</th>
<th id="103" class="soa-column text-center">V3</th>
<th id="104" class="soa-column text-center">V4</th>
<th id="105" class="soa-column text-center">V5</th>
<th id="106" class="soa-column text-center">V6</th>
<th id="107" class="soa-column text-center">V7</th>
<th id="108" class="soa-column text-center">V8</th>
<th id="109" class="soa-column text-center">V9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="soa-row" id="2">Demographics (Pilot)</td>
<td class="soa-element text-center" form_id="2" visit_id="6" id="18">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="2" visit_id="102" id="0"> </td>
<td class="soa-element text-center" form_id="2" visit_id="103" id="21">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="2" visit_id="104" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="105" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="106" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="107" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="108" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="109" id="0"> </td>
</tr>
<tr>
<td class="soa-row success" id="6">Education (Pilot)</td>
<td class="soa-element" form_id="6" visit_id="6" id="0"> </td>
<td class="soa-element text-center" form_id="6" visit_id="102" id="25">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="6" visit_id="103" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="104" id="0"> </td>
<td class="soa-element text-center" form_id="6" visit_id="105" id="24">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="6" visit_id="106" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="107" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="108" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="109" id="0"> </td>
</tr>
</tbody>
I fixed my own issues just adding more selection to the tag like this:
$('#soa_table thead tr th, #soa_table tbody tr td').removeClass('success');
Related
Getting cell value using JQuery.
I have tried using the below code:
$("#table tr").each(function(){
var result = $(this).find("td:first").html();
alert(result);
});
But it returns string of all the first rows
<table class="table table-bordered">
<thead>
<tr>
<td style="white-space: nowrap" class="form-label">
<span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
</td>
</tr>
</thead>
<tbody>
I expect the values "jun 17", "Jul 17".... in that order, but the actual output is a string of the rows.
Get the values with text - and use .table not #table:
$(".table td").each(function() {
var result = $(this).text().trim();
if (result) console.log(result);
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td style="white-space: nowrap" class="form-label">
<span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
</td>
</tr>
</thead>
<tbody>
If you want to collect all the rows, use an array:
var rows = [...$(".table td")].map(e => $(e).text().trim()).filter(e => e);
console.log(rows);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td style="white-space: nowrap" class="form-label">
<span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
</td>
</tr>
</thead>
<tbody>
You can use $(".table td") as selector to loop thru the tds and use text() instead of html() to get the texts
$(".table td").each(function() {
console.log($(this).text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td style="white-space: nowrap" class="form-label">
<span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
</td>
</tr>
</thead>
<tbody>
You should add id to the table in order to call it #table.Also you can get the span text with text() function.
$(document).ready(function(){
$("table tr").each(function(){
var result = $(this).find('span').text();
//there are span elements that are empty, so i skip these ones
if(result != ''){
alert(result);
}
});
});
I am trying to only select a specific set of links in a table. I figure that the best way to do it is by selecting them by the title attribute that contains all contain the word 'ULD'.
Here is my code the allowed me to narrow it down to all links in a table but no further. I tried querySelectorAll() and selectElementsbyTitle but had no luck. Also keep in mind this needs to work in IE11 and no JQuery.
var tabl = document.getElementById("Func15543_tblMissedBagReport");var anchors = tabl.getElementsByTagName("a");
Here are the links I want to select out of the following table:
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
Here is a sample of the table:
Missed Bag Report
<img src="../Content/images/icons/excel.gif" border="0" alt="Click to export to excel." title="Click to export to excel." height="13" width="13">
</a>
</SPAN>
<SPAN CLASS="CaptionRight">
<SPAN ID="Func15543_PagingControlOne"></SPAN>
</SPAN>
</CAPTION>
<THEAD>
<TR>
<TH ROWSPAN="2">#</TH>
<TH COLSPAN="5">Destination</TH>
<TH ROWSPAN="2">Load<BR>Create<BR>Sort</TH>
<TH ROWSPAN="2">Bag Close Time</TH>
<TH ROWSPAN="2">Age > 90 min (Red)</TH>
<TH ROWSPAN="2">Bag Tag #</TH>
<TH ROWSPAN="2">Pkgs<BR>in<BR>Bag</TH>
</TR>
<TR>
<TH>Cntry<BR>Code</TH>
<TH>SLIC</TH>
<TH>Sort</TH>
<TH>Serv Lvl</TH>
<TH>Location</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD CLASS="CenterText ">1</TD>
<TD CLASS="CenterText ">US</TD>
<TD CLASS="CenterText ">4009 </TD>
<TD CLASS="CenterText ">D</TD>
<TD CLASS="CenterText ">2DA</TD>
<TD CLASS="CenterText ">GRADE LANE HUB </TD>
<TD CLASS="CenterText ">T</TD>
<TD CLASS="CenterText ">
12/14/18 4:12 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5 ">
56 Mins. Old
</TD>
<TD CLASS="CenterText ">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
</TD>
<TD class="CenterText "> 6</TD>
</TR>
<TR>
<TD CLASS="CenterText G_CLR_6">2</TD>
<TD CLASS="CenterText G_CLR_6">US</TD>
<TD CLASS="CenterText G_CLR_6">0759 </TD>
<TD CLASS="CenterText G_CLR_6">N</TD>
<TD CLASS="CenterText G_CLR_6">GRD</TD>
<TD CLASS="CenterText G_CLR_6">SADDLEBROOK </TD>
<TD CLASS="CenterText G_CLR_6">T</TD>
<TD CLASS="CenterText G_CLR_6">
12/14/18 4:15 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5">
53 Mins. Old
</TD>
<TD CLASS="CenterText G_CLR_6">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SEL3I0 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="8922482455613715109"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SEL3I0
</A>
</TD>
<TD class="CenterText G_CLR_6"> 6</TD>
</TR>
You can use querySelectorAll with an attribute selector [attr] and a contains flag *=:
var table = document.querySelector('table');
var links = table.querySelectorAll('a[title*="ULD"]');
console.log(links);
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
I've got a Bootstrap table with dynamically loaded data that I have to filter via a dropdown and multiple inputs.
I've got the inputs working, but I can't seem to figure out how to make the dropdown play nice with the inputs.
When I remove the inputs, I can't seem to get the dropdown to filter.
I'm honestly not quite sure what I'm doing wrong, but I've spent so many hours on this and I'm not sure what else to do.
Below is my code:
<main role="main" class="container">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<label class="table-label mb-3 w-100">
<select id="associationSelect" class="styled-select slate float-right mb-4 table-filter search-key select-table-filter" data-table="order-table" data-column="5">
<option selected="selected" value="">Search by local board</option>
<option value="">All Boards</option>
<option>Realtor Association Name</option>
<option>Business Association</option>
<option>Company Assn</option>
<option>Company Association</option>
</select>
</label>
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="search" id="firstNameInput" placeholder="First name" title="Type in a first name" data-column="0" data-table="order-table">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="officeNameInput" placeholder="Office name" title="Type in an office name" data-column="2" data-table="order-table">
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="cityTownInput" placeholder="City/Town" title="Type in a city/town name" data-column="3" data-table="order-table">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="lastNameInput" placeholder="Last name" title="Type in a last name" data-column="1" data-table="membersTable">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-12">
<table id="membersTable" class="table table-striped table-responsive-sm order-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Business Name</th>
<th scope="col">Address/City</th>
<th scope="col">Phone</th>
<th scope="col">Email</th>
<th class="d-none" scope="col">Association</th>
<th scope="col">Web</th>
</tr>
</thead>
<tbody>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">test</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">testington</td>
<td data-input="business-name">business company</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">business association</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Mister</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Testington</td>
<td data-input="business-name">company name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">Company Assn</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr id="noResult" class="">
<td> </td>
<td> </td>
<td colspan="" class="text-center">No Results Found</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main><!-- /.container -->
Below is my JS:
jQuery(document).ready(function(){
$(".search-key").on('change input', function() {
var emptyFields = $('.search-key').filter(function() {
return $.trim(this.value) === "";
});
if (emptyFields.length == $(".search-key").length) {
$('table tbody tr').each(function() {
$(this).show();
});
$('#noResult').hide();
} else {
var columnNumber = $(this).data('column');
var enteredValue = $(this).val();
//var enteredValue = $(this).val();
$('table tbody tr:visible').each(function() {
var str = $(this).find('td:eq(' + parseInt(columnNumber) + ')').text();
var search = str.toLowerCase().indexOf(enteredValue.toLowerCase());
if (str.toLowerCase().indexOf(enteredValue.toLowerCase()) == -1) {
$(this).hide();
$('#noResult').show();
} else {
$(this).show();
$('#noResult').hide();
}
});
}//else
});
});
As I said, the inputs work nicely, but I can't figure out how to get the dropdown to work with them. I've tried passing the value to a string and using indexOf to search it, but that doesn't work.
Any help is super appreciated.
Here is a fiddle I created for this:
https://jsfiddle.net/VicePresidentOfAwesome/tcbLqgxp/7/
Anyone with some concept of how I can get this working?
The problem is in this line
$('table tbody tr:visible').each(function() {
// logics here is correct
});
This is how it should work:
For all changed inputs, you need to go through each table row again (no matter it's visible or hidden from the previous search)
Try the following selector
// remove `:visible` selector
$('table tbody tr').each(function() {
// logics here is correct
});
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 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>