CODEWITHSUNDEEP
javascriptjquery
user3478947
user3478947

Reputation: 31

jQuery table loop?

I'm trying to run through a table and change each cell based on the row. Table example:

<table id='myTable'>
    <tr>
      <td><div id='A1'></div></td>
      <td><div id='A2'></div></td>
    </tr>
    <tr>
      <td><div id='A1'></div></td>
      <td><div id='A2'></div></td>
    </tr>
</table>

Function example (in script under body):

function myFunction(){
  var table = $('#myTable');
  var rows = table.find('tr');
  rows.each(function(i, r){
    var cells = r.find('td');
    if(i==1){//to edit second row, for example
      cells.each(function(j,c){
        var square = c.getChild();//attempt to get the div in the td
        square.innerHTML='html here';
      });
    }
  });
}

$(document).load(myFunction);

The example shown is non-specific version of the actual function I'm trying to run.

To be clear, I have linked to the jQuery 2.1 CDN, so the page should be able to read jQuery.

Console shows no errors, but still does not run appear to run the function. Checking the tested row in the console shows no change to the html in the div. Any advice for this?

Upvotes: 0

Views: 494

Answers (6)

DIEGO CARRASCAL
DIEGO CARRASCAL

Reputation: 2129

first the "id" should be unique to an element... but ok, this should do the trick:

$(document).ready(function(){
   $("#myTable>tr:odd").children("div").text('html here');
});

If you want to put html code in the div, change text for html. if you want to specify the row then:

$(document).ready(function(){
   myRow = //set its value...
   $("#myTable>tr").each(function(idx, element){
      if(idx == myRow){
         element.children("div").text('html here');
      }
   }, myRow);
});

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8858

Here's a simplified version : 

$("#myTable tr").each(function(i, r){
    if(i==1) 
    {
      $(this).find('td').each(function()
      {
         $(this).find("div").html("html here");
      });
    }
  });

Example : https://jsfiddle.net/DinoMyte/4dyph8jh/11/

Upvotes: 0

wallop
wallop

Reputation: 2571

This works, you can try this

JSBIN

function myFunction(){
  var table = $('#myTable');
  var rows = table.find('tr');
  rows.each(function(i){
    if(i==1){//to edit second row, for example
      $(this).find('td').each(function(j){
        $(this).find('div').html('html here');        
      });
    }
  });
}

$(document).ready(myFunction);

Upvotes: 0

Ivan Karaman
Ivan Karaman

Reputation: 1234

$( document ).ready(function() {
  var table = $('#myTable');
  var rows = table.find('tr');
  rows.each(function(i, r){
    var cells = $(r).find('td');
    if(i==1){//to edit second row, for example
    cells.each(function(j,c){
      var square = $(c).children('div');
      square.text('html here');
    });
    }
  });
});  
table{
  background-color: #eee;
  width: 300px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
<tr>
  <td><div id='A1'></div></td>
  <td><div id='A2'></div></td>
</tr>
<tr>
  <td><div id='A1'></div></td>
  <td><div id='A2'></div></td>
</tr>
</table>

Upvotes: 0

Alex Taker
Alex Taker

Reputation: 203

When I run it I get an error on r.find() because .find() is a jQuery function and needs to be called on a jQuery object, which r is not. Simply wrapping it in a $() works.

function myFunction(){
  var table = $('#myTable');
  var rows = table.find('tr');

  rows.each(function(i, r){

  var cells = $(r).find('td');
  if(i==1){//to edit second row, for example
    cells.each(function(j,c){
      var square = c.getChild();//attempt to get the div in the td
      square.innerHTML='html here';
    });
  }
});
}

https://jsfiddle.net/k50o8eha/1/

You may need to do asomething similar to the c.getChild();

Upvotes: 1

Adam
Adam

Reputation: 1304

Can you give this a try...

$( document ).ready(function() {
  var table = $('#myTable');
  var rows = table.find('tr');
  rows.each(function(i, r){
    var cells = r.find('td');
    if(i==1){//to edit second row, for example
    cells.each(function(j,c){
      var square = c.getChild();//attempt to get the div in the td
      square.innerHTML='html here';
    });
    }
  });
});

or shorthand...

$(function() {

});

Upvotes: 0

Related Questions