Question

我正在创建一个站点来操作使用jquery创建的多个表的数据....当用户在页面上时，大多数表都会被添加。

我对jquery和javascript也很新 - 所以我可能会遗漏一些基本的东西。

我已经能够获得与表头一起创建的按钮，然后向表和按钮添加了类。我希望能够通过单击关联按钮为每个表添加可编辑的行和列，但无论是通过类还是其他方式，我都找不到将两者链接在一起的方法。

以下是我添加表格的代码：

$("button.agentPerson").on("click", function() {
  var $newAgent = $('input.agentPerson').val();

  if ($('input.agentPerson').val() !== "") {
    $("div.commissionInfo").append("<br/><br/><table><tr><th>Address</th><th>Contract Date</th><th>Production</th></tr><button>New Deal</button></table><br/>");

    $("tbody:last-child").addClass($newAgent);
    $("button:last-child").addClass($newAgent);
    $("select.addToThis").append($('<option>', {
      value: $newAgent,
      text: $newAgent,
    }));

  }
});

我还在页面上有一个下拉列表，我最终希望能够隐藏所选表格旁边的所有表格。一旦我弄清楚如何通过类将两者连接在一起，我认为这将很简单。

谢谢。如果您需要任何进一步的代码，请告诉我。

我刚刚找到.closest和.parent方法，但我也无法让它们工作。

这是我最近尝试将按钮附加到表格。

$("body").on("click", "button", function(event) {
  var $theTable = $(this).closest("tbody");

  $theTable.append("<tr></tr><tr></tr><tr></tr>");
});

Answer 1

你可以这样做：

将当前$newAgent存储到按钮的data-table属性中;
将当前$newAgent类添加到表中;
然后，您可以使用data-table属性和类的按钮来定位表格。

var $newAgent;
$(".addTable").click(function(){
  if ( $('input.agentPerson').val() !== "" && $('input.agentPerson').val() !== $newAgent) {
    $newAgent = $('input.agentPerson').val();
    $("div.commissionInfo").append("<br/><br/><table class='"+$newAgent+"'><thead><tr><th>Address</th><th>Contract Date</th><th>Production</th></tr></thead><tbody></tbody></table><br/><button data-table='"+$newAgent+"' class='appendRow'>New Deal</button>");

    $("select.addToThis").append($('<option>', {
      value: $newAgent,
      text: $newAgent,
    }));

  }else{
    // throw an error if the field is empty or isn't updated after last table
    // alert for demo:
    alert('please update field!');
  }
})

$("body").on("click", "button.appendRow", function(event) {
  var $theTable = $("table."+$(this).attr('data-table')+" tbody");
  $theTable.append("<tr><td>blah</td><td>blah</td><td>blah</td></tr>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class=agentPerson value="blah"/>
<button type="button" class="addTable">Add table</button>
<div class="commissionInfo"></div>

Explantion：

+ (Reference)用于合并两个字符串。与'Hello ' + 'world'类似，'Hello world'
data-table (Reference)只是元素的一个属性，与<table>元素无关（可以是data-something）。例如：data-something可以通过以下方式访问：
- $(element).data('something');（它更有用in certain cases）
- $(element).attr('data-something');（在这种情况下更好用）

在用户动态创建的特定表中添加一行

1 个答案: