向现有表中添加行

Adding a row to an existing table

本文关键字：添加行更新时间：2023-09-26

我正在尝试添加新行，以防单击按钮。该行应添加在按钮所在的行之后。我使用Jquery（1.10.2）来添加新行。

我遇到的问题是.closest函数并没有像我预期的那样工作。当我把一个硬编码的类粘贴到.insertAfter时，它就工作了。

这行代码对我不起作用：

$("<tr> <td> Test </td> </tr>").insertAfter($(this).closest('.rowToClone'));

正如我所说，当我把一个类硬编码到.insertAfter()中时，它确实有效。所以我想我的问题在于.closest()函数。编辑（完整jquery）：

<script>
    var dagen = ["Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"];
    var selects = [];
    var lengte = dagen.length;
        function addRow()
        {
            for(var i = 0; i < lengte; i++)
            {
                //Get all of the hours selected by the Dropdown boxes
                selects[i] = $('select[name="' + dagen[i] + '_uurTot"] option:selected').text();
                // clone these boxes and changing the name, adding value of I from the for loop to the name Example Ma1_uurVan
                //selectVan = $('select[name="' + dagen[i] + '_uurVan"]').clone();
                //selectVan.attr("name", dagen[i] + i + "_uurVan");
                // clone these boxes and changing the name, adding value of I from the for loop to the name Example Ma1_uurTot
                //selectTot = $('select[name="' + dagen[i] + '_uurTot"]').clone();
                //selectVan.attr("name", dagen[i] + i + "_uurVan");
                // If the hours those are selected not 22:00, duplicating the row is possible.
                if(selects[i] !== '22:00')
                {
                    $("<tr> <td> Test </td> </tr>").insertAfter('.rowToClone'); // Works, but adds row to all the rows with .rowToClone
                    // $("<tr> <td> Test </td> </tr>").insertAfter($(this).closest('.rowToClone')); // DOES NOT WORK

                }
            }
        }
</script>

这是我的html:

<table id="beschikbaarheid" class="table table-bordered table-striped">
    <input type="hidden" name="control" value="admin"/>
    <input type="hidden" name="action" value="beschikbaarheid"/>
    <thead>
        <th class="hidden-xs " style="color:white;">Dag</th>
        <th class="hidden-xs " style="color:white;">Van</th>
        <th class="hidden-xs " style="color:white;">Tot</th>
        <th class="hidden-xs " style="color:white;">Rij aanmaken</th>
        <th class="hidden-xs " style="color:white;">Status</th>
     </thead>
     <tbody>
        <tr class="rowToClone">
             <td>Maandag <td>
             <select name="Ma_uurVan">
                  <option value="08:00">08:00</option>
                  <option value="08:30">08:30</option>
                  <option value="09:00">09:00</option>
                  <option value="09:30">09:30</option>
                  <option value="10:00">10:00</option>
                  <option value="10:30">10:30</option>
                  <option value="11:00">11:00</option>
                  <option value="11:30">11:30</option>
                  <option value="12:00">12:00</option>
                  <option value="12:30">12:30</option>
                  <option value="13:00">13:00</option>
                  <option value="13:30">13:30</option>
                  <option value="14:00">14:00</option>
                  <option value="14:30">14:30</option>
                  <option value="15:00">15:00</option>
                  <option value="15:30">15:30</option>
                  <option value="16:00">16:00</option>
                  <option value="16:30">16:30</option>
                  <option value="17:00">17:00</option>
                  <option value="17:30">17:30</option>
                  <option value="18:00">18:00</option>
                  <option value="18:30">18:30</option>
                  <option value="19:00">19:00</option>
                  <option value="19:30">19:30</option>
                  <option value="20:00">20:00</option>
                  <option value="20:30">20:30</option>
                  <option value="21:00">21:00</option>
                  <option value="21:30">21:30</option>
                  <option value="22:00">22:00</option>
              </select>
          </td>
          <td>
              <select name="Ma_uurTot">
                  <option value="08:00">08:00</option>
                  <option value="08:30">08:30</option>
                  <option value="09:00">09:00</option>
                  <option value="09:30">09:30</option>
                  <option value="10:00">10:00</option>
                  <option value="10:30">10:30</option>
                  <option value="11:00">11:00</option>
                  <option value="11:30">11:30</option>
                  <option value="12:00">12:00</option>
                  <option value="12:30">12:30</option>
                  <option value="13:00">13:00</option>
                  <option value="13:30">13:30</option>
                  <option value="14:00">14:00</option>
                  <option value="14:30">14:30</option>
                  <option value="15:00">15:00</option>
                  <option value="15:30">15:30</option>
                  <option value="16:00">16:00</option>
                  <option value="16:30">16:30</option>
                  <option value="17:00">17:00</option>
                  <option value="17:30">17:30</option>
                  <option value="18:00">18:00</option>
                  <option value="18:30">18:30</option>
                  <option value="19:00">19:00</option>
                  <option value="19:30">19:30</option>
                  <option value="20:00">20:00</option>
                  <option value="20:30">20:30</option>
                  <option value="21:00">21:00</option>
                  <option value="21:30">21:30</option>
                  <option value="22:00">22:00</option>
              </select>
           </td>
        <td>
            <button type="button" onclick="addRow()"> Voeg rij toe </button>
        </td>
        <td>
        <select name="StatusMa">
            <option>Beschikbaar</option>
            <option selected >Niet beschikbaar</option>
            </select>
        </td>
    </tr>

edit：因为html代码的总和很大。我只插入了第一整排。

而不是在HTML:中使用

<button onclick="addRow();">some text here</button>

尝试在js文件中使用：

$(document).ready(function(){
   $('button').click(function(){
       selects[i] = $('select[name="' + dagen[i] + '_uurTot"] option:selected').text();
            // If the hours those are selected not 22:00, duplicating the row is possible.
            if(selects[i] !== '22:00')
            {
                $("<tr> <td> Test </td> </tr>").insertAfter($(this).closest('.rowToClone'));
            }
   });
});

jQuery函数.parent()将获得所需项的父项。您可以一直工作到按钮的祖父母，并执行.insertAfter()将一行添加到表中。您可以在此处看到一个示例：http://jsfiddle.net/2L6b9kvr/1/

在addRow函数中，我获取按钮的祖父母元素（在本例中，它是tr）。然后，我在祖父母变量后面插入新的HTML tr。然后，我将所有.addRow解除绑定并重新绑定到addRow函数。