Как добавить данные в HTML-таблицу через ввод(текстовые поля) с помощью javascript в laravel?


Как добавить данные в HTML-таблицу через ввод(текстовые поля) с помощью javascript в laravel?

11.10.2020 05:19:36 Просмотров 10 Источник

Я работаю в laravel уже 2 месяца. У меня есть таблица в html(также может быть bootstrap table) и по крайней мере 3 ввода(type=text), а также есть кнопка(с именем add). Теперь я хочу добавить данные в таблицу, используя эти три входных сигнала.Когда я нажму кнопку Добавить, данные, которые присутствуют во входных данных, добавятся в таблицу спасибо. Мой код приведен ниже

<div class="col-lg-6">
  <div class="row" style="margin-top:1em">
    <div class="row no-gutters" style="margin-top: 3px;">
      <div class="col-lg-4">
        <input type="text" placeholder="Enter Item Name"/>
      </div>
      <div class="col-lg-4">
        <input type="text" placeholder="Enter Unit Price"/>
      </div>
      <div class="col-lg-4">
        <input type="text" placeholder="Enter Item Quantity"/>
      </div>
      <div class="col-lg-4">
        <button class="btn btn-primary">Add Order</button>
      </div>
    </div>
  </div>
</div>

<table></table>
У вопроса есть решение - Посмотреть?

Ответы - Как добавить данные в HTML-таблицу через ввод(текстовые поля) с помощью javascript в laravel? / How to add data into HTML table throug input(textfields) using javascript in laravel?

Является ответом!
Moti Salamon

11.10.2020 05:49:10

enter image description hereКогда пользователь отправляет сообщение, вы должны обработать входные данные и переместить их в таблицу. что-то вроде этого:

    <form onsubmit="return addtotable()">
<div class="col-lg-6">
    <div class="row" style="margin-top:1em">
      <div class="row no-gutters" style="margin-top: 3px;">
        <div class="col-lg-4">
          <input id="input1" type="text" placeholder="Enter Item Name"/>
        </div>
        <div class="col-lg-4">
          <input id="input2" type="text" placeholder="Enter Unit Price"/>
        </div>
        <div class="col-lg-4">
          <input id="input3" type="text" placeholder="Enter Item Quantity"/>
        </div>
        <div class="col-lg-4">
          <button class="btn btn-primary">Add Order</button>
        </div>
      </div>
    </div>
  </div>
  
  <table id="tabletoadd"></table>
<script>
function addtotable(){
    tabletoadd.innerHTML="<tr><td>Item Name</td><td>Unit Price</td><td>Item Quantity</td></tr><tr><td>"+input1.value+"</td><td>"+input2.value+"</td><td>"+input3.value+"</td></tr>";
return false;
}
</script>
Помочь в развитии проекта:
Закрыть X