通过Javascript或PHP将逗号分隔的数据从列转换为单独的行

时间:2018-06-13 10:43:32

标签: javascript jquery html-table

我遇到的情况是需要从html表的几列中获取数据并在单独的行中显示数据。

temp = tokenizeToInt(s, ",\n")); //error: expected ';' before ')' token|
.new td {border: 1px solid; padding: 2px;}

现在我想分别更改每行中的数据,以便在html页面上的下列行中单独显示。在这里,逗号分隔值可以在每行中使用新表单提交进行更改。

<div class="new"><table>
<tr>
<td>Name1,Name2,Name3,Name4</td><td>Age1,Age2,Age3,Age4</td><td>M,M,F,M</td>
</tr>
<tr>
<td>Name5,Name6,Name7</td><td>Age5,Age6,Age7</td><td>F,F,F</td></tr>
</table></div>
table td {border: 1px solid; padding: 2px;}

可以使用Javascript完成吗?

1 个答案:

答案 0 :(得分:1)

  function my_table_to_obj_arr(){
  	 var out=[];
  	 $('div.new table tr').each(function(){
  	 	 var names=$(this).find('td').eq(0).text();
  	 	   var names_arr=names.split(',');
  	 	 var ages=$(this).find('td').eq(1).text();
  	 	   var ages_arr=ages.split(',');
  	 	 var genders=$(this).find('td').eq(2).text();
  	 	   var genders_arr=genders.split(',');
  	 	 for(var key in names_arr){
  	 	 	out.push({'name':names_arr[key], 'age': ages_arr[key], 'gender': genders_arr[key]});
  	 	 }
  	 });
  	 return out;
  }


  function obj_arr_to_table(_obj){
  	 var table=$('<table/>');
  	 for(var key in _obj){
  	    var tr=$('<tr/>');
  	    var td_name=$('<td/>').text(_obj[key].name);
  	      tr.append(td_name);
  	    var td_age=$('<td/>').text(_obj[key].age);
  	      tr.append(td_age);
  	    var td_gender=$('<td/>').text(_obj[key].gender);
  	      tr.append(td_gender);
  	 	table.append(tr)
  	 }
  	 $('div.new').empty().append(table);
  }



  var my_obj=my_table_to_obj_arr();

  console.log(my_obj);

  obj_arr_to_table(my_obj);
       .new td {border: 1px solid; padding: 2px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="new">
 <table>
  <tr>
    <td>Name1,Name2,Name3,Name4</td><td>Age1,Age2,Age3,Age4</td><td>M,M,F,M</td>
  </tr>
  <tr>
    <td>Name5,Name6,Name7</td><td>Age5,Age6,Age7</td><td>F,F,F</td></tr>
  </table>
</div>