新增一个 <select>使用jQuery，JavaScript到表行

Question

这是图像

我是这个网页设计的新手，我想放一个按钮，可以在桌子上放一个新行。 它可以工作，但是当尝试在其中添加<select>标记时，但我不知道这样做的足够知识。 看来type='select'是绝对错误的。 那么，如何将<select>标记放到新行中，而不只是文本？

 <script> $(document).ready(function() { var i = 1; $("#add_row").click(function() { $('tr').find('input').prop('disabled',true); $('#nmr' + i).html("<td>" + (i + 1) + "</td><td><input type='select' name='shiftid" + i + "'class='form-control input-md'/></td><td><input type='select' name='breakid" + i + "</td><td><input type='number' name='naturasa" + i + "'class='form-control input-md'/></td><td><input type='number' name='naturapu" + i + "'class='form-control input-md'/></td><td><input type='number' name='makannorm" + i + "'class='form-control input-md'/></td><td><input type='number' name='ttal" + i + "'class='form-control input-md'/></td>"); $('#tab_logic').append('<tr id="nmr' + (i + 1) + '"></tr>'); i++; }); }); 

 <div id="datatable" class="container"> <h2>Data Input</h2> <table class="table table-condensed" id="tab_logic"> <thead> <tr> <th>#</th> <th>Shift</th> <th>Jam Istirahat</th> <th>Natura Sakit</th> <th>Natura Puasa</th> <th>Makan Normal</th> <th>Total</th> </tr> </thead> <tbody> <tr id="nmr0"> <td> 1 </td> <td> <select name="shiftid" class="form-control"> <option selected disabled="disabled" value="">-Select An Option-</option> <option value="NormalShift">Normal Shift</option> <option value="Long Shift">Long Shift</option> </select> </td> <td> <select name="breakid" class="form-control"> <option selected disabled="disabled" value="">-Select An Option-</option> <option value="break1">11.45-12.15</option> <option value="break2">20.30-21.00</option> <option value="break3">18.00-18.45</option> <option value="break4">00.00-00.30</option> <option value="break5">07.00-07.30</option> </select> </td> <td> <input id="nomore" type="number" min="0" name="naturasa" class="form-control"> </td> <td> <input id="nomore" type="number" min="0" name="naturapu" class="form-control"> </td> <td> <input id="nomore" type="number" min="0" name="makannorm" class="form-control"> </td> <td> <input id="nomore" type="number" min="0" name="ttal" class="form-control"> </td> </tr> <tr id='nmr1'></tr> </tbody> </table><p></p> <input type="submit" id="add_row" class="btn btn-primary btn-lg pull-left" value="Add Order"> <input type="submit" id="removedata" value="Remove Order"> </div> 

Answer 1

您可以使用jquery clone复制表的第一行，然后将其附加到表的底部。

您可以使用找到表的最后一行

 var $lastTr = $('.classoftable tr').eq(1);

然后通过使用克隆表的最后一行

 var $clone = $lastTr.clone();

现在通过使用以下命令将此克隆行添加到表中

 $clone.appendTo('.classoftable');

您还可以使用突出显示新添加的行

 $clone.effect("highlight", {
            color: "#3c8dbc"
        }, 2000);

供参考使用此jsfiddle

Answer 2

• 首先， #id必须是唯一的，此规则没有例外。 四个<input>都具有相同的<input id= “ 不再 “ ... > 。它们已重新分配为id="A0" ， id="B0" ， id="C0" ， id="D0" 。

• 用普通的JavaScript方法替换.html(... insertAdjacentHTML() ： insertAdjacentHTML()与.html()相同，只是它插入而不是覆盖。

• 删除了不必要的空<tr>

• 移动的i++在添加行之前递增

• 字符串使用了模板文字 ，这使处理过程变得容易得多（请注意，您不必在每个换行符处添加大量的+ ）

• 注意$('tbody')[0]的括号表示法取消引用jQuery对象，以在其上使用纯JavaScript方法（即insertAdjacentHTML() ）

• 添加了<select>的正确HTML以及递增的i变量的正确插值

演示

 $(document).ready(function() { var i = 0; $("#add_row").click(function() { i++; $('tbody')[0].insertAdjacentHTML('beforeend', ` <tr id="nmr${i}"> <td>${i+1}</td> <td> <select name="shiftid" class="form-control"> <option selected disabled value=""> -Select An Option- </option> <option value="Normal Shift">Normal Shift </option> <option value="Long Shift"> Long Shift </option> </select> </td> <td> <select name="breakid" class="form-control"> <option selected disabled value=""> -Select An Option- </option> <option value="break1"> 11.45-12.15 </option> <option value="break2"> 20.30-21.00 </option> <option value="break3"> 18.00-18.45 </option> <option value="break4"> 00.00-00.30 </option> <option value="break5"> 07.00-07.30 </option> </select> </td> <td> <input id="A${i}" type="number" min="0" name="naturasa" class="form-control"> </td> <td> <input id="B${i}" type="number" min="0" name="naturapu" class="form-control"> </td> <td> <input id="C${i}" type="number" min="0" name="makannorm" class="form-control"> </td> <td> <input id="D${i}" type="number" min="0" name="ttal" class="form-control"> </td> </tr>`); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="datatable" class="container"> <h2>Data Input</h2> <table class="table table-condensed" id="tab_logic"> <thead> <tr> <th>#</th> <th>Shift</th> <th>Jam Istirahat</th> <th>Natura Sakit</th> <th>Natura Puasa</th> <th>Makan Normal</th> <th>Total</th> </tr> </thead> <tbody> <tr id="nmr0"> <td> 1 </td> <td> <select name="shiftid" class="form-control"> <option selected disabled value="">-Select An Option-</option> <option value="Normal Shift">Normal Shift</option> <option value="Long Shift">Long Shift</option> </select> </td> <td> <select name="breakid" class="form-control"> <option selected disabled value="">-Select An Option-</option> <option value="break1">11.45-12.15</option> <option value="break2">20.30-21.00</option> <option value="break3">18.00-18.45</option> <option value="break4">00.00-00.30</option> <option value="break5">07.00-07.30</option> </select> </td> <td> <input id="A0" type="number" min="0" name="naturasa" class="form-control"> </td> <td> <input id="B0" type="number" min="0" name="naturapu" class="form-control"> </td> <td> <input id="C0" type="number" min="0" name="makannorm" class="form-control"> </td> <td> <input id="D0" type="number" min="0" name="ttal" class="form-control"> </td> </tr> </tbody> </table> <p></p> <input type="submit" id="add_row" class="btn btn-primary btn-lg pull-left" value="Add Order"> <input type="submit" id="removedata" value="Remove Order"> </div>