JS 中的 Html 拼接

本文介绍了一种使用HTML构建表格的方法,其中包括如何动态地为每个表格行填充部门名称、区域名称等信息,并通过Ajax请求获取用户角色名称来进一步丰富表格内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html += '<tr>' +
    '<td>' + deparmentName + '</td>' +
    '<td>' + pianquName + '</td>' +
    '<td>' + regionName + '</td>' +
    '<td>' + orderTypeName + '</td>' +
    '<td>' + data[i].userName + '</td>'+
     '<td>' + userRoleName + '</td>'+
    /*'<td id=\'userRoleByUserIdSelf'+i+'\'>' + data[i].userId + '</td>' + */
    $.ajax({
        url: "../completionRate/getUserRoleName",
        type: "POST",
        data: {
            userId: data[i].userId
        },
        async:false,
        dataType: "json",
        success: function (userRole) {
            html += '<td>' + userRole + '</td>';
        }
    });
     html +='<td>' + data[i].selfStandOrderRemoveOld + '</td>' +
    '<td>' + data[i].selfStandIntimeFinishOrderPlanEndTime+ '</td>' +
 
    '<td>' + toNum((data[i].selfStandIntimeFinishOrderEndTime / data[i].selfStandOrderRemoveOld * 100).toFixed(2)) + "%"+ '</td>'+
'<tr>';
### 使用JavaScript动态生成或操作HTML元素 为了实现网页上的交互性和动态内容更新,可以利用JavaScript来创建、修改和删除DOM中的HTML元素。以下是几种常见的方法: #### 创建新元素并添加到文档中 通过`document.createElement()`函数可以在内存中创建一个新的HTML元素节点[^1]。 ```javascript // 创建一个<p>标签的新实例 let newParagraph = document.createElement('p'); newParagraph.textContent = '这是一个新的段落'; ``` 接着,使用`appendChild()`方法将这个新建的元素追加至页面内的某个现有容器内。 ```javascript // 将新段落附加到<body> document.body.appendChild(newParagraph); ``` #### 修改已有元素的内容或属性 除了新增外,还可以改变已存在于页面上的元素特性。比如更改文本内容、设置样式类名或是调整特定属性值等操作均能借助于JavaScript完成。 对于简单的文本替换而言,可直接访问目标对象的`.textContent`属性来进行赋值;而当涉及到更复杂的结构变动时,则推荐采用`.innerHTML`方式重写整个内部标记字符串。 ```javascript // 改变第一个<h1>标题的文字显示 document.querySelector('h1').textContent = '欢迎来到我的网站!'; ``` 另外,针对表单控件或其他具备特殊语义的角色(如链接地址),应当运用对应的setter/getter接口去读取/指定其专属参数。 ```javascript // 更新图片资源路径 document.getElementById('myImage').src = '/images/new-picture.jpg'; ``` #### 移除不再需要的组件 最后,在某些情况下可能希望彻底清除一部分布局片段。此时只需调用父级包裹层下的`.removeChild()`命令即可达成目的。 ```javascript // 删除ID为'oldElement'的那个div盒子 const oldDiv = document.getElementById('oldElement'); if (oldDiv.parentNode) { oldDiv.parentNode.removeChild(oldDiv); } ``` 上述技术共同构成了基于浏览器端脚本语言操控前端界面的基础手段之一,允许开发者灵活响应用户的输入行为以及异步加载远程数据后即时刷新视图呈现效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值