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

时间:2019-03-22 16:20:56

标签: javascript jquery

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

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

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

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

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

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

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

enter image description here

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

您可以尝试类似的方法。您需要先添加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();

                });
            });

希望它对您有帮助;)