如何通过jquery.each功能

Question

我想从一个字符串变量像下面创建动态表行进行动态表行：

var c = apple,mango,jackfruit,guava,orange; 
var arr = c.split(','); 
var trval='<tr>'; 
$.each(arr,function(index,value){ 
     trval = trval+'<td>'+value+'</td>'; 
}); 
trval = trval+'</tr>'; 

在上面的例子中运作良好，并创建如下表行：

<tr> 
    <td>apple</td> 
    <td>mango</td> 
    <td>jackfruit</td> 
    <td>guava</td> 
    <td>orange</td> 
</tr> 

但如果任何表单元格需要一个特殊的加价，如需要为红色，则表行应该是：

<tr> 
    <td>apple</td> 
    <td style="color:red">mango</td> 
    <td>jackfruit</td> 
    <td>guava</td> 
    <td>orange</td> 
</tr> 

然后阵列应该是：

var c = apple,["style='color:red'","mango"],jackfruit,guava,orange; 

这里的style='color:red'是可选的。即它可能会或可能不在那里。 所以，我必须以这样的方式遍历var c，它将搜索arr中的单个值是否是变量。如果它是可变的，那么它会迭代该数组（在这种情况下，["style='color:red'","mango"]）以创建该表格单元格及其可选标记。该字符串中的这个可选数组是动态的，它可以用于该字符串的任何元素，或者甚至没有对于

那些元素。如何让jquery.each代码在这种情况下？

Answer 1

添加另一个阵列与风格，并使用相同的索引

var c = ['apple','mango','jackfruit','guava','orange']; 
 
var d = ['green','red','blue','yellow','orange']; 
 

 
//var arr = c.split(','); 
 
var trval='<tr>'; 
 
$.each(c,function(index,value){ 
 
trval = trval+'<td style=\"color:'+d[index]+'\">'+value+'</td>'; 
 
}); 
 
trval = trval+'</tr>'; 
 
console.log(trval); 
 
$("table").append(trval);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table></table>

显示从样式数组值

Answer 2

为您的情况可选择的解决方案：

var arr = ['apple', ['style="color:red;"', 'banana'], 'mango']; 
 
var trval='<tr>'; 
 

 
$.each(arr, function(index, value){ 
 
    if (value.constructor === Array) { 
 
    trval = trval + '<td ' + value[0] + '>' + value[1] + '</td>'; 
 
    } 
 
    else { 
 
    trval = trval + '<td>' + value + '</td>'; 
 
    } 
 
}); 
 

 
trval = trval + '</tr>'; 
 

 
console.log(trval);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

然而，你正在创建一个字符串连接，这是一种不好的做法，已经使用jQuery在DOM元素。 这可以为你的任务另一种解决方案：

var arr = ['apple', ['color: red;', 'banana'], 'mango']; 
 
var tr=$('<tr></tr>'); 
 

 
$.each(arr, function (index, value){ 
 
    var td = $('<td></td>'); 
 
     
 
    if (value.constructor === Array) { 
 
    td.attr('style', value[0]); 
 
    td.html(value[1]) 
 
    } 
 
    else { 
 
    td.html(value); 
 
    } 
 
    
 
    tr.append(td); 
 
}); 
 

 
console.log(tr.prop('outerHTML'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

你为什么不通过JSON数组与属性名称，样式像下面。

[{"name": "Red","style": "color:red" },{"name": "Orange","style": "color:orange"},{"name": "Transparent","style": ""}] 


$.each(arr,function(index,obj){ 
if(obj.color=='') 
    trval +='<td>'+obj.name+'</td>'; 
else 
    trval +='<td style=\"'+obj.style+'\">'+obj.name+'</td>'; 
}); 

<table id='tbl'> 
 
    <tr></tr> 
 
    </table> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <script> 
 
     var arr=[{"name": "Red","style": "color:red" },{"name": "Orange","style": "color:orange"  },{"name": "Transparent","style": ""}]; 
 
     var trval=''; 
 
     $.each(arr,function(index,obj){ 
 
     if(obj.color=='') 
 
       trval +='<td>'+obj.name+'</td>'; 
 
     else 
 
      trval +='<td style=\"'+obj.style+'\">'+obj.name+'</td>'; 
 
     }); 
 
     $("#tbl tr").html(trval); 
 
     </script>