Добавить кнопку нет функции в таблице - PullRequest
Новая
       2

Добавить кнопку нет функции в таблице

0 голосов
/ 24 марта 2020

Моя форма внутри нужна для создания таблицы. И форму внутри строки таблицы нужно, чтобы мой пользователь вводил данные. Я добавил кнопку «Добавить» внутри таблицы, но не сработал. Ниже приведен мой код: 

   <table id="table"  BORDER="5"    WIDTH="100%"   CELLPADDING="3" CELLSPACING="3">
  <thead>

<th style='width:15%'>No</th>
<th class='filter_text_field'>PAPER QTY</th>
<th class='filter_text_field'>SIZE</th>
<th class='filter_text_field'>PAPER GMS</th>
<th class='filter_text_field'>CUT</th>
<th class='filter_text_field'>CONTENT</th>
<th class='filter_text_field'>COLOUR</th>
<th class='filter_text_field'>DETAILS INFO</th>


  </thead>
  <tbody>
    <tr>
    <form role="form">
      <td>  <input type="number" id="no" placeholder="No"></td>
      <td><input type="number" id="paper_qty" placeholder="PAPER QTY"></td>
      <td>
      <select class="form-control required" id="size" name="size">
                            <option value="">Please Select</option>
                            <?php
                            $sql_branch = 'select * from size where status=1 order by id';
                            $arr_branch = db_conn_select($sql_branch);
                            foreach ($arr_branch as $rs_branch) {
                                echo '<option value="' . $rs_branch['size'] . '">' . $rs_branch['size'] . '</option>';
                            }
                            ?>
                        </select>
      </td>
          <td>
      <select class="form-control required" id="paper_gms" name="paper_gms">
                            <option value="">Please Select</option>
                            <?php
                            $sql_branch = 'select * from paper_gms where status=1 order by id';
                            $arr_branch = db_conn_select($sql_branch);
                            foreach ($arr_branch as $rs_branch) {
                                echo '<option value="' . $rs_branch['gms'] . '">' . $rs_branch['gms'] . '</option>';
                            }
                            ?>
                        </select>
      </td>

     <!-- <td><input type="number" id="size" placeholder="SIZE"></td>-->
     <!-- <td><input type="number" id="paper_gms" placeholder="PAPER GMS"></td>-->
      <td><input type="number" id="cut" placeholder="CUT"></td>
      <td><input type="text" id="description" placeholder="CONTENT"></td>
       <td>
      <select class="form-control required" id="colour" name="paper_gms">
                            <option value="">Please Select</option>
                            <?php
                            $sql_branch = 'select * from color where status=1 order by id';
                            $arr_branch = db_conn_select($sql_branch);
                            foreach ($arr_branch as $rs_branch) {
                                echo '<option value="' . $rs_branch['name'] . '">' . $rs_branch['name'] . '</option>';
                            }
                            ?>
                        </select>
      </td>

      <!--<td><input type="number" id="colour" placeholder="COLOUR"></td>-->
      <td><input type="number" id="details_info" placeholder="DETAILS INFO"></td>
      </form>

    </tr>

    <tr>
      <td class="th_background hidden">test1</td>
      <td class="th_background hidden">test1</td>
      <td class="th_background hidden">test3</td>
      <td class="th_background hidden">test4</td>
      <td class="th_background hidden">test5</td>
      <td class="th_background hidden">test6</td>
      <td class="th_background hidden">test7</td>
      <td class="th_background hidden">test8</td>


    </tr>

  </tbody>
</table>



<script>
$('#addButton').click(function(){

  var newTableRow = '<tr><td>'+ $('#no').val() +'</td><td>'+ $('#paper_qty').val() +'</td><td>'+ $('#size').val() +'</td><td>'+ $('#paper_gms').val() +'</td><td>'+ $('#cut').val() +'</td><td>'+ $('#description').val() +'</td><td>'+ $('#colour').val() +'</td><td>'+ $('#details_info').val() +'</td></tr>';

  $('#table tr:last').after(newTableRow);  
})
<button id="addButton">Add</button>

</script>

Мой вывод отображается ниже, когда я нажимаю кнопку добавления, он будет перенаправлять sh страницу: Output2

Если я добавлю кнопку «Добавить» в последнюю из приведенных ниже, она может работать, как показано на рисунке ниже: Output1

Надеюсь, что кто-нибудь поможет мне решить эту проблему. Спасибо.

Мой полный код по ссылке ниже: https://drive.google.com/file/d/1J0ExBFwYcg_Iw9CSZohgG3r9tGeYLuyp/view?usp=sharing

1 Ответ

0 голосов
/ 24 марта 2020

Формы не должны быть вложены в таблицу. Вы можете создать таблицу, используя элементы, и оформить ее с помощью CSS, используя display properties.

CSS

.table {
    display: table;
}
.tr {
    display: table-row;
}
.td {
    display: table-cell;
}

HTML

<div class="table">
    <div class="tr">
        <div class="td"> 
            <form>
               <!-- Your form elements goes here.-->
            </form>
        </div>
    </div>
</div>
...