CODEWITHSUNDEEP
javascriptjquery
Tho Le Hoang
Tho Le Hoang

Reputation: 27

Append selected form into table using jquery?

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?

Upvotes: 1

Views: 1694

Answers (1)

gjijo
gjijo

Reputation: 1206

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>

Upvotes: 1

Related Questions