Question

我在表中有一行，该行的开头有96个单元格。

每行都可以通过以下功能单击

$("#table tr").click(function(){});

现在，通过从0到96取值，我需要将td放在X位置并对其进行colspan。

在表单中，我得到40，我需要在点击的行的第40个colspan上放置td。

如何在JavaScript或jQuery中实现类似的功能？

谢谢皮特的评论我已经知道如何td来更改属性，现在的问题是如果我colspan表格的单元格变形为在屏幕上

Answer 1

您可以使用jQuery选择器:eq()通过prop()方法获得所需的位置，该方法将设置colspan属性，例如：

$("#table tr").click(function() {
  let position = 5;
  let colspan = 2;

  $(`td:eq(${position-1})`, this).prop('colspan', colspan);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>

  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>

  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

Answer 2

您可以尝试类似的方法。您需要先添加colspan属性，然后再删除最后一个单元格，如下所示：

            $(document).ready(function(){            
                $("#tables tr").click(function() {
                    let position = 2;
                    let colspan = 2;

                    $(`td:eq(${position-1})`, this).prop('colspan', colspan);
                    $(`td:eq(${position+colspan})`, this).nextAll().remove();

                });
            });

希望它对您有帮助;）

如何通过表格单元格的位置引用表格？

2 个答案: