Как добавить и удалить строку с помощью JavaScript ..? - PullRequest
0 голосов
/ 26 сентября 2019

У меня есть 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

здесь я хочу преобразовать статические таблицы в динамические таблицы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...