如何获取单个表格行日期索引属性索引，以便我可以提取其单元格的值? [英] How to get individual table row date-index attribute indices so I can pull the value of its cells?

查看：13
本文介绍了如何获取单个表格行日期索引属性索引，以便我可以提取其单元格的值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Bootstrap Table 集成来创建一个包含来自我的 ajax get 请求的数据的表.表格插件根据您的数据动态生成带有 和 的 .我需要能够使用各自的 <td> 值获取单独的 <tr> 值，以便在另一个 ajax 调用中使用.

我目前有这个点击事件.
让数据 = []$("#table").on("click", function (id) {const $ths = $(this).find("tr")$.each($ths, function () {data.push($(this).text().trim())})控制台日志(数据)})
现在这将获得所有 <td> 值，就像这样.
<预><代码>[ACB"，1540"，0784"，E"，ACB"，1559"，0784"，E"，ACB"，《2095》，0784"，一个"，ADH"，1075"，0347"，E"，ADH"，0001"，0347"，S"，ADH"，0001"，0347"，一个"，ADH"，1076"，0347"，E"，AHG"，2135"，0657"，W"，AHG"，1037"，0657"，E"，AHG"，2101"，0657"，A"]
我只需要能够获取一个 
 值并将它们单独推送到数据数组中，如下例所示.如何从 <tr> 上的 data-index 属性获取索引以获取单个数据并将其推送到数据数组中?非常感谢任何建议！
<预><代码>[ACB"，1540"，0784"，E"][ACB"，1559"，0784"，E"][ACB"，《2095》，0784"，A"][ADH"，1075"，0347"，E"][ADH"，0001"，0347"，S"]
 解决方案 
你的意思是 - 每点击一个 TR 的单元格
$("#table tbody tr").on("click", function() {const data = $('td',this).map(function() {返回 $(this).text().trim();}).得到()控制台日志(数据)})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr data-index="0"><td>ACB</td><td>1540</td><td>0784</td><td>E</td></tr><tr data-index="1"><td>ACB</td><td>1559</td><td>0784</td><td>E</td></tr><tr data-index="2"><td>ACB</td><td>2095</td><td>0784</td><td>A</td></tr><tr data-index="3"><td>ADH</td><td>0001</td><td>0347</td><td>S</td></tr><tr data-index="4"><td>ADH</td><td>1075</td><td>0347</td><td>E</td></tr><tr data-index="5"><td>ADH</td><td>0001</td><td>0347</td><td>A</td></tr><tr data-index="6"><td>ADH</td><td>1076</td><td>0347</td><td>E</td></tr><tr data-index="7"><td>AHG</td><td>2136</td><td>0657</td><td>W</td></tr><tr data-index="8"><td>AHG</td><td>1037</td><td>0657</td><td>E</td></tr><tr data-index="9"><td>AHG</td><td>I013</td><td>0657</td><td>W</td></tr></tbody></table>
或者这个 - 获取整个表格的每个 TR 的所有单元格
const data = []$("#table").on("click", function() {$('tr',this).each(function() {data.push($(this).find("td").map(function(){ return $(this).text().trim() }).get());})控制台日志(数据)})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr data-index="0"><td>ACB</td><td>1540</td><td>0784</td><td>E</td></tr><tr data-index="1"><td>ACB</td><td>1559</td><td>0784</td><td>E</td></tr><tr data-index="2"><td>ACB</td><td>2095</td><td>0784</td><td>A</td></tr><tr data-index="3"><td>ADH</td><td>0001</td><td>0347</td><td>S</td></tr><tr data-index="4"><td>ADH</td><td>1075</td><td>0347</td><td>E</td></tr><tr data-index="5"><td>ADH</td><td>0001</td><td>0347</td><td>A</td></tr><tr data-index="6"><td>ADH</td><td>1076</td><td>0347</td><td>E</td></tr><tr data-index="7"><td>AHG</td><td>2136</td><td>0657</td><td>W</td></tr><tr data-index="8"><td>AHG</td><td>1037</td><td>0657</td><td>E</td></tr><tr data-index="9"><td>AHG</td><td>I013</td><td>0657</td><td>W</td></tr></tbody></table>
I'm using the Bootstrap Table integration to create a table with data from my ajax get request.
The table plugin dynamically generates a <tbody> with <tr> and <td> based on your data. I need to be able to get the individual <tr> with their respective <td> values to use in another ajax call.
<table id="table>
<tbody>
   <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
   </tr>
   <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
   </tr>
   <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
   </tr>
   <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
   </tr>
   <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
   </tr>
   <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
   </tr>
</tbody>
</table>

I have this on click event currently.
let data = []

$("#table").on("click", function (id) {
    
        const $ths = $(this).find("tr")
        $.each($ths, function () {
            data.push($(this).text().trim())
        })
        console.log(data)
    })


Right now this will get all the <td> values, like this.
[
    "ACB",
    "1540",
    "0784",
    "E",
    "ACB",
    "1559",
    "0784",
    "E",
    "ACB",
    "2095",
    "0784",
    "A",
    "ADH",
    "1075",
    "0347",
    "E",
    "ADH",
    "0001",
    "0347",
    "S",
    "ADH",
    "0001",
    "0347",
    "A",
    "ADH",
    "1076",
    "0347",
    "E",
    "AHG",
    "2135",
    "0657",
    "W",
    "AHG",
    "1037",
    "0657",
    "E",
    "AHG",
    "2101",
    "0657",
    "A"
]

I need to be able to get only one <tr> value and push them into the data array individually like the example below. How can I get the index from the data-index attribute on the  <tr> to get the individual data and push that into the data array? Any advice is greatly appreciated!
[
    "ACB",
    "1540",
    "0784",
    "E"
]
[
    "ACB",
    "1559",
    "0784",
    "E"
]
[
    "ACB",
    "2095",
    "0784",
    "A"
]
[
    "ADH",
    "1075",
    "0347",
    "E"
]
[
    "ADH",
    "0001",
    "0347",
    "S"
]



 解决方案 
You mean this - cells per TR clicked




$("#table tbody tr").on("click", function() {
  const data = $('td',this).map(function() { 
      return $(this).text().trim();
  }).get()
  console.log(data)
})


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
  <tbody>
    <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
    </tr>
    <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
    </tr>
    <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
    </tr>
    <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
    </tr>
    <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
    </tr>
    <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
    </tr>
  </tbody>
</table>






Or this  - get ALL cells per TR for the whole table




const data = []
$("#table").on("click", function() {
  $('tr',this).each(function() { 
      data.push($(this).find("td").map(function(){ return $(this).text().trim() }).get());
  })
  console.log(data)
})


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
  <tbody>
    <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
    </tr>
    <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
    </tr>
    <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
    </tr>
    <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
    </tr>
    <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
    </tr>
    <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
    </tr>
  </tbody>
</table>






这篇关于如何获取单个表格行日期索引属性索引，以便我可以提取其单元格的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        查看全文
                    

                            
                        

            



        

            
相关文章

            
        

            



        

        

            
前端开发最新文章

            
        

        

            

                热门教程
            

            
        

        

            

                热门工具
            

            
        

        
    

    

        

            登录
            关闭
        

        

            

                扫码关注1秒登录
            

            

                
            

            

                
                
            

            

                发送“验证码”获取
                |
                15天全站免登陆
            

            

        

    



    

		

			友情链接：
            IT屋
            Chrome插件
            谷歌浏览器插件
        

        

            IT屋
            ©2016-2022 琼ICP备2021000895号-1
            站点地图
            站点标签
            SiteMap
            <免责申明>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.