javascript 取table中内容

1,有如下表格,我们要取第2行第2列的值
<table  id="table1">
     <tr>
         <td>1行1列</td>
         <td>1行2列</td>
      </tr>
     <tr>
         <td>2行1列</td>
         <td>2行2列</td>
      </tr>
</table>
2,取值方法
    var value==window.table1.rows.item(0).cells.item(0).innerText;
注意:行号,列号是从  0 开始的
  例如 var value = window.table1.rows.item(1).cells.item(1).innerText;
  这就取到了第2行第2列的值
3.改进方法
   上面的方法,需要知道行号,实践中是不方便获得的,下面是改进的方法
<script language="javascript">
 var str;
</script>
  <table >
     <tr  onMouseDown="str=this.cells.item(0).innerText">
         <td>1行1列</td>
         <td>1行2列</td>
      </tr>
     <tr  onMouseDown="str=this.cells.item(0).innerText">
         <td>2行1列</td>
         <td>2行2列</td>
      </tr>
</table>
当鼠标按下时,我们就取到了该行第1列的值
<td  onMouseDown="str=this.innerText">2行1列</td>  
这可以取鼠标所在列的值
在Element UI中,如果你想获表格的最大行索引,可以通过以下几种方法实现: 1. **使用JavaScript的`length`属性**: 通过获表格数据的`length`属性,然后减1即可得到最大行索引。 2. **使用Element UI的`ref`属性**: 在表格组件上添加`ref`属性,然后在JavaScript中通过`this.$refs`获表格实例,再通过表格实例获数据长度。 以下是具体的代码示例: ### 方法一:使用JavaScript的`length`属性 ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] }; }, mounted() { const maxIndex = this.tableData.length - 1; console.log('最大行索引:', maxIndex); } }; </script> ``` ### 方法二:使用Element UI的`ref`属性 ```html <template> <el-table :data="tableData" ref="table" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] }; }, mounted() { const maxIndex = this.$refs.table.data.length - 1; console.log('最大行索引:', maxIndex); } }; </script> ``` 这两种方法都可以帮助你获表格的最大行索引,具体选择哪种方法可以根据你的实际需求和代码结构来决定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值