Alternating Row Number Triangle (Zigzag)

Beginner
⏱️ 7 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Odd/even rows
Alternating row number triangle output (1, 3 2, 4 5 6, 10 9 8 7, 11 12 13 14 15) in JavaScript programming

What You’ll Learn

How to print a triangle where numbers continue increasing, but the direction flips on each row:

Odd rows: left-to-right (ascending). Even rows: right-to-left (descending).

⭐ Pattern Output

For rows = 5, the pattern looks like this:

Output
1
3 2
4 5 6
10 9 8 7
11 12 13 14 15
1

Complete JavaScript Program

We track the next number k. For row i, the row range is k..k+i-1. Odd rows print ascending; even rows print descending.

JavaScript
const rows = 5;
let k = 1;

for (let i = 1; i <= rows; i++) {
  const start = k;
  const end = k + i - 1;
  const row = [];

  if (i % 2 === 1) {
    for (let v = start; v <= end; v++) row.push(v);
  } else {
    for (let v = end; v >= start; v--) row.push(v);
  }

  console.log(row.join(" "));
  k = end + 1;
}
Try it Yourself

🧠 How It Works

1

Set rows and start counter

rows = 5 and k = 1 sets the triangle height and the first number.

Setup
2

Compute the row range

Row i uses values from start = k to end = k + i - 1.

Range
3

Odd rows go forward

If i is odd, we print start..end so the row is ascending.

Ascending
4

Even rows go backward

If i is even, we print end..start so the row is descending.

Descending
=

Zigzag triangle

After printing a row, we move k to the next unused number and repeat.

2

Variation — Browser (aligned cells) Version

In the browser, you can align columns using fixed-width inline-block cells:

HTML
<!DOCTYPE html>
<html>
<body>
<script>
var rows = 5;
var k = 1;

for (var i = 1; i <= rows; i++) {
  var start = k;
  var end = k + i - 1;

  if (i % 2 === 1) {
    for (var v = start; v <= end; v++)
      document.write('<span style="display:inline-block;width:2.5em;text-align:right">' + v + '</span>');
  } else {
    for (var v2 = end; v2 >= start; v2--)
      document.write('<span style="display:inline-block;width:2.5em;text-align:right">' + v2 + '</span>');
  }

  document.write("<br>");
  k = end + 1;
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Increase rows to print a larger triangle
  • Pad numbers (padStart) for clean console alignment
  • Use a different rule (e.g., reverse every 3rd row) for new variants
  • Replace numbers with letters to build alternating alphabet patterns

Avoid

  • Resetting k inside the loop (you’ll repeat numbers)
  • Forgetting to update k after each row
  • Using document.write outside demos (prefer DOM APIs in apps)

Key Takeaways

1

Row i contains i numbers, taken from a consecutive range.

2

Odd rows print ascending; even rows print descending.

3

Compute row range using start = k and end = k + i - 1.

4

Update k to end + 1 to keep numbers continuous.

❓ Frequently Asked Questions

That’s the zigzag rule: reverse the printing direction on every second row to create a snake-like flow.
Yes—set k = 0. The pattern stays the same shape, just shifted by one.
For rows = n, total printed values are n(n+1)/2.
Yes—print a fixed number of columns per row and adjust the row ranges accordingly.

Explore More JavaScript Number Patterns!

Zigzag patterns are great practice for ranges and direction control. Next, try the same idea in a matrix.

All Number Patterns →
Did you know?

This zigzag triangle is a small version of the “snake order” idea often used to traverse grids in programming problems.

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Number Pattern 50 JavaScript Number Pattern 52