使用jquery将值插入到特定索引处的表中

Question

我正在编写的代码面临一些挑战。我有多个选择标签(例如颜色、大小等(，您可以从中进行选择。从不同的选择标记中选择的每个值都插入到表中的td标记中。选择的标签可以随机评估，因此从下方的标题开始

大小

SN	颜色	数量

您可以在每个选择上使用data-属性来标识列索引，如：

<select data-col="1">

简单示例：

// just to add some option values
initDemo();

$('select').change(function(){
const tableCol = $(this).data('col'),
text = $(this).find(':selected').text()
$('tbody td').eq(tableCol).text(text);
});

function initDemo() {
const data = [
['Green', 'Red', 'Blue'],
['Large', 'Medium', 'Small'],
[1, 4, 10]
];
data.forEach((arr, i) => $('select').eq(i).append(arr.map(v => new Option(v, v))))
}

td{width:60px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Color :
<select data-col="1">
<option value=""></option>
</select>

Size :
<select data-col="2">
<option value=""></option>
</select>
Qty :
<select data-col="3">
<option value=""></option>
</select>
<hr/>
<table  border=1>
<thead>
<tr>
<th>SN</th>
<th>Color</th>
<th>Size</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>