前端需求实现，表单对比高亮展示（求精进思路）

最新推荐文章于 2024-09-13 01:49:35 发布

没头脑就很快乐

最新推荐文章于 2024-09-13 01:49:35 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/qq_47522010/article/details/132403278

前端需求实现，表单对比高亮展示

前置条件：两个不同接口的数据对比，由后端返回有变化的字段数组，前端进行对应字段的高亮展示。
本人解决方案：采用js获取对应dom，对表单进行遍历，将后端返回值对应上字段的差异化进行展示。
最终实现代码如下：

 //是否高亮展示
  const isHighLight = () => {
   
   
    const inputForm = document
      .querySelector("当前表单页的标识")?.getElementsByTagName("input");
    diffFields?.forEach((item: string) => {
   
   
    //HTMLSelectElement.namedItem（）返回指定名称匹配的html
      const inputFormItem = inputForm!.namedItem(item);
      // 选择框处理
      if (lastOpen) {
   
   
        if (inputFormItem!.getAttribute("type") === "search") {
   
   
          const selectFormItem: any =
            inputFormItem!.parentElement!.nextElementSibling;
          selectFormItem!.style.color = "red";
        }
        inputFormItem!.style.color = "red";
      } else {
   
   
        if