2017-05-03 27 views
1

の応答テーブルへのcsvですので、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の:jsbin上のエラーで

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

私たちのワーキングサンプル:http://jsbin.com/xoligaleco/edit?html,js,output#J:L10

誰かができましたこれをお手伝いしてくれてありがとう。

答えて

1

あなたが

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

I、などの各列のデータ列を変更する$.each()を使用する必要があります列左パディングに変更を加えました。それは仕事

Jsbin demo

+0

!ありがとう! – camdev

+0

ようこそ –

関連する問題