精华内容
下载资源
问答
  • 现在要修改图中红框标注的属性“examiner”(原值为“2345”),设置为我们在Input标签里的onChange方法传进来的值。由于属性是state的某个属性对象中的、数组中的、对象中的、数组中的、对象的某个属性,(有点绕,...

    问题描述

    有如图所示对象:
    图片1
    现在要修改图中红框标注的属性“examiner”(原值为“2345”),设置为我们在Input标签里的onChange方法传进来的值。由于属性是state的某个属性对象中的、数组中的、对象中的、数组中的、对象的某个属性,(有点绕,看图应该可以看清层级关系),所以直接使用setState方法是不行的。

    解决方法

    思路: 先取原state的最顶层属性(要修改的属性包含于该最顶层属性之下)赋值给某个变量,再遍历该变量中的数组,当要改变的属性是该索引下的元素(或包含于该元素下),则判断是否到要修改的属性的父层,否则,是数组就继续遍历……直到满足条件,此时再调用setState将整个变量赋值给state即可。

    代码:

    render: (text, record, index) => (
      <Input
        value={record.examiner}
        onChange={e => {
          const tmpData = this.state.curData
          tmpData.tplData.map((item1, index1) => {
            if(index1 === this.state.curReviewIndex){
              item1.content.map((item2, index2) => {
                if(index2 === index){
                  item2.examiner = e.target.value
                  this.setState({
                    curData: tmpData
                  })
                  return 0
                }
                return 0
              })
            }
            return 0
          })
        }}
      />
    )
    
    展开全文
  • 动态修改HTML标签属性的两种方式

    千次阅读 2019-12-30 15:50:04
    一般来说,如果想要对HTML标签的属性进行动态修改,基本上都是通过JS的触发事件来实现的,这也就涉及到有关JS代码的编写,当然,其中也有两种编写方式:JS和JQuery,下面我来进行详细的案例分析一下: (一)通过JS...

           一般来说,如果想要对HTML标签的属性进行动态修改,基本上都是通过JS的触发事件来实现的,这也就涉及到有关JS代码的编写,当然,其中也有两种编写方式:JS和JQuery,下面我来进行详细的案例分析一下:

    (一)通过JS代码来动态修改属性:
    ①第一案例:

    //首先获取对应标签的对象
    var element = document.getElementById("需要修改的标签id值");
    //然后对该标签的属性进行设值,使用setAttribute("","")方法来实现,第一个参数是指属性值,
    //第二个参数指具体修改的值,如果标签原先有这个属性,则直接替换原来的值,否则重新添加一个新的属性给对应的标签
    element.setAttribute("属性名","具体修改的值");
    

    具体样例代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <meta charset="UTF-8">
      <title>test</title>
    </head> 
    <body>
    <div id="test"></div>
    </body>
    </html>
    <script type="text/javascript">
    		var element = document.getElementById("test");
    		element.setAttribute("name","test");
    </script>
    

           此时通过浏览器的控制台可以看到div标签多了一个name=“test” 的属性。具体结果如下:
    在这里插入图片描述
           当然此处之所以把JS部分放在最后,跟html代码的加载顺序有关,因为代码的加载都是从上往下执行的,如果我把代码放在头部标签处,会在浏览器控制台中提示错误,找不到该标签的属性。
           如果要删除该属性值,可以执行一下代码即可:

    var element = document.getElementById("需要修改的标签id值");
    element.removeAttribute("属性名");
    

           如果是比较熟练的,可以直接连写:

    //不需要再定义多一个变量
    document.getElementById("需要修改的标签id值").removeAttribute("属性名");
    

    ②第二个案例:
           如果要更换为触发事件来处理,可以把JS代码的定义放在头标签中,以点击事件为例子,具体代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <meta charset="UTF-8">
      <title>test</title>
      <script type="text/javascript">
      		function test(){
    			var element = document.getElementById("test");
    			element.setAttribute("name","test");
    		}
    		</script>
    </head> 
    <body>
    <input id="test" type="button" onClick="test();" value="测试">
    </body>
    </html>
    

           此时再放在前面也不会出错,因为test()函数是当按钮被点击的时候才会被触发并且去执行,此时整个页面的代码都已经加载完成。

    (二)通过JQuery来动态修改属性:
           在使用JQuery之前,我们需要引入JQuery相关的js文件才行,具体怎么去引入此处就不做解释,有需要的读者可以在评论区下留言,笔者再一一回复。
    具体格式:

    //获取id为test的标签对象并且设置它的属性值
    $("#test").attr("name","test");
    //获取class为test的标签对象并且设置它的属性值
    $(".test").attr("name","test");
    

           案例代码与JS差不多,只不过JQuery用起来更加简便一些,与上面例子的写的差不多一样,此处就不再做多余的内容添加。

    展开全文
  • 一、获取元素 1、getElementById( ’ ID名 ’ ); ==> 通过ID名来获取元素 ... // 打印元素时,是以对象的形式展示出来的 <div id="box"> hahaha </div> //获取对象 var box = docume...

    一、获取元素
    1、getElementById( ’ ID名 ’ ); ==> 通过ID名来获取元素
    参数:字符串类型的ID名。
    返回值:返回获取到的元素(在DOM中是个对象)。

    console.dir(变量名); // 打印元素时,是以对象的形式展示出来的
    
    <div id="box"> hahaha </div>
    //获取对象
    var box = document.getElementById('box');
    console.dir(box); // 可查看是否打印成功
    
    

    2、getElementsByTagNam( ’ 标签名 ’ ) ==> 可根据标签名来获取元素
    参数:字符串类型的标签名
    返回值:返回的是一个伪数组,伪数组里面储存着获取到的所有元素

    // 两种写法
    document.getElementsByTagName('标签名') //  => 范围太广,不够精确
    box.getElementsByTagName('标签名') //  => 从具体的某个容器中获取元素
    // 注意:box不是写死的,表示具体的某个容器
    

    二、注册事件
    事件:触发以及响应的机制

    // 事件的三要素:
    // 1、事件源:触发事件的元素
    // 2、事件名(事件类型):点击事件(click)、鼠标移入事件(mouseover)、鼠标移出事件(mouseout)
    // 3、事件处理程序:事件触发了要干啥 => 函数
    // 事件处理函数不会自己主动去执行,需要事件触发才会执行
    
    // 注册事件语法:事件源.on + 事件名 = functio(){    } // +号是起拼起来的意思,不是要写一个+号,比如onclick(点击事件) 
    

    三、修改标签的属性

    // class在js中属于关键字,不能用来表示类名,在js中表示类名使用className,标签中还是使用class
    

    四、事件中的this

    // 当在事件中表示当前元素的时候,可以使用this
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      //给 btn注册的事件,因此this表示btn
      this.value = "哈哈";
    }
    

    五、阻止a标签跳转

    // 对于a标签来说,默认的行为就是进行页面跳转,如果不想让a标签进行跳转,可以在注册事件中使用return false
    var link = document.getElementById("link");
    link.onclick = function() {
      alert("呵呵");
      //阻止页面跳转
      return false;
    }
    

    六、操作文本内容

    // innerText 属性 => 内部文字 => 只获取文本,舍弃了标签 => 不能识别标签
    // innerHTML 属性 => 内部html => 获取标签和文本 => 可以识别标签
    // 推荐使用innerText 属性,比较安全
    
    展开全文
  • 以下是本人自己在使用struts标签来得到对象的值时的源代码:  学校列表    学校编号  学校名称  学校地址  增加学校  修改学校  删除学

    以下是本人自己在使用struts标签来得到对象的值时的源代码:

    <table border="1" style="width:600px;height:400px;">

                 <tr><td colspan="6" align="center">学校列表</td></tr>
                 <tr>
                    <td align="center">学校编号</td>
                    <td align="center">学校名称</td>
                    <td align="center">学校地址</td>
                    <td align="center">增加学校</td>
                    <td align="center">修改学校</td>
                    <td align="center">删除学校</td>
                 </tr>
                <s:iterator var="school" value="list">
                            <tr>
                                    <td align="center">${school.scode }</td>
                                    <td align="center">${school.sname }</td>
                                    <td align="center">${school.saddress }</td>
                                    <s:hidden name="id" value="%{#school.id}"></s:hidden>
                                    <td align="center"><a href="register.jsp"><img src="images/add.png" /></a></td>    
                                    <td align="center"><a href="school_selectbyid.action?id=${school.id}"><img src="images/edit.png" /></a></td>    
                                    <td align="center"><a href="school_delete.action?id=${school.id}" οnclick="javascript:alert('你真的要删除吗?')"><img src="images/delete.png" /></a></td>                
                            </tr>
                </s:iterator>  
                <tr><td colspan="6" align="center"><a href="index.jsp">返回</td></tr>

                  </table>


              在该源代码<s:iterator var="school" value="list">标签中的value为由相应的dao类封装好的List<School> list对象 ,var的作用是使用school这个名称来代替list对象来进行迭代。

             在<td></td>标签当中使用${school.scode }为EL表达式,效果相当于school.getScode()方法。此外在href当中需要动态添加对象的参数时使用EL表达式。而当我们需要在具有value属性的标签中动态添加值的时候,则需要使用OGNL表达式。%{#school.id},当中的#符号表示在ActionContext当中取值,此时需要区分ValueStack和ActionContext的不同作用范围。

    展开全文
  • 最近在做tms管理系统(物流管理软件),遇到这样一个场景:运单对应多个货物信息(我们这里只对应3个货物信息,但大部分情况下,只有1个货物信息),我需要编辑也就是修改该运单,那么带出该运单一对多货物信息,如下...
  • 一、获取和修改元素间内容(3种)  1.innerHTML获得/设置元素开始标签和结束标签之间html原文  固定套路:1.删除父元素下所有子元素:parent.innerHTML="";  2.批量替换父元素下所有子元素:parent....
  • 用JavaScript修改HTML标签属性

    千次阅读 2013-01-25 10:21:39
    从 JavaScript 的观点来看,网页上的每个 HTML 标签都是一个 DOM 对象,标签的属性也是 DOM 对象的属性。如: 从 JavaScript 的观点来看,这个 标签是一个 Image 对象,它是 DOM 对象的一种。它的 id、src、...
  • 在使用Editor(所见即所得编辑器)时候,有时候可能会碰到需要在后台修改编辑器内容,而且这些内容还都是HTML格式数据,这个时候如果需要定位到某个标签的话就比较困难,毕竟是后台语言,不像前端js一样可以在...
  • 修改元素内容和属性】 1.元素内容 - innerHTML:获取 / 设置 元素开始标签和结束标签html内容; 使用固定套路: 1.删除父元素下所有子元素:parent.innerHTML=""; 1.替换父元素下所有子元素:...
  • Goodsinfo.java ``` package ssh2.jxc.wjr.vo; ...import java.util.HashSet;... * Goodsinfo entity.... * Goodsclassinfo entity.... * Goodsinfo entities.... * can be augmented to handle user-managed Spring ...
  • 用JS修改标签的 class 属性值: class 属性是在标签上引用样式表方法之一,它值是一个样式表选择符,如果改变了 class 属性的值,标签所引用样式表也就更换了,所以这属于第一种修改方法。 更改一个标签 ...
  • 移动元素,在changepic直接传入dom对象,在move_to函数中直接修改传入的dom对象的属性,但是修改完属性之后页面中的元素不生效,找了半天也没找到原因,希望能有人帮我一下啊! js代码: ``` /*********...
  • Qt中使用DOM对XML文件的标签属性进行修改 QT中对于XML文件读写两种方式:DOM和SAX,两种方法具体介绍如下: 1. 用于读取和操作 XML 文件标准是文档对象模型DOM。 优点:DOM为XML文档已解析版本定义了...
  • Beautiful Soup 提供一些简单、python 式函数用来处理导航、搜索、修改分析树等功能。它是一个工具箱,通过解析文档为用户提供需要抓取数据,因为简单,所以不需要多少代码就可以写出一个完整应用程序。 ...
  • 标签、元素、属性的区别

    千次阅读 2019-04-12 18:00:58
    标签、元素、属性的区别 标签:就是一个标签。 元素:整个是一个对象,包含他内容,这个对象就是一个元素。...属性:元素可以访问,可以修改的东西。通俗说就是元素除去标签剩下都可以称之为属性。 ...
  • 修改一个元素节点的属性 修改一个元素节点的属性很简单: 获得元素节点 元素对象.属性 = 值 举个例子:修改一个img标签的src属性 var img = document.getElementById("image"); img.src = "1.png"; 注意,img...
  • 对象方法:getElementsByTagName() 返回包含带有指定标签名称所有元素节点列表(集合/节点数组)。getElementsByClassName() 返回包含带有指定类名所有元素节点列表。appendChild()把新子节点添加到指定...
  • 本文,主要就是带大家熟悉条形码的属性,方便大家更快的完成标签的制作。1.在标签打印软件中,点击软件左侧的“绘制一维条码”按钮,在画布上绘制一个条形码对象,如图所示: 如果想要修改条形...
  • 一、cssText用于同时修改多条属性 <style> #box{ width:100px; height:100px; background-color: lightpink; } </style> <div id='box'></div> 通常指定什么修改什么 var box ...
  • 通常我们会将编程语言分为静态和动态。...当类或者对象的属性在需要增加的时候,对于不方便修改源码的情况下,我们可以选择动态的对其添加属性。 动态给对象添加属性 对象属性只在当前对象生效,在其...
  • 对象方法:getElementsByTagName() 返回包含带有指定标签名称所有元素节点列表(集合/节点数组)。getElementsByClassName() 返回包含带有指定类名所有元素节点列表。appendChild()把新子节点添加到指定...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,471
精华内容 588
关键字:

修改标签对象的属性