Question

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

所示

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

我正在复制行添加函数$（“＃anc_add2”）。click（function（）{}和row remove function $（“＃anc_rem2”）。click（function（）{for each table with a table 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

this one

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中复制id，因为它会使你的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()));
    });
});

顺便说一句，如果您无法更改结构并且您有多个id的值为anc_add，那么您可以使用属性选择器选择它们：

$("[id=anc_add]")

作为

$("#anc_add")

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

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

2 个答案: