JQuery通过变量识别元素id：多表行

Question

我在每个标签中都有表格，如http://jsfiddle.net/Us8uc/5020/所示

每个表中的行必须在按钮单击时添加和删除。

我正在为每个具有不同表的表复制行添加函数 $("#anc_add2").click(function() {} 和行删除函数 $("#anc_rem2").click(function(){ id 例如 tabl1、tabl2、tabl3 等。

以下函数对于添加和删除表中的行很重要：

 $('#tbl2 tr').last().after(rowdata);
 $('#tbl2 tr:last-child').remove();

如何将TAB编号作为参数传递给函数，以便可以使用变量生成表id并且可以使用该变量；像这样：

function onBtnClick(tabnumber) {
var tableid = "tabl" + tabnumber;
$(tableid tr).last().after(rowdata);
$(tableid tr:last-child').remove();
}

示例代码可在http://jsfiddle.net/Us8uc/5020/获取

Answer 1

使用data-* 属性来维护自定义数据。

要在其他方法中使用selected-tab-index，请将其用作global-variable。

另请注意，在处理动态元素时，请使用classes 而不是id 属性。

$(document).ready(function() {
  var global = 1;
  $(".tabs-menu a").click(function(event) {
    global = $(this).data('id');
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
  $(".anc_add").click(function() {
    var rowdata = '<tr > <td> <input size="5" type="text">	</td>';
    rowdata += '<td> <input  size="5"  type="text">	</td>	</tr>';
    $('#tbl' + global + ' tr').last().after(rowdata);
  });

  $(".anc_rem").click(function() {
    if ($('#tbl' + global + ' tr').size() > 1) {
      $('#tbl' + global + ' tr:last-child').remove();
    } else {
      alert('One row should be present in table');
    }
  });
});

body {
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  font-size: 14px;
}
.tabs-menu {
  height: 30px;
  float: left;
  clear: both;
}
.tabs-menu li {
  height: 30px;
  line-height: 30px;
  float: left;
  margin-right: 10px;
  background-color: #ccc;
  border-top: 1px solid #d4d4d1;
  border-right: 1px solid #d4d4d1;
  border-left: 1px solid #d4d4d1;
}
.tabs-menu li.current {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #fff;
  z-index: 5;
}
.tabs-menu li a {
  padding: 10px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.tabs-menu .current a {
  color: #2e7da3;
}
.tab {
  border: 1px solid #d4d4d1;
  background-color: #fff;
  float: left;
  margin-bottom: 20px;
  width: auto;
}
.tab-content {
  width: 660px;
  padding: 20px;
  display: none;
}
#tab-1 {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="tabs-container">
  <ul class="tabs-menu">
    <li class="current"><a href="#tab-1" data-id='1'>Tab 1</a>
    </li>
    <li><a href="#tab-2" data-id='2'>Tab 2</a>
    </li>
    <li><a href="#tab-3" data-id='3'>Tab 3</a>
    </li>
    <li><a href="#tab-4" data-id='4'>Tab 4</a>
    </li>
  </ul>
  <div class="tab">
    <div id="tab-1" class="tab-content">

      <!-- Add row and Delete buttons -->
      <a href="javascript:void(0);" class='anc_add'>Add Row</a>
      <a href="javascript:void(0);" class='anc_rem'>Remove Row</a>

      <!-- Table 1 in TAB 1 -->

      <table class="table text-center table-bordered table-striped volumes tabcenter" style="align:center; margin:15px; width:40%" border="1">
        <thead>
          <tr>
            <th><b>Node</b> 
            </th>
            <th><b>Data</b> 
            </th>
          </tr>
        </thead>
        <tbody id="tbl1">

          <tr>
            <td>
              <input size="5" type="text" id="Node_TR11">
            </td>
            <td>
              <input size="5" type="text" id="Data_TR11">
            </td>
          </tr>
        </tbody>
      </table>

    </div>
    <!-- End of Tab 1 -->
    <!-- Tab 2 Start -->
    <div id="tab-2" class="tab-content">
      <!-- Add row and Delete buttons for TAB2 -->
      <a href="javascript:void(0);" class='anc_add'>Add Row</a>
      <a href="javascript:void(0);" class='anc_rem'>Remove Row</a>
      <!-- Table 2 in TAB 2 -->

      <table class="table text-center table-bordered table-striped volumes tabcenter" style="align:center; margin:15px; width:40%" border="1">
        <thead>
          <tr>
            <th><b>Node</b> 
            </th>
            <th><b>Data</b> 
            </th>
          </tr>
        </thead>
        <tbody id="tbl2">

          <tr>
            <td>
              <input size="5" type="text" id="Node_TR21">
            </td>
            <td>
              <input size="5" type="text" id="Data_TR21">
            </td>
          </tr>
        </tbody>
      </table>



    </div>

    <div id="tab-3" class="tab-content">
      <p>TAB 3: Hello World !</p>
    </div>
    <div id="tab-4" class="tab-content">
      <p>TAB 4: Hello World!</p>
    </div>
  </div>
</div>

$(this).data('id') 可用于访问data-id

Fiddle here

Answer 2

你需要这个 html 而不是你的：

<a href="javascript:void(0);" class="anc_add">Add Row</a>
<a href="javascript:void(0);" class="anc_rem">Remove Row</a>

永远不要在您的 html 中重复 ids，因为它会使您的 html 以低于标准的方式工作。然后你需要这样的函数：

function addRow(context) {
    //add a row using the context object
}

function remRow(context) {
    //remove a row using the context object
}

function getContext(referrer) {
    return referrer.find("table");
}

$(function() {
    $(".anc_add").click(function () {
        addRow(getContext($(this).parent()));
    });

    $(.anc_rem).click(function() {
        remRow(getContext($(this).parent()));
    });
});

顺便说一句，如果你不能改变你的结构并且你有多个ids 的值是anc_add，那么你可以用属性选择器来选择它们：

$("[id=anc_add]")

作为

$("#anc_add")

将在找到第一个元素时停止，因为id 被认为是唯一的。