Question

所以我们这里有一个工作的csv文件到html表转换，但唯一阻止我们响应的是这个逻辑在其各自的td上附加一个自定义数据属性。请在此处查看图片：http://www.evernote.com/shard/s605/sh/523b17cf-0230-4d92-8a4b-34fee682f5d8/4201e925b3a054b0508f6d97d6f6106b

这是我们当前的代码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));
        }
    });

我们的工作样本在jsbin上有错误：http://jsbin.com/xoligaleco/edit?html,js,output#J:L10

有人可以帮助我们，谢谢你。

Answer 1

您需要使用$.each()更改每列的数据列，例如

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);

而不是使用settimeout在添加数据后添加data-column attr，

$.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());
    });
  }
});

我更改了左侧填充列。

<强> Jsbin demo

csv到自定义属性的响应表

1 个答案: