Question 14939 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to space out my colspan in JavaScript – Jquery

I’m creating a calendar using JavaScript, and encountered an issue with spacing out my "previous" and "next" arrow keys. Currently one sits on top of the other on the left side of the calendar, whereas I need them on either ends of the calendar. I’m only learning and I cannot see what I did wrong.

This is a piece of my code regarding the setting up of the calendar and the buttons. I’m supposed to be using jQuery too!

//Generate tabular calendar
var table = $("<table>");
var tableRow = $("<tr>");
var tableCell = $("<td>");

// Create a Button
var prevMonth = $("<button>");
prevMonth.attr("value","Previous Month").text("<<");
prevMonth.click(function() { // Function for clicking previous month button
  cal.display(new Date(displayDate.getFullYear(), (displayDate.getMonth() - 1)));
}); 
tableCell.append(prevMonth);
tableRow.append(tableCell);

let tableCellColSpan = $("<td>"); // Spacing out the nav buttons
tableCellColSpan.attr("colspan","5"); // I think the issue is here somewhere 
tableCell.append(tableCellColSpan);

// Create Button + Button Event Handler
nextMonth = $("<button>");
nextMonth.attr("value","Next Month").text(">>");
nextMonth.click(nextNav); 
function nextNav() { // Function for clicking next month button
cal.display(new Date(displayDate.getFullYear(), (displayDate.getMonth() + 1)));
};
tableCell.append(nextMonth);
tableRow.append(tableCell);
table.append(tableRow);

What the arrows look like right now
[What the arrows look like right now]

Tags:

2

Answers


  1. 0

    One easy way is just give each button a class. Then have the previous button float left and the next button float right.

    .prev {
  float: left;
}

.next {
  float: right;
}

table {
  width: 100%
}
    <table>
  <tr>
    <td>
      <button class="prev">&lt;&lt;</button>
      <button class="next">&gt;&gt;</button>
    </td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    Your problem is more CSS than JavaScript, If you seek help with JavaScript, post the code that defines the method display() as well as a link to the documentation of the plugin you are using.

    • In the <thead> add an empty <th> to the beginning and to the end of <tr>
    • In the <tbody> add an empty <td> to the beginning and to the end of the first <tr>
    • Add rowspan=5 to the first <td> and to the last <td> of <tbody>
    • Then add a <button> to each <td rowspan=5>

    The following example is a CSS sokution.

    :root {
  font: 300 5vmin/1 "Segoe UI"
}

table {
  table-layout: fixed;
  width: 30rem;
  margin: 1.5rem auto;
  border: 2px ridge lightgrey
}

caption {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

th {
  width: 13%
}

th:first-of-type,
th:last-of-type {
  width: 4.5%;
  border: 0;
}

tbody tr:first-of-type td:first-of-type,
tbody tr:first-of-type td:last-of-type {
  padding: 0.5rem 0.1rem;
}

button {
  display: block;
  min-height: 4rem;
  margin: auto 0;
  padding: 0 0 0.65rem;
  border: 0;
  font: inherit;
  font-size: 2rem;
  background: none;
  cursor: pointer;
  transform: scale(2, 4);
}

th,
td {
  border: 1px solid lightgrey
}

td::before {
  content: "";
  display: block;
  width: 0;
  min-height: 2rem;
}
    <main>
  <table id="calandar">
    <caption>
      <time id="month">December</time>,&nbsp;
      <time id="year">2022</time>
    </caption>
    <thead>
      <tr>
        <th>&nbsp;</th><th>SUN</th><th>MON</th>
        <th>TUE</th><th>WED</th><th>THU</th>
        <th>FRI</th><th>SAT</th><th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr><td rowspan="5"><button>🞀</button></td>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td>
      <td rowspan="5"><button>🞂</button></td></tr>
      <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td></tr>
      <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td></tr>
      <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td></tr>
      <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      <td>&nbsp;</td></tr>
    </tbody>
  </table>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search