[SOLVED] Reference TD fields easy way?

[SOLVED] Reference TD fields easy way?

Hi all,

I'm new here and also pretty new to jQuery. I am trying to get my head wrapped around this form of programming, and have run into a minor thing with my code.

Basically I am moving one line of data from one table to another, and need a way to reference the table data without putting too many ID tags in there.
At the moment I have a class attribute for the row that I use to find it. This class is set when a user clicks the row. A click on a submit link then moves the content to the other table.

Here is the body part of the HTML code
<body>
<div id="main">
<h1><?php echo $data['titel']; ?></h1>
<small><?php echo $data['subtitle']; ?></small>
<div id="boks">
<table id="items">
   <thead>
      <tr>
         <th>Id</th><th>Name</th><th>Surname</th>
      </tr>
   </thead>
   <tbody>
      <tr id="11"><td>1</td><td>John</td><td>Doe</td></tr>
      <tr id="12"><td>2</td><td>Michael</td><td>Burnes</td></tr>
      <tr id="13"><td>3</td><td>Billy</td><td>Bones</td></tr>
   </tbody>
</table> <!-- End table items -->
<a class="details" href="#">Get Details</a><br />
<a class="insert" href="#">Insert Row in table below</a>
</div> <!-- End div boks -->
<hr />
<div id="bks2">
<table id="newItems">
   <thead>
      <tr>
         <th>Id</th><th>Name</th><th>Surname</th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>
</div> <!-- End div bks2 -->
<hr />
<p id="feedback"></p>
</div> <!-- End div main -->
</body>

And here is the part of the script that moves the line of data.
      // BEGIN insert link click
      $('a.insert').click(function() {
         var thisparam = $(this);
         var checkId = $('.highlight > td').html();
         if(checkId) {
            var checkName = $('.highlight > td').next().html();
            var checkSurname = $('.highlight > td').next().next().html();  // <<< This is the line I am "worried" about
            var rId = $('tr.highlight').attr('id');
            //console.log($('.highlight > td').html());
            $('#feedback').text("returned ID: " + checkId + " returned Name: " + checkName).fadeIn(400);
            var tableData = '<tr id="' + rId + '">';
               tableData += '<td>' + checkId + '</td>';
               tableData += '<td>' + checkName + '</td>';
               tableData += '<td>' + checkSurname + '</td>';
               tableData += '</tr>';
               //console.log(tableData);
            $('#bks2 > table > tbody').append(tableData);
         } else {
         $('#feedback').text("This Sucks!!!").fadeIn(400);
         }
         return false;
      }); // END insert link click

As you can see am I using the .next() function to goto the next item(td) in the table. This is alright for the couple of cells I have in this table, but what if I had 50 cells?
.next().next().next() and so on...?

Is there a smart way to do this referencing? Have I done everything wrong from the beginning? (Could happen and it wouldn't be the first time either )

EDIT: Solved
I think I found a solution to this. Here is the code I use now. (may still contain errors and stupid things. I am still learning )
      // BEGIN insert link click
      $('a.insert').click(function() {
         var checkPointer = $('.highlight > td');
         var checkNumFields = $('.highlight').children().size(); // Number of TD fields in row

         // if a row was selected...
         if(checkNumFields !== 0) {
            var rId = $('tr.highlight').attr('id'); // Get the ID of the row
            var tableData = '<tr id="' + rId + '">'; // Start new table row dataset
            var checkArray = new Array; // Create new array
            
            // Loop to assign contents of TD fields to array and table (redundant?)
            for(i = 0; i < checkNumFields; i++) {
               checkArray[i] = checkPointer[i].firstChild.nodeValue; // assign contents of TD field to array
               tableData += '<td>' + checkArray[i] + '</td>'; // insert array contents into table
               //console.log(i + ' ' + checkArray[i]); // debug!!
               }
            tableData += '<td><a href="#">X</a></td>'; // Add delete link to row
            //$('#feedback').text("returned ID: " + checkArray[0] + " returned Name: " + checkArray[2]).fadeIn(400);
            $('#bks2 > table > tbody').append(tableData);
            //console.log(checkNumFields); // debug!!
            //console.log(tableData); // debug!!
         } else {
         $('#feedback').text("This Sucks!!!").fadeIn(400);
         }
         return false;
      }); // END insert link click

    • Topic Participants

    • rasre