Append selected form into table using jquery?

Question

I have code example below:

  <label for="">Select Ticker:  </label>
    <select class="form-control" style="display: inline" id='selected'>
        {% for p in tickers %}
            <option value="{{ p.ticker_name }}">
                {{ p.ticker_name }}
            </option>
        {% endfor %}
    </select>
    <label for="">Select Ratio:  </label>
    <select class="form-control" style="display: inline" id="fin_ratio">
        {% for f in fin_ratio %}
            <option value="">
                {{ f.ratio_code }}
            </option>
        {% endfor %}
    </select>
    <label for="">Select Item:  </label>
    <select class="form-control" style="display: inline" id="item_code">
        {% for i in items %}
            <option value="">
                {{ i.item_code }}
            </option>
        {% endfor %}
    </select>

<div class="col-md-12" style="">
        <table class="table table-responsive" style="width: 100%" id="myTable">
            <thead>

            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

When I select the value in select form I want to append it to the first column and select next in other it also append into the table. I will try this but it append all to the table.

$(document).on('change', '#selected', function () {
            var ticker = $( "#selected" ).val();
            var ratio = $( "#fin_ratio" ).val();
            alert(ratio);
            var item = $("#item_code").val();
            var tr = (
                  '<tr>' +
                    '<td>'+ ticker +'</td>'+
                    '<td>'+ ratio+'</td>'+
                    '<td>' + item + '</td>' +
                  '</tr>'
                );

{# alert(ticker);#} $('#myTable').append(tr);

How can I use jQuery to append 3 different selected forms into each next column in table body?

The HTML you've shown doesn't seem entirely relevant to the problem you've described (there's no sign of '3 forms' and there are no columns). However api.jquery.com/append is what you need — Rory McCrossan
– Rory McCrossan, Commented Aug 21, 2017 at 10:16
Please provide HTML of your form atleast selector, And is table already available on the page or you want it to be added as well. — amit wadhwani
– amit wadhwani, Commented Aug 21, 2017 at 10:17
Do you want to display the values of selected select boxes in the corresponding column in that particular row where this select boxes exists? — gjijo
– gjijo, Commented Aug 21, 2017 at 11:43
@amitwadhwani: I will add the code more clearly, you may have any idea for me. Thanks — Tho Le Hoang
– Tho Le Hoang, Commented Aug 22, 2017 at 1:42
@gjijo: Exactly, I will add more code, so you may help me in this situation. Thanks. — Tho Le Hoang
– Tho Le Hoang, Commented Aug 22, 2017 at 1:43

gjijo · Accepted Answer · 2017-08-22 08:56:49Z

If your select boxes are in same table:

// Finding index of columns
var tickerColumnIndex = $('table tr th:contains(Ticker)').index();
var ratioColumnIndex = $('table tr th:contains(Ratio)').index();
var itemColumnIndex = $('table tr th:contains(Item)').index();

// Change event for Ticker
$(document).on('change', '#selected', function() {
  var txt = $('#selected option:selected').text();
  $(this).closest('tr').find('td').eq(tickerColumnIndex).text(txt);
});

// Change event for Ratio
$(document).on('change', '#fin_ratio', function() {
  var index = $('table tr th:contains(Ratio)').index();
  var txt = $('#fin_ratio option:selected').text();
  $(this).closest('tr').find('td').eq(ratioColumnIndex).text(txt);
});

// Change event for Item
$(document).on('change', '#item_code', function() {
  var index = $('table tr th:contains(Item)').index();
  var txt = $('#item_code option:selected').text();
  $(this).closest('tr').find('td').eq(itemColumnIndex).text(txt);
});

table {
  width: 100%;
}

table tr th,
table tr td {
  width: 25%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th></th>
      <th>Ticker</th>
      <th>Ratio</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label for="">Select Ticker:  </label>
        <select class="form-control" style="display: inline" id='selected'>
        <option>--select--</option>
        <option value="Ticker1">Ticker 1</option>
        <option value="Ticker1">Ticker 2</option>
        <option value="Ticker1">Ticker 3</option>
    </select>
        <br />
        <label for="">Select Ratio:  </label>
        <select class="form-control" style="display: inline" id='fin_ratio'>
        <option>--select--</option>
        <option value="Ticker1">Ratio 1</option>
        <option value="Ticker1">Ratio 2</option>
        <option value="Ticker1">Ratio 3</option>
    </select>
        <br />
        <label for="">Select Item:  </label>
        <select class="form-control" style="display: inline" id='item_code'>
        <option>--select--</option>
        <option value="Ticker1">Item 1</option>
        <option value="Ticker1">Item 2</option>
        <option value="Ticker1">Item 3</option>
    </select>
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <label for="">Select Ticker:  </label>
        <select class="form-control" style="display: inline" id='selected'>
        <option value="Ticker1">Ticker 1</option>
        <option value="Ticker1">Ticker 2</option>
        <option value="Ticker1">Ticker 3</option>
    </select>
        <br />
        <label for="">Select Ratio:  </label>
        <select class="form-control" style="display: inline" id='fin_ratio'>
        <option value="Ticker1">Ratio 1</option>
        <option value="Ticker1">Ratio 2</option>
        <option value="Ticker1">Ratio 3</option>
    </select>
        <br />
        <label for="">Select Item:  </label>
        <select class="form-control" style="display: inline" id='item_code'>
        <option value="Ticker1">Item 1</option>
        <option value="Ticker1">Item 2</option>
        <option value="Ticker1">Item 3</option>
    </select>
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <label for="">Select Ticker:  </label>
        <select class="form-control" style="display: inline" id='selected'>
        <option value="Ticker1">Ticker 1</option>
        <option value="Ticker1">Ticker 2</option>
        <option value="Ticker1">Ticker 3</option>
    </select>
        <br />
        <label for="">Select Ratio:  </label>
        <select class="form-control" style="display: inline" id='fin_ratio'>
        <option value="Ticker1">Ratio 1</option>
        <option value="Ticker1">Ratio 2</option>
        <option value="Ticker1">Ratio 3</option>
    </select>
        <br />
        <label for="">Select Item:  </label>
        <select class="form-control" style="display: inline" id='item_code'>
        <option value="Ticker1">Item 1</option>
        <option value="Ticker1">Item 2</option>
        <option value="Ticker1">Item 3</option>
    </select>
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

If your select box is outside the table:

// Finding index of columns
var tickerColumnIndex = $('.tbl-display tr th:contains(Ticker)').index();
var ratioColumnIndex = $('.tbl-display tr th:contains(Ratio)').index();
var itemColumnIndex = $('.tbl-display tr th:contains(Item)').index();

// Change event for Ticker
$(document).on('change', '#selected', function() {
  var txt = $('#selected option:selected').text();
  $('.tbl-display tbody tr:first').find('td').eq(tickerColumnIndex).text(txt);
});

// Change event for Ratio
$(document).on('change', '#fin_ratio', function() {
  var index = $('table tr th:contains(Ratio)').index();
  var txt = $('#fin_ratio option:selected').text();
  $('.tbl-display tbody tr:first').find('td').eq(ratioColumnIndex).text(txt);
});

// Change event for Item
$(document).on('change', '#item_code', function() {
  var index = $('table tr th:contains(Item)').index();
  var txt = $('#item_code option:selected').text();
  $('.tbl-display tbody tr:first').find('td').eq(itemColumnIndex).text(txt);
});

table {
  width: 100%;
}

table tr th,
table tr td {
  width: 33%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">Select Ticker:  </label>
<select class="form-control" style="display: inline" id='selected'>
        <option>--select--</option>
        <option value="Ticker1">Ticker 1</option>
        <option value="Ticker1">Ticker 2</option>
        <option value="Ticker1">Ticker 3</option>
    </select>
<br />
<label for="">Select Ratio:  </label>
<select class="form-control" style="display: inline" id='fin_ratio'>
        <option>--select--</option>
        <option value="Ticker1">Ratio 1</option>
        <option value="Ticker1">Ratio 2</option>
        <option value="Ticker1">Ratio 3</option>
    </select>
<br />
<label for="">Select Item:  </label>
<select class="form-control" style="display: inline" id='item_code'>
        <option>--select--</option>
        <option value="Ticker1">Item 1</option>
        <option value="Ticker1">Item 2</option>
        <option value="Ticker1">Item 3</option>
    </select>

<table class="tbl-display">
  <thead>
    <tr>
      <th>Ticker</th>
      <th>Ratio</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Adding multiple rows to table using Add & Edit button.

$(document).on('click', '#btn_Add', function() {
  var Tickertxt = $('#selected option:selected').text();
  var Ratiotxt = $('#fin_ratio option:selected').text();
  var Itemtxt = $('#item_code option:selected').text();

  var Tickerval = $('#selected option:selected').val();
  var Ratioval = $('#fin_ratio option:selected').val();
  var Itemval = $('#item_code option:selected').val();
  var tr = $('<tr>');
  tr.append($('<td val="' + Tickerval + '">' + Tickertxt + '</td>'));
  tr.append($('<td val="' + Ratioval + '">' + Ratiotxt + '</td>'));
  tr.append($('<td val="' + Itemval + '">' + Itemtxt + '</td>'));
  tr.append($('<td><input type="submit" value="Edit" id="btn_Edit" /></td>'));
  $('table tbody').append(tr);

  $('#selected').val('');
  $('#fin_ratio').val('');
  $('#item_code').val('');
});

$(document).on('click', '#btn_Edit', function() {
  var currentTr = $(this).closest('tr');
  var indx = $(currentTr).prop('index');
  var TickerVal = $(currentTr).find('td').eq(0).attr('val');
  var RatioVal = $(currentTr).find('td').eq(1).attr('val');
  var ItemVal = $(currentTr).find('td').eq(2).attr('val');
  $('#selected').val(TickerVal);
  $('#fin_ratio').val(RatioVal);
  $('#item_code').val(ItemVal);
  currentTr.remove();
});

table {
  width: 100%;
}

table tr th,
table tr td {
  width: 31%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">Select Ticker:  </label>
<select class="form-control" style="display: inline" id='selected'>
        <option>--select--</option>
        <option value="Ticker1">Ticker 1</option>
        <option value="Ticker2">Ticker 2</option>
        <option value="Ticker3">Ticker 3</option>
    </select>
<br />
<label for="">Select Ratio:  </label>
<select class="form-control" style="display: inline" id='fin_ratio'>
        <option>--select--</option>
        <option value="Ratio1">Ratio 1</option>
        <option value="Ratio2">Ratio 2</option>
        <option value="Ratio3">Ratio 3</option>
    </select>
<br />
<label for="">Select Item:  </label>
<select class="form-control" style="display: inline" id='item_code'>
        <option>--select--</option>
        <option value="Item1">Item 1</option>
        <option value="Item2">Item 2</option>
        <option value="Item3">Item 3</option>
    </select>
<input type="submit" value="Add" id="btn_Add" />
<table class="tbl-display">
  <thead>
    <tr>
      <th>Ticker</th>
      <th>Ratio</th>
      <th>Item</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

One more questions in this situation, if I only get the value in each form by using jQuery, how can I do that because I want to get those value for using ajax request to the server to get the data on the server-side.
$('#fin_ratio option:selected').text(); will give the text and $('#fin_ratio option:selected').val(); will give its value.
Your code work perfectly when I try it, but how I can append in the next td tag for 3 other value in my table.

Collectives™ on Stack Overflow

Append selected form into table using jquery?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related