javascript - 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'> {% 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"> {% 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"> {% 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 select value in select form want append first column , select next in other append table. try append 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 use jquery append 3 different selected forms each next column in table body?
if select boxes 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 ticker $(document).on('change', '#selected', function() { var txt = $('#selected option:selected').text(); $(this).closest('tr').find('td').eq(tickercolumnindex).text(txt); }); // change event 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 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 select box outside 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 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 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 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 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>
Comments
Post a Comment