As a default, the checkbox is already checked but the tables are not hidden. As a default, the first two table shall be demonstrated. When you click on a few times, you can see hidden tables but they should be hidden as default checked. The problem is when I copy paste in https://codepen.io/ which is working because js directly calling the function. When you copy paste this code inside a html file, it is not working. How can I call function to get the result?
<html>
<head>
<script language="JavaScript">
function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis = 0;
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis = 1;
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
if (vis === 1) {
e.style.display = 'none';
} else {
e.style.display = 'table';
}
}
}
show('box');
</script>
</head>
<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
</table>
</html>
I broke your js out into a separate file for ease of reading. Then i made the following tweaks:
add an id to your checkbox. this eliminates the need to check your element in a loop when there is only 1 of them and since its a checkbox there should always only be 1 with that name
pull the tables in by class name as you were and then convert the node collection to an array. then leverage the array builtin forEach loop.
lastly use a ternary if statement to set your table display for some syntactic sugar.
function showMe(cls) {
const checkbox = document.getElementById("c1"),
tables = Array.prototype.slice.call(document.getElementsByClassName(cls));
tables.forEach(function (t) {
t.style.display = checkbox.checked ? 'table' : 'none';
});
}
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" id="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
Add the JS at the end of file, this is doesn't work, because you return the JS before HTML. You need render HTML before JS, and change show('box'); to showME('box');
<html>
<head></head>
<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3">
<b>Event</b>
</td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3">
<b>Status</b>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
</table>
<script language="JavaScript">
function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis = 0;
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis = 1;
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
if (vis === 1) {
e.style.display = 'none';
} else {
e.style.display = 'table';
}
}
}
showMe('box');
</script>
</html>
First you try to call the function show('box'); which does not exist. You should rename the call to showMe('box');
The second problem is the order of execution. Basically everything that is loaded is executed immediately. In your case, the first thing that is defined is the function showMe(). After that it is called immediately (see above). The problem that occurs now is that the HTML element that the function is supposed to access has not yet been rendered.
So the initial call of the function showMe('box') should be done after the HTML elements are rendered. You can do this by making the call at the end of the page in separate script tags or in the body tag in the onload method.
<body onload="showResults('box')">
...
</body>
Basically, you should use meaningful variable and function names (for example, "resultVisible" instead of "vis" or "showResults" instead of "showMe") and use them with the correct type, e.g. Boolean (true / false).
I would add an ID to the checkbox instead of a name. Since you only have one of them, you can save yourself a lot of scripting to determine whether the checkbox is set or not. You can also shorten the part where you control the visibility.
function showResults(cls) {
var checked = document.getElementById('c1').checked;
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
e.style.display = (checked) ? 'table' : 'none';
}
}
Related
I have a html as below and basically it contains main table with class as <table class="customFormTable block" and this in turn contains some tables like <table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
So i want jQuery/javascript to scan for parent table with class table customFormTable and find if any children has table with style="visibility: hidden;", if so hide the parent table i.e table customFormTable
<table class="customFormTable block" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:9px;" ignore="all">
<tbody><tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="15%" class="portlet-form-field-label">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="portlet-form-field-label"><strong>
Police Details
</strong></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="85%">
<table border="0" cellpadding="0" cellspacing="0" width="85%" class="MarginL10px">
<tbody><tr>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Station">Police Station</label> <font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Station" name="app_spec_info_POLICE_DETAILS_Police_Station" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font> </td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number">Police Report/ Case Number</label> <font id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRedstar" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" name="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
first change id from 'elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)' to anything else like 'elementTableContainerCheckHidden'
Because jquery throw error while parsing () contains id name.
Try below solution which gives you true / false for elementTableContainerCheckHidden for hidden visibility
if ($('.customFormTable')
.find('#elementTableContainerCheckHidden').css("visibility") === "hidden") {
$('.customFormTable').hide(); //hide your parent table
}
Hello
which table do you want to hide ? You can try to use jQuery like this
$("yourSelector").find(' + "yourTarget"').event("");
"yourSelector" , that means ID/Class which is the child or your selector
"yourTarget" , that means your parent of the selector or your target
"event", means hide()/addClass() like this or your event
I hope you can try this
$("yourSelector").find(' + "yourTarget"').addClass("yourClass");
and by the help of css you can easily done you wish.
OR
$("yourSelector").find(' + "yourTarget"').hide();
is very helpful I hope
you need to traverse all tds and find table element.
$(document).ready(function(){
var tds=$(".customFormTable tbody tr td")
$.each(tds,function(){
var htmls=$.parseHTML($(this).html())
$.each(htmls,function(i,o){
if(o.outerHTML)
if(o.outerHTML.indexOf("table")){
console.log(o.style.visibility)
if(o.style.visibility=='hidden' || o.style.display=='none')
console.log(o)
$(".customFormTable").hide();
}
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="customFormTable block" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:9px;" ignore="all">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="15%" class="portlet-form-field-label">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="portlet-form-field-label"><strong>
Police Details
</strong>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="85%">
<table border="0" cellpadding="0" cellspacing="0" width="85%" class="MarginL10px">
<tbody>
<tr>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)" class="portlet-form-field-label" style="">
<label for="app_spec_info_POLICE_DETAILS_Police_Station">Police Station</label> <font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementMessage" class="Redstar"></font></font>
</td>
<td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)">
<input type="text" id="app_spec_info_POLICE_DETAILS_Police_Station" name="app_spec_info_POLICE_DETAILS_Police_Station" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" class="portlet-form-field-label" style="">
<label for="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number">Police Report/ Case Number</label> <font id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRedstar" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementMessage" class="Redstar"></font></font>
</td>
<td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)">
<input type="text" id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" name="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I have the following form inside SharePoint 2013 web application :-
I need to remove all the Table <tr> except the ones that start with "name" & "title". so can anyone adivce how i can achieve this ? . here is part of the markup for the above image (it show two Tr on that have Content Type (should be removed), while the other contain Name ):-
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
Now i have jquery version 1.7 loaded inside the web application, but i prefer to achieved using pure javaScript.
Thanks
EDIT here is a more detailed markup :-
<div id="contentRow">
<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
<div id="contentBox" aria-relevant="all" aria-live="polite">
<div id="notificationArea" class="ms-notif-box"></div>
<div id="DeltaPageStatusBar">
<div id="customcalender"></div>
<div id="DeltaPlaceHolderMain">
<a id="mainContent" tabindex="-1" name="mainContent"></a>
<div style="padding-left:5px">
<table id="onetIDListForm" class="ms-core-tableNoSpace">
<tbody>
<tr>
<td>
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ2" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div id="WebPartWPQ2" class="noindex " style="" allowdelete="false" width="100%" haspers="false" webpartid="6c7d849e-da6b-4138-be9f-b99bde542065">
<table class="ms-informationbar" width="100%" cellspacing="0" cellpadding="2" border="0" style="margin-bottom: 5px;">
<div id="listFormToolBarTop" style="display: none;">
<span style="display:none">
<span></span>
<table width="100%">
<tbody>
<tr>
<td width="100%" valign="top">
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<tr>
When in doubt, filter is your friend:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jjzx6mge/4/
$('#formTbl tr').filter(function () {
return !$(".ms-standardheader", this).text().match(/Name|Title/i);
}).remove();
The result returned of a function passed to filter is a boolean value telling which items to retain (truthy), or which to exclude (falsey).
This one targets only rows that have the requested text in the ms-standardheader classed element.
It also only targets a specific inner table to avoid the case of deep searching from the top level table and wiping out entire tables within it.
While you can do this with plain old JS, significantly more code is required.As you already have a version of jQuery installed, it makes sense to use it.
This would work:
$(function() {
$('#formTbl tr').each(function() {
var frstVal = $(this).find('td').eq(0).text();
if (!frstVal.match(/name|title/i)) {
$(this).remove()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Title
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
This will remove every tr that has a .ms-standardheader element that contains the text Name or Title
$('#formTbl tr').each(function() {
var that = $(this);
var label = that.find('.ms-standardheader').text();
if (label.indexOf('Name') != -1 || label.indexOf('Title') != -1) {
that.remove();
}
});
And here I am, doing this the good ol' plain JS way, since you've asked for it :)
http://jsfiddle.net/m53esfpo/3/
Edit: Updated code and fiddle (thanks #TrueBlueAussie)
Removes every tr except the ones that start with name or title.
var t = document.getElementById('formTbl');
for (var i = 0; i < t.getElementsByTagName("tr").length; i++) {
var s = t.getElementsByTagName("tr")[i].getElementsByClassName('ms-formlabel');
if (s.length > 0) {
if (s[0].innerText.indexOf('Name') < 0 && s[0].innerText.indexOf('Title') < 0) {
t.getElementsByTagName("tr")[i].parentNode.removeChild(t.getElementsByTagName("tr")[i]);
}
}
}
You can do it with this:
$("#formTbl tr td h3").not("h3:contains('Name'):contains('Title')").closest('tr').remove();
Im trying to pull out the data and put it in arrays with jquery for google dynamic remarketing tag.
using the css class
gr_row
values---
ecomm_prodid
ecomm_quantity
ecomm_totalvalue
Then insert them like so, if there are multiple values, if only one then no array and remove curreny symbol.
<!-multiple products in cart-->
<script type="text/javascript">
var google_tag_params =
ecomm_prodid: ["123","234"],
ecomm_pagetype: "basket",
ecomm_totalvalue: [100,50]
};
</script>
<!-single product in cart-->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 234,
ecomm_pagetype: "purchase",
ecomm_totalvalue: 120.99
};
</script>
Any help appreciated thanks
google instructions add dynamic remarketing tag
<table class="checkout-cart" border="0" cellpadding="3" cellspacing="2" width="650">
<tbody>
<tr>
<th "="" align="left" width="15%">REF</th>
<th align="left" width="45%">DESCRIPTION</th>
<th align="right" width="10%">QUANTITY</th>
<th align="right" width="10%">PRICE</th>
<th align="right" width="10%">COST</th>
<th align="center" width="10%">REMOVE</th>
</tr>
<tr class ="gr_row">
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="77"> 83 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="242">some product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_0" value="1" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td rowspan="1" class="cart" align="center"><input name="D_0" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="78"> 3571 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="241">another product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_1" value="5" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td class="cart" align="right"> £6.90 </td>
<td class="cart" align="right"> £6.90 </td>
<td rowspan="1" class="cart" align="center"><input name="D_1" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="4" align="right"><b>Subtotal</b></td>
<td class="cart" align="right">£12.69</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>VAT</b></td>
<td class="cart" align="right">£2.54</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>Total</b></td>
<td class="cartheading" align="right"><b>£15.23</b></td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
</tbody>
</table>
I have multiple tables stacked inside a div container as below:-
<div id="myContent" style="display: block;">
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Health Care
</td>
</tr>
<tr>
<td align="left">
20 Wisconsin Ave</td>
</tr>
<tr>
<td align="left">
641.235.5900
</td>
</tr>
<tr>
<td align="left">
No website
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table >
<tbody>
<tr>
<td align="left">Housing</td>
</tr>
<tr>
<td align="left">
N/A</td>
</tr>
<tr>
<td align="left">
641.255.3884
</td>
</tr>
<tr>
<td align="left">
www.housingl.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Employment</td>
</tr>
<tr>
<td align="left">N/A</td>
</tr>
<tr>
<td align="left">
641.743.0500
</td>
</tr>
<tr>
<td align="left">
http://www.noexperience.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
</div>
I am trying to run a condition to find the TD with N/A and move those tables to the top. This is an additional question bult on the top of my previous question:
Finding the text "N/A" and hiding an image in table's next TD
I have a starting trouble with this code. Any support is appreciated.
$('td:contains(N/A)').closest('table').prependTo('#myContent');
jsFiddle example
$('td').each(function(){
if ($(this).text() === 'N/A') {
$(this).parents('table').detach().prependTo('#myContent');
}
});
I don't know how this is going to work because, it is not a live website, it is a dashboard that pulls data from a chemical analysis program and give a browser view of it. My issue is I have two tables I need aligned at the top of the page. One aligned to the left and one centered. Right now I have a table with an image logo.gif aligned center then below it I have a table meaning/symbol headers aligned to the left I need those on the same line can anyone show me what to do? I can email a picture if need to be see what it looks like. I know there is a lot of broken tags, but I inherited this and it all works except for the two tables on top.
<div align="center">
<table border="0" width="800" id="Nav" cellpadding="0" cellspacing="0" valign="top" >
<tr>
<td height="60" width="100%"><p align="center"><img border="0" src="../Images/Logo.jpg" width="199" height="101"></td>
</tr>
<tr>
<td width="100%" bordercolorlight="#FFFFFF" bordercolordark="#808080" align="center" valign="top">
<TABLE BORDER=2 width="23%" align="left" id="BodyTable" height="20" cellspacing="0" cellpadding="0" bordercolor="#000000">
<TR> <TH>Meaning</TH> <TH>Symbol</TH> </TR>
<TR> <TD><b>No Schedule</TD> <TD align="center"><img src='../Images/Not- ScheduledMain2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Deactivated Tanks</TD> <TD align="center"><img src='../Images/Gray-Astris2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test Scheduled</TD> <TD align="center"> <img src='../Images/BlueTest2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test In Process</TD> <TD align="center"><img src='../Images/GreenTest2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test Late</TD> <TD align="center"> <img src='../Images/RedTest2.png' width='20' height='22' align='center'></TD></TR>
<tr>
</TABLE>
</tr>
<tr>
<td width="100%" bordercolorlight="#FFFFFF" bordercolordark="#808080" align="center" valign="top">
<table border="0" width="100%" id="HeaderTable" cellspacing="0" cellpadding="0" valign="top" height="73">
<tr>
<td colspan="3" height="34"><p align="center"><b><font face="Arial" size="5">IEC's TrueLogic Dashboard</font></b></td>
</tr>
<tr>
<td colspan="3" height="39"><p align="center">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="340" width="110%" bordercolorlight="#FFFFFF" bordercolordark ="#808080" align="center" valign="top">
<table border="0" width="100%" id="BodyTable" height="20" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr>
<td height='20' width='20' bgcolor="#C0C0C0" ><p align='center'> </td>
<td width='14'> <td>
<td height='20' width='360' bgcolor="#C0C0C0" ><p align='center'><a><b>Process Line</b></td>
<!-- Sample Item Removed <td height='10' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Sample</b></td>
--> <td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Test Status</b></td>
<td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Adds</b></td>
<td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Corrective Action</b></td>
</tr>
</Table>
<table border="0" width="100%" id="BodyTable" height="37" cellspacing="0" cellpadding="0" valign="top">
<script type="text/javascript">[ItemsHTML]
</script>
</table>
</td>
</tr>
<tr>
<td HEIGHT="25"></td>
</tr>
<tr>
<td height="25">
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
<tr>
</tr>
<td width="335"><p align="left"><font size="1"> <p> By TrueLogic Company <p> Edited By International Electronic Components</font></td>
<td width="290"><p align="center"></td>
<td width="135"><p align="right"><font size="1">[LastBuild]</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td HEIGHT="25"></td>
</td>
</tr>
</table>
</div>
</body>
</html>
Is this what you want ?
<div align="center">
<table border="0" width="800" id="Nav" cellpadding="0" cellspacing="0" valign="top" >
<tr>
<td height="60" width="100%" align="center">
<TABLE style="float:left;" BORDER=2 width="23%" align="left" id="BodyTable" height="20" cellspacing="0" cellpadding="0" bordercolor="#000000">
<TR> <TH>Meaning</TH> <TH>Symbol</TH> </TR>
<TR> <TD><b>No Schedule</TD> <TD align="center"><img src='../Images/Not- ScheduledMain2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Deactivated Tanks</TD> <TD align="center"><img src='../Images/Gray-Astris2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test Scheduled</TD> <TD align="center"> <img src='../Images/BlueTest2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test In Process</TD> <TD align="center"><img src='../Images/GreenTest2.png' width='20' height='22' align='center'></TD> </TR>
<TR> <TD><b>Test Late</TD> <TD align="center"> <img src='../Images/RedTest2.png' width='20' height='22' align='center'></TD></TR>
<tr>
</TABLE>
<img border="0" src="../Images/Logo.jpg" width="199" height="101">
</td>
</tr>
<tr>
<td width="100%" bordercolorlight="#FFFFFF" bordercolordark="#808080" align="center" valign="top">
<table border="0" width="100%" id="HeaderTable" cellspacing="0" cellpadding="0" valign="top" height="73">
<tr>
<td colspan="3" height="34"><p align="center"><b><font face="Arial" size="5">IEC's TrueLogic Dashboard</font></b></td>
</tr>
<tr>
<td colspan="3" height="39"><p align="center">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="340" width="110%" bordercolorlight="#FFFFFF" bordercolordark ="#808080" align="center" valign="top">
<table border="0" width="100%" id="BodyTable" height="20" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr>
<td height='20' width='20' bgcolor="#C0C0C0" ><p align='center'> </td>
<td width='14'> <td>
<td height='20' width='360' bgcolor="#C0C0C0" ><p align='center'><a><b>Process Line</b></td>
<!-- Sample Item Removed <td height='10' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Sample</b></td>
--> <td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Test Status</b></td>
<td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Adds</b></td>
<td width='14'> <td>
<td height='20' width='120' bgcolor="#C0C0C0" ><p align='center'><a><b>Corrective Action</b></td>
</tr>
</Table>
<table border="0" width="100%" id="BodyTable" height="37" cellspacing="0" cellpadding="0" valign="top">
<script type="text/javascript">[ItemsHTML]
</script>
</table>
</td>
</tr>
<tr>
<td HEIGHT="25"></td>
</tr>
<tr>
<td height="25">
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
<tr>
</tr>
<td width="335"><p align="left"><font size="1"> <p> By TrueLogic Company <p> Edited By International Electronic Components</font></td>
<td width="290"><p align="center"></td>
<td width="135"><p align="right"><font size="1">[LastBuild]</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td HEIGHT="25"></td>
</td>
</tr>
</table>
</div>
</body>
</html>