动态javascript以增加复选框的值

vq8itlhq  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(337)

我无法自动增加位于表中的复选框的值。因此,简而言之,在我的html表格中,我有文本框和复选框作为一行显示(加载网页时默认显示5行)。我有一个按钮,可以在javascript下面调用它来自动克隆一行,如果最终用户希望在这个现有的默认5行html表中添加更多行的话。

<script type="text/javascript">
function cloneRow() {
      var table = document.getElementById("tableToModify"); // find table to append to
      var row = document.getElementById("rowToClone");
      var clone = row.cloneNode(true); // copy children too
      clone.id = "newID"; // change id or other attributes/contents
      table.appendChild(clone); // add new row to end of table
    }

// This function deletes a row when clicked on the button
function deleteRow(r) {
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
}

现在在我的html中,复选框看起来像这样:ps:值“3”表示行数,因此在本例中,此复选框位于第3行。

<tr id="rowToClone">
        <td id="Transportation_Type">
            <select id="Transportation_Type" onChange="checkOption(this)" name="transportation_type">
                {% for type in transportation_type %}
                <option value="{{ type.type }}">{{ type.type }}</option>
                {% endfor %}
            </select>
        </td>
        <td><input type="text" id="License_Plate" name="License_Plate" placeholder="Optional" style="text-align:center;" disabled></td>
        <td><input id="checkbox" type="checkbox" name="Electric" value="3"/></td>
        <td id="Number of days per week" >
            <select name="DaysPerWeek">
                <option selected>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </td>
        <td><input type="number" name="DistanceInKm" style="text-align:center;" ></td>
        <td><button class="button is-danger "  onclick="deleteRow(this)">Delete Row</button></td>
    </tr>

现在我的问题是,当点击克隆按钮时,新行将如何获得复选框中的下一个值?
假设最终用户单击了一次 clone button ,则复选框和其他复选框将被克隆,但只有复选框的值应自动为“6”。

jutyujz0

jutyujz01#

获取表中的行数。将1添加到该复选框,以获得相应的值。

function cloneRow() {
  var table = document.getElementById("tableToModify"); // find table to append to
  var row = document.getElementById("rowToClone");
  var clone = row.cloneNode(true); // copy children too
  clone.id = "newID"; // change id or other attributes/contents
  var rows = table.querySelectorAll("tr").length;
  clone.querySelector("input[type=checkbox]").value = rows+1;
  table.appendChild(clone); // add new row to end of table
}

如果表中有不应计数的标题行,请不要添加1。

相关问题