jquery - 仅当变量具有使用 jquery 的值时才在 html 中显示逗号？

Question

我有一张这样的桌子：

<table class="table table-bordered">  
        <thead>  
          <tr>  
            <th></th>
            <th>Project Name</th>
            <th>Tape-ID</th>  
            <th>Video Type</th>  
            <th>Date Created</th>  
            <th>Director</th>  
            <th>Camera Person</th>
            <th>Editor</th> 
            <th>Tag</th> 
          </tr>  
        </thead>  
        <tbody>  
        {% load endless %}

    {% paginate 8 a %}
        {% for choice, i in a %}
          <tr>  
            <td><input type="checkbox" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}"  onchange="checkChecked()" /></td>
            <td>{{ choice.name }}</td>
            <td>{{ choice.tape_id }} </td>  
            <td>{{ choice.video_type }}</td> 
            <td>{{ i }}</td>  
            <td>{{ choice.director }}</td>  
            <td>{{ choice.cameraman }}</td>  
            <td>{{ choice.editor }}</td> 
            <td>{{ choice.tag1 }}, {{ choice.tag2 }}, {{ choice.tag3 }}, {{ choice.tag4 }},
            {{ choice.tag5 }}, {{ choice.tag6 }}, {{ choice.tag7 }}, {{ choice.tag8 }}, 
            {{ choice.tag9 }}, {{ choice.tag10 }}


            </td>   
          </tr>  
       {% endfor %}

        </tbody>  
      </table>  

这些变量{{ choice...}}可能有也可能没有价值。虽然它是顺序的。最多 3 的变量可以有值，并且在 3 之后没有任何值。如果没有值，它会像这样：

water, pollution, hello, , , , , ,

如果没有价值，我不想显示逗号。我怎样才能做到这一点？

Answer 1

尝试这个 ：

  <td>
  {% if choice.tag1 %}
      {{ choice.tag1 }}, 
  {% endif %} 
  {% if choice.tag2 %}
      {{ choice.tag2 }}, 
  {% endif %} 
  {% if choice.tag3 %}
      {{ choice.tag3 }}, 
  {% endif %} 
  {% if choice.tag4 %}
      {{ choice.tag4 }}, 
  {% endif %}
  {% if choice.tag5 %}
      {{ choice.tag5 }}, 
  {% endif %}
  {% if choice.tag6 %}
      {{ choice.tag6 }}, 
  {% endif %}
  {% if choice.tag7 %}
      {{ choice.tag7 }}, 
  {% endif %} 
  {% if choice.tag8 %}
      {{ choice.tag8 }}, 
  {% endif %} 
  {% if choice.tag9 %}
      {{ choice.tag9 }}, 
  {% endif %} 
  {% if choice.tag10 %}
      {{ choice.tag10 }} 
  {% endif %} 

   </td>  

或者使用 jquery 试试这个：

     $(document).ready(function () {
        $("#add_commas .manupulate_me span:not(span:last-child)").each(function ()  {
            if ($.trim($(this).html()) != "") {
                $(this).append(",");
            }
        });
    });

并将 html 更改为：

<table id="add_commas">
<tr class="manupulate_me">
<td>
    <span id="sp1">value1</span>
    <span id="sp2">vale2</span>
    <span id="sp3"> </span>
    <span id="sp4"> </span>
    <span id="sp5"> </span>
    <span id="sp6">value6</span>
    <span id="sp7">value7</span>
    <span id="sp8"> </span>
    <span id="sp9">value9</span>
    <span id="sp10"> value10</span>
  </td>  
</tr>
</table>

Answer 2

尝试使用

{{#choice.tag1}}
  {{ choice.tag1 }}{{#choice.tag2}},{{/choice.tag2}}
{{/choice.tag1}}

每次出现。最后一个将是：

{{#choice.tag10}}
  {{ choice.tag10 }}
{{/choice.tag10}}

Answer 3

如果您正在寻找 jQuery 解决方案（看到您标记 jQuery），您可以这样做：

$(function() {
    // get rows
    $('table.table tbody tr').each(function() {
        // get last cell in each row
        var cell = $(this).find('td:last');
        // replace trailing spaces and commas
        var text = cell.html().replace(/(,|\s)+$/, '');
        // update cell display
        cell.html(text);
    });
});

概念证明：http: //jsfiddle.net/wPRNH/

Answer 4

得到该结果后可以使用正则表达式s = s.replace(/[,\s]{2,}/,"");