How to hide a table row which have TD containing certain values
Question
I am working on a SharePoint web site , and I need using CSS (Preferred) or JavaScript, to hide a table row that have two main TDs:-
- TD with a text named Item Number.
- TD with an input titled Item number.
Here is how the mark-up is constructed:-
Can anyone advice on this please?
i tried the following script , but did not hide the Item Number or the customer initial , baring in mind that all the TR are inside a table which have .ms-formtable class:-
<script>
$(function() {
$('.ms-formtable tr').each(function() {
var frstVal = $(this).find('td').eq(0).text();
if (frstVal.match(/Item Number|customer Initials/i)) {
$(frstVal).remove()
}
});
});
</script>
here is the related markup :-
<table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="113" class="ms-formlabel" nowrap="true" valign="top">
<h3 class="ms-standardheader">
<nobr>Item Number</nobr>
</h3></td>
<td width="350" class="ms-formbody" valign="top">
<span dir="none"><input title="Item Number" class="ms-long ms-spellcheck-true" id="_x0049_D1_806a702b-1716-47f5-a93c-16067f502daf_$TextField" type="text" maxlength="255" value=""><br></span>
<span class="ms-metadata">Do not customize at the list level</span>
</td></tr>
EDIT
now i tried this script :-
<script>
$(function () {
$('.ms-formtable table').each(function () {
$(this).find('tr').each(function () {
$(this).find('td').text() = 'Item Number';
$(this).remove();
}
});
});
</script>
but did not hide the Item Number field...
2 answers
solution1
0 2015-05-29 11:10:45
Your script and HTML has a few issues.
In your html there is no text inside any of the td's and you have the following query :
var frstVal = $(this).find('td').eq(0).text(); // how is this query going to retrive anything at all ?
The issue with your script is you're iterating over all the tr's but you're caching only the text() of the first td inside every tr , so change the script to the following :
$(function() {
$('.ms-formtable tr').each(function() {
$(this).find('td').each(function(){
var str_text = $(this).text();
if (str_text.match(/Item Number|customer Initials/i)) {
$(this).text(' ');
}
});
});
});
Edit
You're selecting the wrong element, the below query is wrong :
var str_text = $(this).text();
$(this) is pointing to tr , you need to go inside tr and find nobr and then perform your action.
$('.ms-formtable table').each(function () {
$(this).find('tr').each(function () {
var str_text = $(this).find('td nobr').text();
// console.log(str_text);
if (str_text.match(/Item Number/i)) {
$(this).find('input').remove(); // add this to remove input
$(this).text(' ');
}
}
});
});
solution2
0 2015-05-29 12:28:17
Hope this is what you are looking for .
$('tr').each(function(){ var count=0; $(this).find('td').each(function(){ if($(this).text()=='Item Number'){count=count+1;} if($(this).find('input[title="Item Number"]')){count=count+1;} }); if(count==2){$(this).hide();} });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> </head> <body> <table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="113" class="ms-formlabel" nowrap="true" valign="top"> <h3 class="ms-standardheader"> <nobr>Item Number</nobr> </h3></td> <td width="350" class="ms-formbody" valign="top"> <span dir="none"><input title="Item Number" class="ms-long ms-spellcheck-true" id="_x0049_D1_806a702b-1716-47f5-a93c-16067f502daf_$TextField" type="text" maxlength="255" value=""><br></span> <span class="ms-metadata">Do not customize at the list level</span> </td> </tr> </table> </body> </html>
Code snippet output will be an empty page,as in example table is having only one row which has 2 td's as mentioned,so am hiding the row,based on the creteria.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.