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

Question

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

.new td {border: 1px solid; padding: 2px;}

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

现在我想单独更改每行的数据，以便在 html 页面上像下面这样的行中单独显示。这里，每行中的逗号分隔值可以随着新表单提交而更改。

table td {border: 1px solid; padding: 2px;}

<p>For Row1</p>
<table>
<tr><td>Name1</td><td>Age1</td><td>M</td></tr>
<tr><td>Name2</td><td>Age2</td><td>M</td></tr>
<tr><td>Name3</td><td>Age3</td><td>F</td></tr>
<tr><td>Name4</td><td>Age4</td><td>M</td></tr>
</table>

<p>For Row2</p>
<table>
<tr><td>Name5</td><td>Age5</td><td>F</td></tr>
<tr><td>Name6</td><td>Age6</td><td>F</td></tr>
<tr><td>Name7</td><td>Age7</td><td>F</td></tr>
</table>

这可以用 JavaScript 来完成吗？

Answer 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>