javascript - 单击表格外的文本并使用 jQuery 将其附加到指定的表格列中

Question

我有这样的图片显示:

我的 html 代码:

<div id="ticker_select" style="width: 50%; float: left">
        <div id="group" style="margin-bottom: 8px;">
        {% for tk in groups %}
            <a class="group_button" id="{{ tk.ticker_name }}">{{ tk }} </a>
        {% endfor %}
        {% for tk in ['HSX', 'HNX', 'UPCOM'] %}
            <a class="group_button" id="{{ tk.ticker_name }}">{{ tk }} </a>
        {% endfor %}
        </div>

        <div id="tickers" style="text-align: justify; margin-top: 10px; margin-right: 30px;">
            <!--The div tags with id="ticker" is a empty div,
            it already has value when make a request on server
            and put it into.
            -->
        </div>
    </div>
    <div id="ratio_select" style="width: 50%; float: right;">
        <div id="group" style="margin-bottom: 8px; margin-left: 10px;text-align: justify">
        {% for f in fin_ratio %}
            <a class="ratio_groups" id="{{ f.ratio_code }}">{{ f.ratio_code }} </a>
        {% endfor %}
        </div>

        <div id="ratios" style="text-align: center; margin-top: 10px;">
            <!--The div tags with id="ticker" is a empty div,
            it already has value when make a request on server
            and put it into.
            -->
        </div>
    </div>
</div>
<div class="row">
    <div class="table-responsive col-md-12" style="">
        <table class="tbl-display table" style="width: 100%" id="myTable">
            <thead>
                <tr>
                    <th>Ticker</th>
                    <th>Ratio</th>
                    <th>Item</th>
                  </tr>
            </thead>
            <tbody>

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

首先，我将 jQuery 与点击事件一起使用，以获取代码并将其附加到表中:

$(document).on('click', '.ticker_choices', function () {
            var ticker_name = $(this).text();
            var new_tr = "<tr data-id=''><td>" + ticker_name + "</td>";
                               new_tr += "<td></td>";
                               new_tr += "<td></td>";
                               new_tr += "</tr>";

            // Check value already exist when click on event.
            var table = $("#myTable");
            var exist;
            $(table).find("tr").each(function () {
                var check_value = $(this).text();
                if (check_value == ticker_name) {
                    exist = true;
                }
            });
            if (exist){
                alert("The ticker already exist!");
            } else {
                $('#myTable tbody').append(new_tr);
            }
        }); 

使用上面的代码，我可以创建新行，第一列是代码代码，第二列、第三列是空的。 我还创建了第二次点击以获取比率代码的值，但我不知道如何将这些值添加到第 1 列的索引中。它必须循环所有第二个 td 标签并在我点击时设置文本。

谢谢。

Answer 1

更新的答案:

所以我知道您希望发生一系列事件，然后将行添加到表中，我已尽力创建一个模型来说明这将如何发生。

请找到 JSFiddle here

代码:

var ticker = "", ratio = "", item ="";
$('#ratio_select').addClass("disabler");
$('#item_select').addClass("disabler");
$(document).on('click', '.ticker', function () {
  if(ticker === ""){
    ticker = $(this).text();
    $(this).prop('disabled', true);
    $('#ticker_select').addClass("disabler");
    $('#ratio_select').removeClass("disabler");
  }
}); 
$(document).on('click', '.ratio', function () {
  if(ratio === ""){
    ratio = $(this).text();
    $(this).prop('disabled', true);
    $('#ratio_select').addClass("disabler");
    $('#item_select').removeClass("disabler");
  }
}); 
$(document).on('click', '.item', function () {
  if(item === ""){
    item = $(this).text();
    $(this).prop('disabled', true);
    $('#ratio_select').addClass("disabler");
    $('#item_select').removeClass("disabler");
    addToTable();
  }
}); 
function addToTable(){
var ticker_name = $(this).text();
  var new_tr = "<tr data-id=''><td>" + ticker + "</td>";
  new_tr += "<td>" + ratio + "</td>";
  new_tr += "<td>" + item + "</td>";
  new_tr += "</tr>";

  // Check value already exist when click on event.
  var table = $("#myTable");
  $('#myTable tbody').append(new_tr);
  $('#ticker_select').removeClass("disabler");
  $('#ratio_select').removeClass("disabler");
  ticker = "";
  ratio = "";
  item ="";

}

---

旧答案:

您没有在模板中给出比例和项目值。

         $(document).on('click', '.ticker_choices', function () {
            var ticker_name = $(this).text();
            var new_tr = "<tr data-id=''><td>" + ticker_name + "</td>";
                               new_tr += "<td>" + <<ratio should come here>> + "</td>";
                               new_tr += "<td>" + <<item should come here>> + "</td>";
                               new_tr += "</tr>";

            // Check value already exist when click on event.
            var table = $("#myTable");
            var exist;
            $(table).find("tr").each(function () {
                var check_value = $(this).text();
                if (check_value == ticker_name) {
                    exist = true;
                }
            });
            if (exist){
                alert("The ticker already exist!");
            } else {
                $('#myTable tbody').append(new_tr);
            }
        });