zoukankan      html  css  js  c++  java
  • 原生js通过最外层id获取下面指定的子元素

    需求:在vue中使用v-for循环出来的元素,设置动态id,之后获取下面的所有textarea标签

    template:
    <table cellpadding = 2 v-for="(item, index) in arrData" :key="index" cellspacing = 0 :id="'table' + index">
      <thead>
        <tr>
          <th>本周计划</th>
          <th>本周实际完成</th>
          <th>开累情况</th>
          <th>计划完成情况分析</th>
          <th>存在的问题</th>
          <th>下周计划</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <textarea type="text" readonly='readonly' v-model="item.curWeekly.curweekplan"></textarea>
          </td>
          <td>
            <textarea type="text" readonly='readonly' v-model="item.curWeekly.actual_final" ></textarea>
          </td>
          <td>
            <textarea type="text" readonly='readonly' v-model="item.curWeekly.condition" ></textarea>
          </td>
          <td>
            <textarea type="text" readonly='readonly' v-model="item.curWeekly.analysis" ></textarea>
          </td>
          <td>
            <textarea type="text" readonly='readonly' v-model="item.curWeekly.problem" ></textarea>
          </td>
          <td>
            <textarea type="text" readonly='readonly' v-model="item.curWeekly.nextplan" ></textarea>
          </td>
        </tr>
      </tbody>
    </table>

    methods:

    // 设置高度
    getHeight () {
      let arr = this.arrData
      for (let i in arr) {
        let tableId = 'table' + i
        let parent = document.getElementById(tableId) // 获取父元素
        let textArea = parent.getElementsByTagName('textarea') // 获取父元素下面的所有textarea元素
        // 对子元素的操作
        console.log(textArea)
      }
    },

    creat中:

    async created () {
      await this.getData() // 先获取数据,使用异步机制
      this.getHeight() // 获取数据完了生成了节点之后才能获取到元素
    },
  • 相关阅读:
    Win10 JDK 配置
    Java Selenium
    Java Selenium
    Eclipse配置Github -分享你的代码
    TestNG-详解preserve-order的作用与测试case的执行顺序
    Java
    VirtualBox 在Win10上的蓝屏问题
    SQL _ Create Procedure
    LINQ 学习路程 -- 查询语法 LINQ Query Syntax
    LINQ 学习路程 -- 开篇
  • 原文地址:https://www.cnblogs.com/wgl0126/p/10998745.html
Copyright © 2011-2022 走看看