How to hide a table row which have TD containing certain values - javascript

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...

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.

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(' ');
}
});
});
});
Fiddle here
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(' ');
}
}
});
});

Related

Find parent sibling td hidden value

I want to find parent sibling td hidden value when clicking correctAttempt class in div.
<tr th:each="m : ${markWiseResultModel}">
<td th:text="${m.id}" align="center"></td>
<td class="topicTD">
<input type="hidden" class="topicId" th:value="${m.topic.id}"/>
<div th:text="${m.topic.name}" align="center"></div>
</td>
<td data-toggle="modal" style="background:#b8d1f3;">
<div class="correctAttempt" th:text="${m.correctAttemptCount}" align="center" ></div>
</td>
<td th:text="${m.correctAttemptPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.wrongAttemptCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.wrongAttemptPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.correctTotalCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.correctTotalPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.wrongTotalCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.wrongTotalPercent}" align="center" style="background:#99FF99;"></td>
</tr>
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id = $(this).parents('td').siblings('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
Already tried script with no success.
Try this-
Demo
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id= $(this).parent().prev('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
Try this one.
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id= $(this).parent().prev('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
You can use closest to get the parent tr element, then you need to find the .topicId. Try this:
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id = $(this).closest('tr').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
The advantage of using closest instead of traversing rigidly by parent is that you can change your tr and td structure without having to amend the JS code, so long as the classnames remain the same.
Example fiddle

creating table within table by pressing button

I currently have a table and in one of the <td>, I have input type of checkbox. where if user clicks on it, it will create different table.
<div style="padding-left:170px;">
<table width="80%" border="1" padding-left:50px>
<tr>
<td>
<table border="1" style="float:left">
<th>Portal01</th>
<tr>
<td style= "padding:12px;" align="left" >
<input type="test0" id = "test0" name="liveDiff" onchange = "expandService()"> blah_0
</td>
<td>
blah_1
</td>
<td>
blah_2
</td>
</tr>
</table>
</td>
</tr>
</table>
I have it set up where if user clicks on checkbox next to blah_0, it should create different table within this table. I am not sure if this is possible with JavaScript and if not, what would be alternate way to approach this situation.
it is possible.
function expandService(){
document.getElementById('the_id_of_the_td_that_will_contain_the_new_table').innerHTML =
'<table><tr>...</tr></table>';
}
Another way is to use appendChild(), here is an example:
function expandService(chkId, tblId, totalRows, totalCols){
var tbl = document.createElement('table');
tbl.id = tblId;
var row, col, spn;
for(var i=0; i<totalRows; i++){
row = document.createElement('tr');
for(var j=0; j<totalCols; j++){
col = document.createElement('td');
spn = document.createElement('span');
spn.innerHTML = 'your-text';
col.appendChild(spn);
row.appendChild(col);
}
tbl.appendChild(row);
}
var chk = document.getElementById(chkId);
// td is the parent of checkbox
chk.parentNode.appendChild(tbl);
}
Sample usage:
<input type="checkbox" id="test0" name="liveDiff" onchange="expandService(this.id, 'your-table-id', 5, 4)">
It creates a table with 5 rows and 4 columns.
This is possible with javascript. One potential way to go is to use innerHTML. Use jQuery or just document.getElementByID to select the element that corresponds to your cell and insert a table inside of it. Here is an example fiddle using your code as a base.
<div style="padding-left:170px;">
<table width="80%" border="1" padding-left:50px>
<tr>
<td>
<table border="1" style="float:left">
<th>Portal01</th>
<tr>
<td id="foo" style= "padding:12px;" align="left" >
<input type="test0" id = "test0" name="liveDiff"> blah_0
</td>
<td>
blah_1
</td>
<td>
blah_2
</td>
</tr>
</table>
</td>
</tr>
</table> ​
js:
var makeTable = function(contents){
return '<table><td>' + contents + '</td></table>'
}
document.getElementById("test0").onchange = function(){
document.getElementById("foo").innerHTML = makeTable("foo")
}
​

jQuery: select an input from a table cell in multiple cells

I have a table with multiple rows, with each row having a button within the tag. There is also a link within each td tag that when the user clicks, THAT corresponding button is supposed to show, but when I click on the link, ALL the buttons show.
Here is the html:
<tr>
<td width="10%" align="center"></td>
<td width="80%" align="left"><span style="font-weight:bold;">About Me:</span> <input type="button" class="userDetails" style="display:none;" value="Save"/></td>
<td width="10%" align="center"></td>
</tr>
<tr>
<td width="10%" align="center"></td>
<td width="80%" class="originalText" align="left" valign="top">
'.$aboutMe.'
</td>
<td width="80%" class="aboutMe" align="center" valign="top">
<div style="display:none; font-weight:bold; color:red;" class="msgStatusText"></div>
<textarea class="textBox" cols="20" rows="auto" style="display:none;">
'.$aboutMe.'
</textarea>
</td>
<td width="10%" align="center"></td>
</tr>
and here is the jquery:
$(function(){
$(".editText").each(function(e){
$(this).unbind("click").click(function(e){//if user clicks on title (aboutMe,etc)
e.preventDefault();
//get handle for textArea //IF ANY EDITS, WILL BE IN THE VAR SECTION HERE
var textAreaHandle = $(this).parents("tr").next().find(".originalText"); //original userText
var oldTextValue = jQuery.trim($(textAreaHandle).text()); //trim value, else will not compare properly
var editTextBox = $(this).parents("tr").next().find(".textBox"); //handle for textarea
var fieldName = $(editTextBox).parent("td").attr("class"); //fieldName
var buttonHandle = $(this).parents("td").find(".userDetails");//WORKS, but gets ALL buttons, not just the corresponding one
var msgStatusHandle = $(this).parents("tr").next("tr").find(".msgStatusText");
The button is shown using the following code, which is ok, it's just the handle to the corresponding button (code above) that is messed up:
buttonHandle.css({"visibility":"visible"}).show();
There are multiple rows, each with the same structure as the one above so if user clicks on one row, only that corresponding button should show.
Somebody please tell my what I am doing wrong. Whatever I do, I can't seem to get this working.
Thanks a bunch!
Change this line:
var buttonHandle = $(this).parents("td").find(".userDetails");
To this:
var buttonHandle = $(this).closest('td').find('.userDetails');

How to iterate over table and define class for tds of trs?

I have a table like that:
<table id="myTable" cellspacing="0" cellpadding="10" border="0" width="100%">
<tbody>
....
<tr style="color: blue;" id="bankRecord377">
<td align="center" class="styleOdd"> <input type="checkbox" value="377" name="377"></td>
<td align="center" class="styleOdd">377</td>
<td align="center" class="styleOdd"></td>
<td align="center" class="styleOdd">391</td>
</tr>
....
<tr style="color: blue;" id="bankRecord386">
<td align="center" class="styleEven"> <input type="checkbox" value="386" name="386"></td>
<td align="center" class="styleEven">386</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">396</td>
</tr>
...
<tr style="color: blue;" id="bankRecord322">
<td align="center" class="styleEven"> <input type="checkbox" value="322" name="386"></td>
<td align="center" class="styleEven">322</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">314</td>
</tr>
...
</tbody>
</table>
class="styleOdd" makes row gray background class="styleEven" makes row background blue. I iterate over that table with Struts2 and define classes but user can remove some of table rows when he sees that HTML file. If user remove one of the table row, e.x. :
<tr style="color: blue;" id="bankRecord386">
...
</tr>
Colors of background was gray, blue, gray. However it is gray, gray now(because user removed a tr which includes classEven tds).
All in all what I want is iterate over that table again and defining classes styleOdd, styleEven, styleOdd, styleEven... again.
How can I do it with JavaScript or JQuery?
PS: I want to it for my table(which has id=myTable)'s every tds of trs.
EDIT: I want it except for the first tr(and it's tds).
You can use :even and :odd, but then you would iterate over the table rows twice. That might lead to unacceptable performance if your table has many rows.
I'd suggest using each() instead:
$("#myTable tr").each(function(index, row) {
var $cells = $("td", row);
if (index & 1) {
// Odd.
$cells.removeClass("styleEven").addClass("styleOdd");
} else {
// Even.
$cells.removeClass("styleOdd").addClass("styleEven");
}
});
You can use the :odd selector to target odd rows. (there is also a :even selector)
$('.td:odd').class('odd');
Trigger this when removing a row from the table to update classes.
There are also both CSS Selector but not widely supported.
$('#myTable tr:odd td').toggleClass('styleOdd', true).toggleClass('styleEven', false);
$('#myTable tr:even td').toggleClass('styleOdd', false).toggleClass('styleEven', true);
I believe you could also do it automatically using CSS. Although it requires a fairly modern browser.
Updated to take into account the table ID

How to include a page in a table by clicking a category in a menu (or in another table)?

I have following two tables and a script having a function includePage(). Table with id=1 contains a menu whereas table with id2 is empty. It just contain one cell.
Now I want that when a user click on the first option in the menu of table having id=1, a dummypage1.html may appear in the table having id=2. Similarly when a click is on the second option of menu of table having id=1, a dummypage2.html may appear in the table having id=2.
How exactly can I tell the browser with the help of script to include the pages in table having id=2? Please help.
<table id="1">
<tr>
<td id="choice1" onclick="loadPage()">Initialize Session</td></tr>
<td id="choice2" onclick="loadPage()">Sessions Information</td></tr>
</tr>
</table>
<table id="2">
</table>
<script language="javascript">
function loadPage(){
//if (document.getElementById('choice1')
// {
// <iframe src="sessionInformationTable.html" width="727px" height="416px"></iframe>
// }
}
</script>
You can pass a parameter on loadPage function
<td id="choice1" onclick="loadPage(1)">Initialize Session</td></tr>
<td id="choice2" onclick="loadPage(2)">Sessions Information</td></tr>
<table id="2">
<tr><td id="TD"></td></tr>
</table>
<script>
function loadPage(whatPage) {
var url = (whatPage==1) ? "initSession.html" : "infoSession.html";
document.getElementById('TD').innerHTML = '<iframe src="'+url+'" width="727px" height="416px"></iframe>';
}
</script>
OR
<table id="2"><tr><td><iframe src="about:blank" id="content" style='width:100%;height:100%;"/></td></tr></table>
then on the javascript:
function loadPage(whatPage) {
document.getElementById('content').src = (whatPage==1) ? "initSession.html" : "infoSession.html";
}
If you are sure about following methodology
CLICK ON TABLE1 --> ROW1 --> displays --> Page1.html in TABLE-A
CLICK ON TABLE1 --> ROW2 --> displays --> Page2.html in table-B
this kind of designing leads to more tables when the age increases.
Better use this kind of style..
CLICK ON TABLE1 --> ROW1 --> displays --> Page1.html in TABLE-A
CLICK ON TABLE1 --> ROW2 --> displays --> Page2.html in TABLE-A
The thing is place an IFRAME inside the TABLE-A, and when clicking the ROW1 or ROW2 or ROW-n
set thet page target to that iframe.
<table>
<tr>
<td>
Page1</td>
<td>
Page2</td>
</tr>
</table>
<table>
<tr>
<td>
<iframe style="width: 400px; height: 400px;" id="myplace" name="myplace"></iframe>
</td>
</tr>
</table>
Another approach is to make a AJAX call to request the content, and place it in the table setting a innerHTML property.
For AJAX calls you can use a variety of libraries, I personally recommend jquery and dojotoolkit.
With jQuery:
<table id="1">
<tr>
<td id="choice1">Initialize Session</td></tr>
<td id="choice2">Sessions Information</td></tr>
</tr>
<table id="2">
<tr><td></td></tr>
</table>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript">
$(function() {
$("#choice1,#choice2").click(loadPage);
});
function loadPage(){
var id = $(this).attr("id");
if(id === "choice1") {
$("#2 td").load("initSession.html");
} else if (id === "choice2") {
$("#2 td").load("infoSession.html");
}
}
</script>

Categories

Resources