How can I add color to a row in a SharePoint 2007 list that has specific text?
I would like to know how to add color to a row in a SharePoint 2007 list if one field contains specific text?
for example: I have a list that has three fields:
songs1
1.id 2.name 3. full description
now I want to show the user only the first and second fields.
songs1
id name
1 abc 2 edv
Second thing, I want to give a color (let's say red) to the line that is contained in the hidden field - "full description", text with a word, for example "color".
I found a javascript code that I can add to the aspx page:
(document) .ready (function () {$ Text = $ ("td.ms-vb2: contains ('color')"); $ Text.parent (). Css ("background-color", "red") ;});
but it only works if "full description" is displayed.
can someone give me an idea?
thanks gadym
a source to share
Have you considered creating a conditionally formatted data view? See http://office.microsoft.com/en-au/sharepointdesigner/HA100996241033.aspx
This way you don't have to do this ugly javascript hack :)
a source to share
One idea might be to use a calculated column to find another field to represent your text string - then base your jQuery logic on that calculated column.
However, you are specifying a description field, which is probably defined as Multiple Lines of Text and cannot be used in calculated columns.
How about displaying the Description field, but then using some jQuery to hide it from view using .hide ()?
I can't give you the exact javascript to do this right now, but if you need some inspiration then Christophe's Blog is a great place to start.
a source to share
From your question, I understood that you can highlight a row that contains a certain text (color), but could not hide that column. I have hidden this column in the text of the code. You may need to change the column index.
<script>
$(document).ready(function(){ $Text = $("td .ms-vb2:contains('color')"); $Text.parent().css("background-color", "red");
var myelement = $Text.parent().parent();
$(myelement).find("td:nth-child(3)").hide();
$(myelement).find("th:nth-child(4)").hide();
});
</script>
Please let me know, does this help you?
a source to share