How to add id to input?

Question

My CMS is very old.

It gives the following HTML. I want to add id to each input and id name which is a text from the previous td, such as navn, e-po, hjem etc. Id can be 4 letters.

I tried this code, but it gives only id="----" to each input.

<script type="text/javascript">
$(document).ready(function(){
$('table tr').each(function(){
var formid=$('td:first', this).text().toLowerCase().slice(0,4);
$('input', this).attr('id', function() {
return formid});     
});
});
</script>

Basically what I tried to do is that. For each tr. set a variable formid to the first td and get the text and change to lowercase with four letters. And find this input and add id of this formid.

(UPDATE) After two replies I tried the followings.

$(document).ready(function() { 
$('table input').each(function() { 
var formid=$(this).parents('td').prev().text().toLowerCase();
alert (formid);
});
});

This alerts navn:, e-post:, hjemmeside: and sak:.

So far so good. But when I use the following, it alerts nothing. I want to take out: from each string.

$(document).ready(function() { 
$('table input').each(function() { 
var formid=$(this).parents('td').prev().text().toLowerCase();
var inputid=formid.slice(0,5);
alert (inputid);
});
});

Can anyone help me please?

Thanks in advance.

<TABLE CELLSPACING="0" CELLPADDING="2" BORDER="0">
<TR>
<TD> Navn: </TD>
<TD><INPUT TYPE="text" CLASS="input-style" NAME="Namn" VALUE="" MAXLENGTH="50">
</TD>
</TR>
<TR>
<TD> E-post: </TD>
<TD><INPUT TYPE="text" CLASS="input-style" NAME="Epost" VALUE="" MAXLENGTH="50">
</TD>
</TR>
<TR>
<TD> Hjemmeside: </TD>
<TD>    <INPUT TYPE="text" CLASS="input-style" NAME="Hemsida" VALUE="http://"  MAXLENGTH="50">
</TD>
</TR>

<TR>
<TD> Sak: </TD>
<TD><INPUT TYPE="text" CLASS="input-style" NAME="Arende" VALUE="" MAXLENGTH="50">
</TD>
</TR>

<TR>
<TD> Telefon:
</TD>
<TD><INPUT TYPE="text" CLASS="input-style" NAME="Telefon" VALUE="" MAXLENGTH="50">
</TD>
</TR>

<TR>
<TD>
Tekst:
</TD>
<TD>
<TEXTAREA NAME="Innehall" ROWS="5" COLS="42"></TEXTAREA>
</TD>
</TR>
<TR>

....
....
....


</TD>
</TR>
</TABLE>

Answer 1

I rewrote the function a bit to only operate on input elements:

$(document).ready(
    function () { 
        $('input').each(
            function () {
                // *this* refers to the current input-element
                var labelTd = $(this).parent().prev(),
                    label = $(labelTd).text(),
                    shortLabel = label.slice(0,4);
                // Set the id-attribute of the input element to the sliced
                // text content of the label
                $(this).attr('id', shortLabel);                    
        });
     }
);

Answer 2

I think it's better to start from the input elements, and navigate from there.

It's also a good idea to remove all punctuation and other non-alpha characters from the text before setting the id:

$(document).ready(function() { 
  $('table input').each(function() { 
      var formid=$(this).parents('td').prev().text().match(/[a-zA-Z]{,4}/);
      $(this).attr("id",formid);
  });
});