使用jquery将选定的表单附加到表中？

Question

我有以下代码示例：

{{1}}

当我在select表单中选择值时，我想将它附加到第一列并在其他列中选择next，它也会附加到表中。我会尝试这个，但它会附加到桌子上。

{{1}}

{＃alert（自动收报机）;＃}                 $（ '＃myTable的'）附加（TR）;

如何使用jQuery将3种不同的选定表单附加到表格主体的每个下一列？

Answer 1

如果您的选择框位于同一个表格中：

// 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>

如果您的选择框位于表格之外：

// 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>

使用Add＆amp; amp;添加多个行到表编辑按钮。

$(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>