javascript - 表格行中的增量值

标签 javascript

如何在每行具有不同值的情况下增加表行中的值? 这就像一个日历。我已经声明了月份和年份,第一行是日期。所以第二行将从 2 开始,因为月份设置为 1,月份 + 日 - 1 + 1 = 2,它会一直到最后一个单元格,如 2、3、4、5、6。第三行将从 21-25 开始,因为我想对月+日+年份的最后两位数字求和 - 1+1+19。我设法找到了表格并进行了递增,但它向下而不是向右。

$('#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>

最佳答案

你的意思是这样的吗?我添加了一个 theadtbody 元素来轻松选择行。然后我拿走整个第一行,在这我拿走所有的单元格和文字。希望对您有所帮助。

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>

关于javascript - 表格行中的增量值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57852850/

相关文章:

javascript - 将缺失的键、值和数据添加到 json 对象

javascript - 在其他地方初始化 ('mymodule' 后调用 require 'mymodule' ) 是否正确?

javascript - jQuery 使用 data-src 更改 div 的值

javascript - 如何关闭文件夹的 fs.watch 监听器

javascript - 背景图像未显示在 iphone/平板电脑上

javascript - 动态下拉列表混合选项

javascript - 浏览器 F11 全屏未注册到 -webkit-full-screen 或 Javascript API

css - 交互式 map 在 IE7 中不起作用

javascript - 使用 CopyWebpackPlugin 如何将文件从 node_modules 复制到文件夹中而不创建 node_modules 文件夹

javascript - FullCalendar js 添加事件