How to highlight two rows of a table

…this post was published on 2012 May 11.

The question can be found on Scripting Forum.

In that post, the first answers reffer to a static table. In this case isn’t so difficult to reffer to row’s ID. But what IF you have a dynamic table, created for example by Sharepoint when you insert a DataFormWebPart.
After inserting the DFWP, in the source code,you will see that you have only one block like for all rows:

<tr  >   
<xsl:if test=”position() mod 2 = 1″>
<xsl:attribute name=”class”>ms-alternating</xsl:attribute>
</xsl:if>
<xsl:if test=”$dvt_1_automode = ‘1’” ddwrt:cf_ignore=”1″>
<td class=”ms-vb” width=”1%” nowrap=”nowrap”>
<span ddwrt:amkeyfield=”ID” ddwrt:amkeyvalue=”ddwrt:EscapeDelims(string(@ID))” ddwrt:ammode=”view”></span>
</td>
</xsl:if><td class=”ms-vb”>
<xsl:value-of select=”@Created” /></td>
<td ><xsl:value-of select=”@Title”/>
 </td>
<td class=”ms-vb”>
<xsl:value-of select=”@Body” disable-output-escaping=”yes” />
</td>
</tr>

First, I will attach a function  to onclick() event, not onmouseover(), but the case is the same. Next i will force SHP to auto-generate the id for row element and I will create a javascript function, myfunction().
This way the code for row element will look like:

<tr  onclick=”my_function(id)” id=”{generate-id()}”>
….the same code…
</td></tr>

The function contain the code as bellow

<script type=”text/javascript”>
function my_function(id_value)
{
alert(“You clicked on row identified by ID: “+id_value);
alert(“You can see that the code is changing for 5.char which is: “+id_value.substring(4,5));
id_substring=id_value.substring(4,5);
alert(“The numeric value for that char is “+id_substring.charCodeAt());
id_substring_nr=id_substring.charCodeAt()-1;
new_char=String.fromCharCode(id_substring_nr);
if (id_substring_nr== 48 ){new_char=’Z’;}
alert(“The char which will replace the 5. position is: “+new_char);
id_value_new=id_value.substring(0,4)+new_char+id_value.substring(5,7);
alert(“The ID for the next row is: “+id_value_new);
document.getElementById(id_value).style.backgroundColor=’red’;
document.getElementById(id_value_new).style.backgroundColor=’green’;
alert(‘DONE!’);
}
</script>

For any questions, please don’t hesitate, just do it.

This entry was posted in Sharepoint 2010. Bookmark the permalink.