如何通過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>