Javascript 使用切换显示表格数据

我有两个像这样的锚

所以当我点击“数据英寸”中的数据时，属性应该显示在里面，当CM点击数据时，cms属性应该显示在里面

我有一个如下所示的HTML表

<table>
    <tr>
        <td data-inches="32" data-cms="80.6"></td>
        <td data-inches="32.5" data-cms="82.6"></td>
    </tr>
    <tr>
        <td data-inches="33" data-cms="84.6"></td>
        <td data-inches="34" data-cms="87"></td>
    </tr>
</table>

---

我想使用英寸和厘米的切换功能显示

中的数据，因此，当我单击英寸或厘米按钮时，每个属性中的数据都应显示为给定值。

单击按钮链接时，您可以检查文本，并根据文本获取属性值并设置每个td元素的文本

演示：

$（'.inches，.cm'）。单击（函数（）{
//获取单击元素的文本
var text=$（this.text（）.trim（）；
var attrSel；
//根据文本设置属性
如果（文本=='IN'）{
attrSel=‘数据英寸’；
}
否则{
attrSel=‘数据cms’；
}
//每个td的循环t
$（'td'）。每个（函数（）{
//使用选定的属性值设置td的文本
$（this.text（$（this.attr（attrSel））；
});
});
单击按钮链接，您可以检查文本，并根据文本获取属性值并设置每个td元素的文本

演示：


$（'.inches，.cm'）。单击（函数（）{
//获取单击元素的文本
var text=$（this.text（）.trim（）；
var attrSel；
//根据文本设置属性
如果（文本=='IN'）{
attrSel=‘数据英寸’；
}
否则{
attrSel=‘数据cms’；
}
//每个td的循环t
$（'td'）。每个（函数（）{
//使用选定的属性值设置td的文本
$（this.text（$（this.attr（attrSel））；
});
});


$（“a.inches”）。在（“单击”，函数（）上）{
切换值（“英寸”）；
});
$（“a.cm”）。在（“单击”，函数（）{
切换值（“cms”）；
});
函数切换值（类型）{//切换函数
类型=类型| |“cms”//如果未指定类型-->类型=cms
var$cells=$（“td”）；//获取所有单元格
$.each（$cells，function（）{//循环遍历单元格
$（this.text（$（this.data（type））；//从数据属性设置值
});
};
切换值（）//初始值


$（“a.inches”）。在（“单击”，函数（）上）{
切换值（“英寸”）；
});
$（“a.cm”）。在（“单击”，函数（）{
切换值（“cms”）；
});
函数切换值（类型）{//切换函数
类型=类型| |“cms”//如果未指定类型-->类型=cms
var$cells=$（“td”）；//获取所有单元格
$.each（$cells，function（）{//循环遍历单元格
$（this.text（$（this.data（type））；//从数据属性设置值
});
};
切换值（）//初始值
单击各个表格单元格（这是我最初解释问题的方式）


document.querySelectorAll（'table#data td'）.forEach（td=>{
td.textContent=td.dataset.inches；
td.addEventListener（'click'，函数（e）{
this.textContent=Number（this.dataset.state）==1？this.dataset.cms:this.dataset.inches；
this.dataset.state=1-Number（this.dataset.state）
});
})
td{padding:1rem}
单击各个表格单元格（这是我最初解释问题的方式）


document.querySelectorAll（'table#data td'）.forEach（td=>{
td.textContent=td.dataset.inches；
td.addEventListener（'click'，函数（e）{
this.textContent=Number（this.dataset.state）==1？this.dataset.cms:this.dataset.inches；
this.dataset.state=1-Number（this.dataset.state）
});
})
td{padding:1rem}

你能添加你的Javascript吗？你说的按钮数据应该在每个属性中显示是什么意思？我已经创建了两个锚，比如
，所以当我点击
'data-inches'中的数据时，
属性应该显示在
中，当CM点击
数据时，属性应该显示在
中
@ishaq请注意，您正在用
关闭
。请告诉我们你试过什么。请记住，StackOverflow不是一个编码服务。@Carsten Løvbo Andersen这是一个我编辑过的打字错误。你能添加你的Javascript吗？按钮数据的含义是什么？每个属性中都应该显示为给定的值。我创建了两个锚，如
，所以当我从
中单击数据时，“data-inches”
属性应该显示出来在
内部，当CM单击
数据时，cms
属性的数据应显示在
@ishaq内部。请注意，您正在用
关闭
。请告诉我们你试过什么。请记住StackOverflow不是一个编码服务。@Carsten Løvbo Andersen那是一个打字错误，我已经编辑过了
jQuery(document).ready(function(){
        jQuery('a').on('click',function(e){
            e.preventDefault();
            if(jQuery(this).attr('class') == 'inches'){                
                jQuery('table tr td').each(function(){
                    jQuery(this).text(jQuery(this).attr('data-inches'));    
                });
            }else{
                jQuery('table tr td').each(function(){
                    jQuery(this).text(jQuery(this).attr('data-cms'));    
                })
            }
        })
    });