CODEWITHSUNDEEP
javascript
Borislav Evtimov
Borislav Evtimov

Reputation: 31

Increment value in table rows

How to increment value in table rows with each row having different values? This is like a calendar. I have declared month and year and the first row is the days. So the second row will start from 2 because the month is set at 1 and the month + day - 1 + 1 = 2 and it will go until the last cell like 2,3,4,5,6. The third row will be from 21-25 because i want to sum month+day+last two digits of year - 1+1+19. I managed to find the table and increment but it goes down instead of right.

$('#table').find('td:nth-child(1)').each(function(i) {
  var month = 1;
  var y1 = 2019;
  var y2 = 12;
  var y3 = 19;
  $(this).text(i + month);
})
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

tr:nth-child(1) {
  background-color: #dddddd;
}
<!DOCTYPE html>
<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
  <h2 id="Month">Month: 1</h2>
  <span id="Year">Year: 2019</span>
  <table id="table">
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

</body>

</html>

Upvotes: 2

Views: 608

Answers (2)

Marcus
Marcus

Reputation: 1930

Do you mean some thing like this? I've add a thead and tbody element to easy select the rows. Then i take the whole first row and with in this i take all the cells nd ste the text. Hope it helps.

var year = 2019;
var month = 1;

$('#Month').text('Month: '+month);
$('#Year').text('Year: '+year);

for(var i=1; i<=$('#table thead th').length; ++i){
  var day = parseInt($('#table thead th:nth-child('+i+')').text());
  $('#table tbody tr:nth-child(1) td:nth-child('+i+')').text(day);
  $('#table tbody tr:nth-child(2) td:nth-child('+i+')').text(day+month);
  $('#table tbody tr:nth-child(3) td:nth-child('+i+')').text(day+month+(year%100));
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

thead {
  background-color: #dddddd;
}
<!DOCTYPE html>
<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
  <h2 id="Month"></h2>
  <span id="Year"></span>
  <table id="table">
    <thead>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
      </tr>
    </thead>
    </body>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

</body>

</html>

Upvotes: 1

Tudor Constantin
Tudor Constantin

Reputation: 26861

I think you want something like this - iterating through rows and inside them through columns:

var j = 0;
$('#table tr').each(function(i) {
  $(this).find("td").each( function() {
  j++;
  var month = 1;
  var y1 = 2019;
  var y2 = 12;
  var y3 = 19;
  $(this).text(j + month);
  })

})
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

tr:nth-child(1) {
  background-color: #dddddd;
}
<!DOCTYPE html>
<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
  <h2 id="Month">Month: 1</h2>
  <span id="Year">Year: 2019</span>
  <table id="table">
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

</body>

</html>

Upvotes: 0

Related Questions