Question

我尝试过这段代码，但是在调试测试中，未定义与表标记关联的属性，因此表的属性是否支持，或者我的代码是否有错误？

<!DOCTYPE html>
<html>
<head>
    <title>data attribute on table</title>

    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse:collapse;
        }
        th, td {
            padding: 5px;
        }
    </style>

    <script>
        function testData() {
            var tableElement = document.getElementById("table");
            var test = tableElement.getAttribute("test");
        }
    </script>
</head>
<body onload="testData()";>
    <table id="tableElement" data-test="test">
    </table>
</body>
</html>

Answer 1

您的功能有问题。

我通常通过将变量的名称与对象的id值匹配来保持简单。所以table的id也是var的名字tableElement。
当您处理检索（获取）单个data-*属性时，它通常是一个与属性名称完全相同的字符串，就像使用.getAttribute("data-test")的函数一样。
如果您正在使用jQuery的data-*或JS .data检索.datalist的列表，则可以像原始代码一样删除data-。
- 如果名称中有2个或更多-，则会有骆驼。 data-test-my-table将为testMyTable

关于data-*属性命名语法的

Details。

<强>段

function testData() {
  var tableElement = document.getElementById("tableElement");
  var test = tableElement.getAttribute("data-test");
  //Just for demo (optional)
  console.log('data-test: ' + test);
  var out1 = document.getElementById('out1');
  out1.value = test;
  //~~~~~~~~~~~~~~
  return test;
}

<!DOCTYPE html>
<html>

<head>
  <title>data attribute on table</title>

  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    th,
    td {
      padding: 5px;
    }
  </style>


</head>

<body onload="testData()">

  <table id="tableElement" data-test="test">

  </table>
  <!---Optional--->
  <output id="out1"></output>
  <!------------->
</body>

</html>

Answer 2

属性名称为data-test，而非test。请考虑使用dataset代替：

HTMLElement.dataset 只读属性允许在读取和写入模式下访问元素上设置的所有自定义数据属性（data- *）。它是DOMString的映射，每个自定义数据属性都有一个条目。

此外，您的表格元素的标识为tableElement，而非table。

这应该有效：

function testData() {
  var tableElement = document.getElementById("tableElement");
  var test = tableElement.dataset.test;

  document.body.innerHTML = test;
}

document.body.onload = testData;

<table id="tableElement" data-test="test"></table>

不支持表标记上的自定义数据属性？

2 个答案: