У меня есть 5 столбцов подряд.я хочу добавить строку и удалить строку, используя некоторые значки или кнопки ... я только что попробовал, но это не работает для меня ..
я просто новичок в таблицах данных .. вы можете мне помочь?
Я использую jquery 3.3.1 и загрузчик 4.3.1
здесь я хочу преобразовать статические таблицы в динамические таблицы
Faild Fiddle Here
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('cashTable').deleteRow(i);
}
function insRow() {
console.log('Joe');
var x = document.getElementById('cashTable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
inp3.id += len;
inp3.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
inp4.id += len;
inp4.value = '';
var inp5 = new_row.cells[5].getElementsByTagName('input')[0];
inp5.id += len;
inp5.value = '';
var inp6 = new_row.cells[6].getElementsByTagName('img')[0];
inp6.id += len;
inp6.value = '';
x.appendChild(new_row);
}
<div class="row" style="display: block">
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<!-- First row -->
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly />
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly />
</td>
<td style="width: 4%">
<input type="button" id="addRow" onclick="insRow()" value="Add">
<input type="button" id="delitRow" onclick="deleteRow(this)" value="delete">
</td>
</tr>
<!-- Second Row -->
<tr>
<td>
<input type="number" class="form-control" id="#" name="cashacc_code" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly />
</td>
<td style="width: 4%">
<input type="button" id="addRow" onclick="insRow()" value="Add">
<input type="button" id="delitRow" onclick="deleteRow(this)" value="delete">
</td>
</tr>
</tbody>
</table>
</div>
Я использую jquery 3.3.1 и загрузчик 4.3.1
здесь я хочу преобразовать статические таблицы в динамические таблицы