ASP.Net登录表单：通过输入框ID查找相邻TD并添加带图标Span

嘿，这个需求其实不难搞定，咱们分两种常用的方式来实现——用jQuery或者原生JavaScript，看你项目里用哪种更顺手：

假设你的输入框ID是txtUsername，咱们可以先定位到输入框，再找到它所在的<td>，最后定位到相邻的<td>来添加带图标的<span>：

示例代码（添加到右侧相邻<td>） #

// 等DOM加载完成再执行
$(document).ready(function() {
    // 1. 通过ID选中输入框，找到它的父级<td>
    const $inputTd = $('#txtUsername').closest('td');
    // 2. 获取当前<td>的右侧相邻<td>（如果要左侧就换成.prev()）
    const $targetTd = $inputTd.next();
    // 3. 创建带图标的span，这里用Font Awesome图标举例，你可以替换成自己的图标类
    const $iconSpan = $('<span class="fa fa-user" aria-hidden="true"></span>');
    // 4. 把span添加到目标<td>里
    $targetTd.append($iconSpan);
});

如果项目里没引入jQuery，用原生JS也能轻松搞定，逻辑和上面一致：

示例代码（添加到右侧相邻<td>） #

// 等DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
    // 1. 通过ID获取输入框元素
    const inputElement = document.getElementById('txtUsername');
    // 2. 找到输入框所在的父级<td>
    const parentTd = inputElement.parentElement;
    // 3. 获取右侧相邻的<td>（要左侧就换成previousElementSibling）
    const targetTd = parentTd.nextElementSibling;
    // 4. 创建span元素并设置图标类
    const iconSpan = document.createElement('span');
    iconSpan.className = 'fa fa-user';
    iconSpan.setAttribute('aria-hidden', 'true');
    // 5. 将span添加到目标<td>中
    targetTd.appendChild(iconSpan);
});

小提示 #

• 如果你要往**左侧相邻的<td>**添加元素，只需要把代码里的next()（jQuery）或者nextElementSibling（原生JS）换成prev()或者previousElementSibling就行。
• 图标类要根据你项目里用的图标库来替换，比如如果是Bootstrap Icons，就换成bi bi-person这类的类名。
• 一定要确保代码在DOM加载完成后执行，不然会找不到元素哦～

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