我在表中有一行,该行的开头有96个单元格。
每行都可以通过以下功能单击
$("#table tr").click(function(){});
现在,通过从0到96取值,我需要将td
放在X位置并对其进行colspan
。
在表单中,我得到40,我需要在点击的行的第40个colspan
上放置td
。
如何在JavaScript或jQuery中实现类似的功能?
谢谢皮特的评论我已经知道如何td
来更改属性,现在的问题是如果我colspan
表格的单元格变形为在屏幕上
答案 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();
});
});
希望它对您有帮助;)