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

添加另一个包含样式的数组，并使用相同的索引显示样式数组中的值

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

适合您案例的可选解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，您正在创建一个带有字符串连接的DOM元素，这在使用jQuery时是一种不好的做法。这可以是您的任务的另一种解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

为什么不将json数组传递给属性Name，Style，如下所示。

[{"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>';
});

＆＃13;

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

＆＃13;

如何通过jquery.each函数创建动态表行

3 个答案: