SKay SKay - 7 months ago 9
Javascript Question

JQuery identifying element id through variable: multiple table rows

I have tables in each tab, as shown in http://jsfiddle.net/Us8uc/5020/

The rows in each table has to be added and removed on button click.

I am replicating the row add function $("#anc_add2").click(function() {} and row remove function $("#anc_rem2").click(function(){ for each table with a different table id e.g. tabl1, tabl2, tabl3 etc.

The following function is important for adding and removing the rows in table:

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


How do I pass a TAB number as a parameter to a function so the table id can be generated with a variable and the variable can be used; something like this:

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


sample code is available at http://jsfiddle.net/Us8uc/5020/

Answer

Use data-* attributes to maintain custom data.

To use selected-tab-index in other methods, use it as global-variable.

Also note, use classes instead of id attributes while dealing with dynamic elements.

$(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') could be used to access data-id

Fiddle here

Comments