当按下按钮时自动添加行

我在两个选项卡（选项卡hasilproduksi和选项卡停机时间）中有两个表。每个选项卡都是带有表格的页面。当我点击加号按钮时，我想向表中添加一行。我的代码无法按预期工作，我非常感谢任何帮助。当按下按钮时自动添加行

这里是我的代码（tab_hasilproduksi）：

function addTableRowHasilProduksi() { 
    row = parseInt($('#tableRowHasilProduksi').val()) + 1; 
    $('#plusButtonHasilProduksi').remove(); 
    var html = ' \ 
    <tr id="rowTableHasilProduksi_' + row + '"> \ 
     <td> \ 
     <div class="input-group"> \ 
      <input id="typepartid_' + row + '" class="form-control ui-autocomplete" type="text" onchange="myFunction(' + row + ')" name="typepartid_' + row + '" >\ 
      <span class="input-group-btn">\ 
      <button type="button" class="btn btn-default glyphicon glyphicon-folder-open" name="button" id="buttonPartID' + row + '">\ 
      </button>\ 
      </span>\ 
        </div>\ 
     </td> \ 
    <td>\ 
     <select id="hasilproduksi_' + row + '" class="form-control" onchange="hasilProduksiChage(' + row + ')" name="hasilproduksi_' + row + '"> \ 
      <option value="-">--Select--</option>\ 
      <option value="Good">Good</option>\ 
      <option value="Repair">Repair</option>\ 
      <option value="Reject">Reject</option>\ 
     </select> \ 
     </td> \ 
     <td><input id="qty_' + row + '" type="text" class="form-control" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);" name="qty_' + row + '" /> \ 
     </td> \ 
     <td id="tdTypeReject_' + row + '"> \ 
     <select id="typereject_' + row + '" class="form-control" name="typereject_' + row + '"> \ 
     ' + htmlTypeReject + ' \ 
     </select> \ 
     </td> \ 
     <td><input id="keteranganreject_' + row + '" type="text" class="form-control" name="keteranganreject_' + row + '"/></td> \ 
     <td><button type="button" class="btn btn-sm btn-default" onclick="deleteRowHasilProduksi(' + row + ')">x</button></td> \ 
    </tr> \ 
    <tr id="plusButtonHasilProduksi"> \ 
     <td colspan="6"><button type="button" class="btn btn-sm btn-default" style="width:100%" onclick="addTableRowHasilProduksi()">+</button></td> \ 
    </tr>'; 
    $('#tableHasilProduksi > tbody').append(html); 
    //variable row table add +1 
    $('#tableRowHasilProduksi').val(row); 

}

tab_downtime：

function addTableRowDowntime() { 
 
    row = parseInt($('#tableRowDowntime').val()) + 1; 
 
    $('#plusButtonDowntime').remove(); 
 
    var html = ' \ 
 
    <tr id="rowTableDowntime_' + row + '"> \ 
 
     <td><button type="button" class="btn btn-sm btn-default" onclick="deleteRowDowntime(' + row + ')">-</button></td> \ 
 
\t <td><input id="partdown_' + row + '" type="text" class="form-control" name="partdown_' + row + '" readonly="readonly"></input>\</td> \ 
 
     <td id="tdDowntime_' + row + '"> \ 
 
     <select id="downtime_' + row + '" class="form-control" name="downtime_' + row + '"> \ 
 
     ' + htmlDowntime + ' \ 
 
     </select> \ 
 
     </td> \ 
 
     <td><input id="durasi_' + row + '" class="form-control" type="text" name="durasi_' + row + '" onfocusout="durasiOnFocusOut(this)" onfocusin="durasiOnFocusIn(this)"/></td> \ 
 
     <td><input id="keterangandowntime_' + row + '" class="form-control" type="text" name="keterangandowntime_' + row + '"/></td> \ 
 
    </tr> \ 
 
    <tr id="plusButtonDowntime"> \ 
 
     <td colspan="5"><button type="button" class="btn btn-sm btn-default" style="width:100%" onclick="addTableRowDowntime()">+</button></td> \ 
 
    </tr>'; 
 
    $('#tableDowntime > tbody').append(html); 
 
    //variable row table add +1 
 
    $('#tableRowDowntime').val(row); 
 
}

来源

2017-08-29 Sandhi Zukhruf Zusiarta

你能解释一下你在找什么吗？ – Shiladitya

我想如果我点击标签Hasil Produksi中的加号按钮，也会自动在标签页宕机时间添加行 –

保持全局计数器像var cnt = 0;，这将保持次数添加按钮被点击。

var cnt = 0; 
function addTableRowHasilProduksi() { 
    ... 
    ... 
    //variable row table add +1 
    $('#tableRowHasilProduksi').val(row); 
    cnt++; 
}

一旦你在等维护选项卡tab_downtime（您需要检查条件的基础上）

for(var i=0; i<cnt; i++){ 
    addTableRowDowntime(); 
}

呼叫addTableRowDowntime()内循环。

希望这会帮助你。

来源

2017-08-29 04:25:19 Shiladitya

当我把addTableRowDowntime（）放在addTableRowHasilProduksi函数的最后，在tab停机时自动添加一行事件，但我还没有点击过。例如：tab_hasilproduksi默认情况下是一行，但我添加此代码后，在tab_downtime默认情况下是2行 –

@SandhiZukhrufZusiarta我已经更新了答案，看看。 – Shiladitya

结果与您之前的代码相同。在标签页停机时间自动添加一行事件，但我还没有点击。例如：tab_hasilproduksi默认情况下是一行，但在我添加此代码后，在tab_downtime默认情况下是2行 –

你能在+点击按钮添加一个事件监听器？如果是的话它应该是简单的，只需要调用事件侦听器的addTableRowDowntime()功能，是这样的：

$('#plusButtonHasilProduksi').on('click', function() { addTableRowDowntime(); });

来源

2017-08-29 03:22:38

我应该在哪里放置代码 –

您可以将其添加到addTableRowHasilProduksi（）函数中，但是如果addTableRowHasilProduksi在addTableRowHasilProduksi（）的末尾添加addTableRowDowntime（）时，只需在addTableRowHasilProduksi函数 –

的末尾调用'addTableRowDowntime（）'，就可以调用addTableRowHasilProduksi功能，在标签页停机时自动添加i行事件，但我还没有点击。例如：tab_hasilproduksi默认情况下是一行，但在我添加此代码后，在tab_downtime默认情况下是2行 –

当按下按钮时自动添加行

回答

相关问题