AttachmentField control in SharePoint

The SharePoint AttachmentsField is used to display attachments from an SP list item.

<td align="center" id="att_{@ID}">
<xsl:if test="@Attachments='1'">
<SharePoint:AttachmentsField ID="att{@ID}" ControlMode="Display" ListId="{$ListID}" ItemId="{@ID}" FieldName="Attachments" visible="true" runat="server" />
</xsl:if>
</td>

The HTML that is rendered includes a table with a row for each attachment. The anchor tag look something like:

<a href="/student-affairs/athletics/athletics-w/basketball/Lists/Schedule/Attachments/11/statistics.html">20090312.6.html</a>


In this case, we'll want to change the display of the attachment from '20090312.6.html' to 'Statistics'.

Using javascript, we can traverse html elements using a couple of methods within the HTMLDocument class. These include:

getElementByID
getElementsByTagName

These return an HTMLElement or a collection of HTMLElements. we can then use the InnerHTML property to modify the value inbetween the anchor tag.

<script type="text/javascript">
document.getElementById("att_"+<xsl:value-of select="@ID"/>).getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0].getElementsByTagName('span')[0].getElementsByTagName('a')[0].innerHTML = "Statistics";
</script>

If we wanted to modify all attachment names from a list item, we can write a javascript function that works with a collection of HTMLElements:

<script type="text/javascript">
function setInnerA(ID) {
var arr = new Array();
arr = document.getElementById(ID).getElementsByTagName('table')[0].getElementsByTagName('tr');
for(var i=0; i < arr.length; i++)
{ document.getElementById(ID).getElementsByTagName('table')[0].getElementsByTagName('tr')[i].firstChild.firstChild.firstChild.innerHTML = "Statistics";
}
}
</script>