Javascript csv到具有自定义属性的响应表_Javascript_Jquery_Html_Css

Javascript csv到具有自定义属性的响应表

javascript jquery html css

Javascript csv到具有自定义属性的响应表,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，我们这里有一个可以工作的csv文件到html表的转换，但唯一阻止我们响应的是这个逻辑在其各自的td上附加了一个自定义数据属性。请看这里的图片：这是我们当前的html代码： <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src ="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.j

因此，我们这里有一个可以工作的csv文件到html表的转换，但唯一阻止我们响应的是这个逻辑在其各自的

td

上附加了一个自定义数据属性。请看这里的图片：

这是我们当前的html代码：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 <script src ="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
</head>
<body>
 <div class="here allBorder hor template3 headColor"></div>

jquery/javascript：

function arrayToTable(tableData) {
var table = $('<table></table>');

 $(tableData).each(function (i, rowData) {
 var row = $('<tr></tr>');

$(rowData).each(function (j, cellData) {
 row.append($('<td>'+cellData+'</td>'));
});

   table.append(row);
        });
        return table;
    }

    setTimeout(function(){ 
     var y = $('.here tr td');
     var x = $('.here tr:first-child td'); 
       y.attr('data-column',x.text().split(/(?=[A-Z])/).join(" "));
    },1000);

    $.ajax({
        type: "GET",
        url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/csv_data.csv",
        crossDomain: true,
        contentType:'html',
        success: function (data) {
            $('.here').append(arrayToTable(Papa.parse(data).data));
        }
    });

函数数组表（tableData）{
变量表=$（''）；
$（tableData）。每个（函数（i，行数据）{
变量行=$（''）；
$（rowData）。每个（函数（j，cellData）{
行。追加（$（''+cellData+''）；
});
表.追加（行）；
});
返回表；
}
setTimeout（函数（）{
变量y=$（'此处为tr td'）；
var x=$（'.tr:first child td'）；
y、 attr（'data-column'，x.text（）.split（/（？=[A-Z]）/）.join（“”）；
},1000);
$.ajax({
键入：“获取”，
url:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/csv_data.csv",
跨域：是的，
contentType:'html'，
成功：功能（数据）{
$（'.here'）.append（arrayToTable（Papa.parse（data.data））；
}
});

我们的工作示例在jsbin上出现错误：

有人能帮我们吗？非常感谢。

您需要使用更改每列的数据列，如

setTimeout(function() {
  var y = $('.here tr td');
  $(y).each(function(j){
     $(this).attr('data-column',$('.here tr:first-child td:eq(' + (j % 3) + ')').text());
  })
}, 1000);

并在附加表之后添加数据列attr，而不是使用settimeout，如

$.ajax({
  type: "GET",
  url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/csv_data.csv",
  crossDomain: true,
  contentType: 'html',
  success: function(data) {
    $('.here').append(arrayToTable(Papa.parse(data).data));
    var y = $('.here tr td');
    $(y).each(function(j){
       $(this).attr('data-column',$('.here tr:first-child td:eq(' + (j % 3) + ')').text());
    });
  }
});

我已更改了列左填充

欢迎亲爱的：）