如何使用jQuery的map函数输出填充表格第一行？

先给你理清楚你原有代码里的几个小问题：

• 你现在的代码遍历了所有表格行，但你要的是第一行，完全不用.each()遍历所有tr，直接定位到第一行就行；
• jQuery的map()回调参数顺序是(index, element)，你写反了；
• map()返回的是jQuery对象，要转成普通数组才能方便地逐个填充到td里。

下面给你几个实际场景的示例，你可以按需套用：

场景1：处理数组数据后填充第一行 #

假设你有一组原始数据，想用map()加工后填充到表格第一行的每个单元格：

先看表格结构：

<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>原有内容</td>
    <td>原有内容</td>
    <td>原有内容</td>
  </tr>
</table>

我们有数组const data = ['苹果', '香蕉', '橙子']，想用map()给每个元素加前缀「今日推荐：」，再填充到第一行：

// 1. 用map处理数据源，得到加工后的数组
const processedData = $.map(data, function(item, index) {
  return `今日推荐：${item}`;
});

// 2. 获取第一行的所有td
const firstRowTds = $('table tr:first td');

// 3. 把加工后的数据逐个塞进td
firstRowTds.each(function(index) {
  $(this).html(processedData[index]);
});

场景2：从页面元素提取数据，用map处理后填充 #

如果你是想从页面其他元素（比如一组.tag标签）提取内容，用map()处理后放到第一行：

// 提取.tag元素的文本，转成大写后存为数组（注意用.get()转成普通数组）
const tagData = $('.tag').map(function(index, element) {
  return $(element).text().toUpperCase();
}).get();

// 填充到第一行的td里
$('table tr:first td').each(function(index) {
  $(this).html(tagData[index]);
});

场景3：直接操作第一行的td（用map做遍历处理） #

如果你原本是想遍历第一行的每个td，用map()直接给每个td赋值，那可以简化成这样：

$('table tr:first td').map(function(index, element) {
  // 这里直接对当前td做操作，比如设置文本为列序号
  $(element).html(`第${index + 1}列`);
});

内容的提问来源于stack exchange，提问作者Curious