Javascript-显示多个图标减号以在首选单个符号时最小化行

Question

我正在使用从其他地方改编的一些 javascript，以允许用户向表单添加额外的行。我正在使用这些函数来添加和删除字段:

function addTrack(){

    var node = document.getElementById("fruitTable");
    var trs = node.getElementsByTagName("tr");
    var tr = trs[trs.length-2];
    var tr2 = tr.cloneNode(true);
    tr.parentNode.insertBefore(tr2, tr);

    function plusone(str){
        return str.replace(
            new RegExp("-(\\d+)-", "gi"),
            function($0, $1){
                var i = parseInt($1) + 1;
                return "-" + i + "-";
            }
        );
    }

    var inputs = tr.getElementsByTagName("input");

    for (var i = 0; i < inputs.length; i++){
        inputs[i].setAttribute("id", plusone(inputs[i].getAttribute("id")));
    }

    var minusbutton =
        ['<td>',
        '<button class="btn" type="button" onClick="removeTrack()"><i class="icon-black icon-minus"></i></button>',
        '</td>'
        ].join('\n');

    if (trs.length < 6){
        tr.innerHTML += minusbutton
    }
}

function removeTrack(){
    var node = document.getElementById("fruitTable");
    var trs = node.getElementsByTagName("tr");
    var tr = trs[trs.length-2];
    var trParent = tr.parentNode;
    trParent.removeChild(tr);
}

在按下加号之前，这是表单部分的样子(我很高兴在这一点上):

按下按钮后，表单如下所示(再次强调，我对此时的单个减号图标很满意):

但是，如果添加更多行，表单会在每个新行旁边显示两个减号图标，而我更喜欢使用单个图标(见下文)。我无法从我的功能中看出为什么会这样？作为附带问题，我似乎无法摆脱某些元素上方的窄白色边框线。我已将所有表格边框更改为灰色(与背景颜色相同)，但这似乎并没有消除它们。

这是模板中的 html:

<table id="fruitTable" class="table">
    <tr><th>Items Description</th></tr>
    {% set counter = 0 %}
    {% for track in form1.item_description %}
    <tr>
        {{ track.hidden_tag() }}
        {% set counter = counter + 1%}
        {% for field in track if field.widget.input_type != 'hidden' %}
          {{ render_field_oneline(field) }}
        {% endfor %}
        {% if counter > 1 %}
          <td>
            <button class="btn" type="button" onClick="removeTrack()"><i class="icon-black icon-minus"></i></button>
          </td>
        {% endif  %}
      </tr>
    {% endfor %}
      <tr><td></td><td><button class="btn" type="button" onClick="addTrack()"><i class="icon-black icon-plus"></i></button></td></tr>
  </table>

<table>

这是我放在 base.html 文件中的宏和附加 CSS:

{% macro render_field_oneline(field) %}
<td>{{ field.label }}</td>
<td>{{ field(**kwargs)|safe }}
  {% if field.errors %}
  <ul class=errors>
    {% for error in field.errors %}
    <li>{{ error }}</li>
    {% endfor %}
  </ul>
  {% endif %}
</td>
{% endmacro %}

{% macro render_field(field) %}
<tr>
  {{ render_field_oneline(field) }}
</tr>
{% endmacro %}

<style>
{
        background-color: #A9A9A9;
}
table, tr, th, td {
    border: 1px solid #A9A9A9;
}
</style>

Answer 1

对于减号按钮，如果您的代码符合以下条件，请检查此部分:

if (trs.length < 6){
    tr.innerHTML += minusbutton
}

因此，如果您只需要在每个条形旁边显示一个减号按钮，则需要添加一个新元素来创建一个新行。

if ( trs.length < 6 ) {
    tr.innerHTML += minusbutton + '<tr><td></td></tr>';
}