如何用jQuery查找表格中含padding样式的td元素并设置新值

正确的查找方法 #

你之前的写法问题出在选择器逻辑和语法上，以下是两种可靠的查找方式：

1. 属性包含选择器（简单直接）

如果只需要找内联style属性里包含"padding"字符串的td（不管是padding:10px还是padding-left:5px这类写法），用属性包含选择器*=即可：

const targetTDs = $(Table).find('td[style*="padding"]');

这个选择器会匹配所有style属性中含有"padding"的td，能覆盖大多数场景。

2. 精准过滤（按需选择）

如果需要更精准的匹配（比如只找设置了padding缩写属性，而非单方向的padding-top等），可以用filter()方法做自定义判断：

const targetTDs = $(Table).find('td').filter(function() {
  // 仅匹配内联style里明确写了"padding:"的td
  return $(this).attr('style')?.includes('padding:');
});

如果想包含所有通过CSS类、内联样式设置过padding的td（不只是内联），可以基于计算样式判断：

const targetTDs = $(Table).find('td').filter(function() {
  const computedPad = window.getComputedStyle(this).padding;
  // 默认padding通常是0px，非默认值即为已设置过padding的元素
  return computedPad !== '0px';
});

修改padding值的正确方式 #

找到目标td后，直接用jQuery的.css()方法设置合法的padding值即可，注意不要用*这种无效值，需要带单位（px/em等）或使用合法关键字：

• 给所有匹配的td设置统一padding：

targetTDs.css('padding', '8px 12px'); // 上下8px，左右12px

• 给单个匹配的td设置（比如第2个匹配元素，注意用.eq()而非原生数组下标）：

targetTDs.eq(1).css('padding', '5px'); // 给第2个元素设置全方向5px padding

你之前写法的问题说明 #

1. $(Table).find('td[style="padding:*"]')：

   • 用了精确属性匹配=，但实际td的style里可能还有其他样式（比如border:1px solid），无法匹配；
   • *在这里不是通配符，属性选择器中要表示"包含"需要用*=，而非直接写在属性值里。

2. $(Table).find('td[style]')[1].css({"padding": "*"})：

   • [1]取出的是原生DOM元素，不能直接调用jQuery的.css()方法，应该用.eq(1)来获取jQuery对象；
   • padding: "*"是无效的CSS值，padding需要具体的长度或百分比。

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