2つのタブを跨いで文字を置きたいです。

js
1$( '#attribute_function').after('<td class= attribute>1</td>');
2$( '#attribute_sub_function').after('<td class= attribute_sub>2</td>');

php
1<table id="tbl1">
2    <tr>
3    	<td style="visibility:hidden;"id="attribute_function">機能</td>
4    </tr>
5    <tr>
6    	<td style="visibility:hidden;"id="attribute_sub_function">機能</td>
7    </tr>
8</table>

現在、シナリオという文字の上に1,2という数字がありますが、これを
シナリオとカテゴリという2つのタブを跨いで、シナリオとカテゴリという文字の上に1,2という文字を置きたいです。
js側でを使って以下のようにしてみたのですが、うまくいきません。
$( '#attribute_function').after('<td class= attribute>1</td> ');

行動規範の内容に同意します

回答2件

ベストアンサー

質問者さんのイメージに合っているか分かりませんが、 colspan はどうでしょうか？

js
1$('#attribute_function').after('<td colspan="2" class="attribute">1</td>');
2$('#attribute_sub_function').after('<td colspan="2" class="attribute_sub">2</td>');

投稿2021/03/25 03:31

shinoharat

総合スコア1680

こんな感じでよろしいですかね？
列の長さ分のspanを取得して、それを置くようにします。

html
1<script>
2	$(function(){
3		let len = $('.main').find('td').not(':first').length;
4		let attr = [
5		'<td class="attribute" colspan="'+len+'">1</td>',
6		'<td class="attribute_sub" colspan="'+len+'">2</td>',
7		];
8		$( '#attribute_function').after(attr[0]);
9		$( '#attribute_sub_function').after(attr[1]);
10	})
11</script>
12
13</head>
14<body>
15<table id="tbl1" border="1">
16    <tr>
17        <td id="attribute_function">機能</td>
18    </tr>
19    <tr>
20        <td id="attribute_sub_function">機能</td>
21    </tr>
22		<tr class="main">
23        <td id="attribute_sub_function">機能</td>
24        <td id="attribute_sub_function">シナリオ</td>
25        <td id="attribute_sub_function">カテゴリ</td></td>
26		</tr>
27</table>   
28<body>
29
30