代码之家 › 专栏 › 技术社区 › BobbyJones

如何使用jQuery选择相邻的表单元格

dom jquery

BobbyJones · 技术社区 · 7 年前

我真的需要你的帮助,

如何从选择框中选择相邻的表格单元格并插入一些文本?

下面的代码似乎没有像我想象的那样工作,从类名为的引用点开始。选择box,也许有更好的方法,所以我愿意接受建议。

$('#fin-code-alot').closest('.selectbox').next().html('test')

以下是层次结构/标记:

<table>
    <tr>
        <td>Allotment:</td>
        <td>
            <div class="selectbox">
                <div class="selectric-selectbox">
                <select id="fin-code-alot" class="custom-options">
                    <option value="">&nbsp;</option>
                    <option value="120">120</option>
                    <option value="12D">12D</option>            
                </select>
                </div>
            </div>
        </td>
        <td>Put Some Text Here</td>
        <td></td>
    </tr>
</table>

2 回复 | 直到 7 年前

connexo 7 年前

.selectbox 没有 next() ,您需要使用 closest('td') :

$('#fin-code-alot').closest('td').next().text('test')

rink.attendant.6 7 年前

您的代码仅选择 <div class="selectbox"> 元素,它没有下一个同级。

您需要选择 closest 表格单元格及其 next 兄弟姐妹:

$('#fin-code-alot').closest('td').next('td').text('test')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Allotment:</td>
        <td>
            <div class="selectbox">
                <div class="selectric-selectbox">
                <select id="fin-code-alot" class="custom-options">
                    <option value="">&nbsp;</option>
                    <option value="120">120</option>
                    <option value="12D">12D</option>            
                </select>
                </div>
            </div>
        </td>
        <td>Put Some Text Here</td>
        <td></td>
    </tr>
</table>

此外,我建议使用更安全的 .text() 方法,如果仅插入文本,而不是 .html() . 当然,如果需要插入HTML内容,则需要使用后者。

推荐文章

Robo Robok · 为什么我无法使用Dom\HTMLDocument搜索标签?

9 月前

Y-jiji · 调整大小时替换了假选择

10 月前

LLScheme · 无法使用Playwright&Pyppeteer找到关键字

11 月前

Konrad Viltersten · 无法修改ViewContainerRef的内部内容,只能在Angular中添加标签

12 月前

Eric G · 如何将svg文本元素垂直居中?

1 年前

Nail Val · 当条件通过时,If语句不显示console.log,并按意外情况继续工作

1 年前

Juan Lanus · 如何获取对所选内容的DOM元素的引用

1 年前

huz3y · addEventListener不适用于从javascript添加的新类所选的元素

1 年前

Toby Hogan · 元素React状态更改后未在DOM中更新

1 年前

user23745914 · 能够访问javascript中的dom元素,而无需显式定义查询选择器

1 年前