views:

32

answers:

4

I need to add:

  • an ID to the table in my form
  • a numbered sequence of classes to a certain amount of TD's in every next TR in that table (three td's in this case)

I've got next html-model:

<form id="myform">
<table>
 <tr>
  <td>some text</td>
  <td>some text</td>
  <td>some text</td>
</tr>
 <tr>
  <td>some text</td>
  <td>some text</td>
  <td>some text</td>
</tr>
</table>
</form>

I need that to be like this after jquery applied:

<form id="myform">                   <!--no changes-->
 <table id="table1">                 <!--changed-->
  <tr>       
   <td class="td1">some text</td>    <!--changed-->
   <td class="td2">some text</td>    <!--changed-->
   <td class="td3">some text</td>    <!--changed-->
  </tr>
  <tr>       
   <td class="td1">some text</td>    <!--changed-->
   <td class="td2">some text</td>    <!--changed-->
   <td class="td3">some text</td>    <!--changed-->
  </tr>
 </table>
</form>

Thanks in advance

+1  A: 

Here the code you want to add in your script

$("#myform table").attr("id", "table1");

$("#myform table tr").each(function(){
    $("td:eq(0)",$(this)).attr("id", "td1");
    $("td:eq(1)",$(this)).attr("id", "td2");
    $("td:eq(2)",$(this)).attr("id", "td3");
});
Chinmayee
This script adds classes to the first TR only but I need it to be added to all of TR's in one table...
dessol
Check updated code
Chinmayee
+2  A: 

Let's try:

$(function(){
    $('#myform').find('table').each(function(i,e){
       var $table = $(e);

       $table.attr('id', 'table' + (parseInt($table.index(),10)+1));

       $table.find('tr').each(function(i2,e2){
          var $tr = $(e2);

          $tr.find('td').each(function(i3, e3){
             var $td = $(e3);

             $td.addClass('td' + (parseInt($td.index(),10)+1));
         });
       });
    });
});

Example: http://www.jsfiddle.net/YjC6y/43/

This should work pretty generic. Anyway I'm not sure if that is the best way to do it, but I'm sure the elegant & clever people at Stackoverflow will correct this if not.

jAndy
Unfortunately, this script adds a table wrong id (table0). And all the td's have the same class (td0). But thanks for participation. I appreciate it
dessol
@dessol: well, this codes works pretty well in the example. I don't know why you should get `td0` all the way.
jAndy
A: 
(function($) {
    var id = 'myid';
    var class_prefix = 'myclass-';
    $("#myform").find('table')
    .attr('id', id)
    .find('tr').each(function(i,el) {
        row = $(el);
        row.children('td').each(function(k, col) {
            $(col).addClass(class_prefix + k);
        });
    }); 
});
erwin atuli
This one doesn't work for me but thanks for your reply any way!
dessol
A: 
$('#myform table').each(function(i, v) {
   $(v).attr('id','table' + (i + 1)).find('tr').each(function(idx, val) {
        $(val).children().each(function(index,element) {
            $(element).addClass('td' + (index + 1));
        });
   });
});
DoXicK
That worked great.
dessol
By the way, this is the shortest code as far as I can see
dessol