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() // 获取数据完了生成了节点之后才能获取到元素
    },
  • 相关阅读:
    jQuery的deferred对象详解
    MySQL主从复制与读写分离
    MySQL和MongoDB的性能测试
    MongoDB与MySQL的插入性能测试【转】
    mongodb+php通过_id查询
    MongoDB资料汇总专题
    mongodb常用命令
    【Mongodb教程 第十九课 】PHP与MONGODB的条件查询
    【Mongodb教程 第十八课 】MongoDB常用命令 数据库命令 集合操作命令
    mongoVUE 破解方法
  • 原文地址:https://www.cnblogs.com/wgl0126/p/10998745.html
Copyright © 2011-2022 走看看