I am working on this website and as you can see i have a table of content with some Filters on top to filter the results. Basically you click on the checkboxes and you can filter the results between rows
I am actually trying to use this script to try to filter the results but does not works
$(document.body).on('change', "#zimmer4", function() {
$("#tableID tr.zimmer4").toggle(!this.checked);
});
$(document.body).on('change', "#zimmer3", function() {
$("#tableID tr.zimmer3").toggle(!this.checked);
});
$(document.body).on('change', "#zimmer2", function() {
$("#tableID tr.zimmer2").toggle(!this.checked);
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Zimmer
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<form class="filter">
<input id="zimmer4" class="unchecked" type="checkbox">4.5
<br>
<input id="zimmer3" class="unchecked" type="checkbox">3.5
<br>
<input id="zimmer2" class="unchecked" type="checkbox">2.5
<br>
</form>
</ul>
</span>
HTML Table Rows:
<div id="wrap" class="tabelle">
<table class="table" id="tableID">
<thead>
<tr>
<th>Wohnung</th>
<th>Zimmer</th>
<th>Stockwerk</th>
<th>Nettomiete</th>
<th>Bruttomiete</th>
<th>PDF</th>
</tr>
</thead>
<tbody>
<tr class="row1 row2OG row3OG zimmer3 zimmer2 range1 range2 range3 range5">
<td>1.001</td>
<td>4.5</td>
<td>EG / 1. OG</td>
<td>2252</td>
<td>2500</td>
<td><img src="/img/pdf.png" alt=""></td>
</tr>
</tbody>
</table>
</div>
What am i doing wrong?
Thanks in advice
Using the code from your example, it should work.
Also check the console on your site, it gives an error:
Uncaught TypeError: $ is not a function
I created a fiddle from your code, but editted a small thing: I assume you want to display the rows wich checkboxes are selected. Instead of hiding them when you select the checkbox:
https://jsfiddle.net/pp34rxhp/1/
use this code,
final code:
<html>
<head>
</head>
<style>
.hid {
display: none;
}
</style>
<body>
<select id="zimmer">
<option value="all">Select Zimmer</option>
<option value="2.5">2.5</option>
<option value="3.5">3.5</option>
<option value="4.5">4.5</option>
</select>
<table id="tab">
<tr><th>Wohnung</th><th>Zimmer</th><th>Stockwerk</th></tr>
<tr class="2.5"><td>xxx</td><td>2.5</td><td>www</td></tr>
<tr class="4.5"><td>xx</td><td>4.5</td><td>www</td></tr>
<tr class="3.5"><td>aaa</td><td>3.5</td><td>www</td></tr>
<tr class="3.5"><td>qqq</td><td>3.5</td><td>www</td></tr>
<tr class="3.5"><td>fff</td><td>3.5</td><td>www</td></tr>
<tr class="4.5"><td>ppp</td><td>4.5</td><td>www</td></tr>
</table>
<script>
var ele = document.getElementById("zimmer");
var rows = document.getElementById("tab").rows;
ele.addEventListener('change',filterTable);
function filterTable() {
for(var i = 1; i < rows.length; i++){
if(rows[i].classList.contains(this.value))
rows[i].classList.remove("hid");
else if (this.value == "all")
rows[i].classList.remove("hid");
else
rows[i].classList.add("hid");
}
}
</script>
</body>
</html>
Related
I'm trying to copy one row of a table and append a radio button to it. There are 3 rows that i declared in the html and an add button in jquery which can add names to the table. All of these rows are appended with a delete button. when I click the start button I want the names to go to the next div without the delete button and append a radio button to it. and the user should be able to vote the names.when i add names, an extra radio button without name value is passed to the div. I can't figure out why. I'm trying to make a voting system using jquery without using any databases(temporary). Please help. I can't figure out why the extra radio button is getting passed. It's only passed when i add candidate using the add button.
here's my code:
$(document).ready(function()
{
$('#start').click(function()
{
$("#div1").hide();
$("#buttonset1").hide();
$("#div2").show();
$("#voterName").val("")
if( $('#candidateTable thead tr').children().length = 1)
{
if( $('#newTable thead').children().length == 0 )
{
$('#newTable thead').append('<tr></tr>');
}
$('#newTable thead tr').append('<th>' + $($('#candidateTable thead tr').children()).text() + '</th>');
$('#candidateTable tbody tr').each(function(i)
{
if( $('#newTable tbody').children().length != $('#candidateTable tbody').children().length)
{
$('#newTable tbody').append('<tr></tr>');
}
$('#newTable tbody tr:nth-child(' + (i + 1) + ')').append('<td>' + $($(this).children()[0]).text()+'</td>'+'<td><input type="radio" class="radiobutton"></td>');
});
}
});
//delete candiates
$("#candidateTable").on('click', '.del', function()
{
$(this).closest('tr').remove();
});
//add candidate
$("#add").click(function()
{
//adding candidates
var candidatename = $("#candidatename").val();
if(candidatename.length!=0)
{
$("#candidateTable tbody").append('<tr><td>'+ candidatename +'</td>'+'<td>'+'<button class="del" id="Delete">Delete</button>'+'</td><tr>');
$("#candidatename").val('');
}
});
});
$(document).ready(function()
{
$("#final").click(function(){
$("#div2").hide();
$("#div4").show();
});
});
table, tr, th, td{
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Voting System </h1>
<body>
<div id="div1">
<table id="candidateTable">
<thead>
<tr>
<th id="candidatelist">Candidate Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>XXXX</td>
<td><button class="del" id="Delete">Delete</button></td>
</tr>
<tr>
<td>YYYY</td>
<td><button class="del" id="Delete">Delete</button></td>
</tr>
<tr>
<td>ZZZZ</td>
<td><button class="del" id="Delete">Delete</button></td>
</tr>
</tbody>
</table>
</div>
<div id="buttonset1">
<br>
<br>
<input type="text" id="candidatename">
<button id="add">Add</button>
<br>
<br>
<button id="start">Start</button>
<br>
<br>
</div>
<br>
<form action="javascript:void(0)">
<div id="div2" style="display: none;">
<div id="buttonset2">
<label>Name</label>
<input type="text" name="Name" id="votername">
<button id="vote">Vote</button>
<br>
<br>
<table id="newTable">
<thead>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</form>
<br>
<br>
<button id="final">Submit Votes</button>
</div>
</div>
<br>
<br>
<br>
<div id="div4" style="display:none;">
<h2>
Result
</h2>
</div>
</body>
</html>
Change this line of code:
$("#candidateTable tbody").append('<tr><td>'+ candidatename +'</td>'+'<td>'+'<button class="del" id="Delete">Delete</button>'+'</td><tr>');
with this:
$("#candidateTable tbody").append('<tr><td>'+ candidatename +'</td><td><button class="del" id="Delete">Delete</button></td></tr>');
in your add function. Now it will not add one extra row.
Full working example link is below
enter link description here
now i'm doing laravel project. i implement Dynamic Adding and removing input dropdown fields use javascript. function for adding and removing can work properly. but the problem is in the dropdown fields. inside dropdown, i add option "other", so when it selected "other", input type text will display.
i just able to display the input type text just only first line. but in other line is not correct. heres is my code
<div id="AddItemOption">
<div class="d-flex justify-content-center align-items-center">
<table class="table table-striped table-condensed table-additems">
<thead>
<tr>
<th class="align-middle border-0">items</th>
<th class="align-middle border-0">Delete</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>
<select name="items[]" class="form-control sellitem">
<option value="book">book</option>
<option value="pencil">pencil</option>
<option value="pen">pen</option>
<option value="other">other</option>
</select>
<input type="text" class='form-control inputother' style="display: none;" name="other[]" >
</td>
<td class="action">
<button type="submit" class="btn btn-danger ">
Delete
</button>
</td>
</tr>
<tr>
<td colspan="4">
<button type="button" class="btn btn-default btn-xs">+ Add New Item</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
and here is the script
<script>
var i=1;
$('#AddItemOption .btn-default').on('click', function(e) {
i++;
var el = $('.table-additems tbody tr:eq(0)').clone();
$(el).find('option:selected').removeAttr('selected');
$(el).find(':input').each(function(){
$(this).removeAttr('value');
});
$(this).closest('tr').before('<tr id="row'+i+'" >'+$(el).html()+'</tr>');
});
$(document).on('click', '#AddItemOption .btn-danger', function(e) {
if ($('.table-additems tbody tr').length == 2) {
var el = $('.table-additems tbody tr:eq(0)');
$(el).find('select:eq(0)').val($(el).find('select:eq(0) option:first').val());
$(el).find('select:eq(1)').val($(el).find('select:eq(1) option:first').val());
$(el).find('input:eq(0)').val('');
e.preventDefault();
}
else {
$(this).closest('tr').remove();
}
});
$('.sellitem').change(function(){
if ($(this).val() == 'other') {
$('.inputother').css({'display':'block'});
}else{
$('.inputother').css({'display':'none'});
}
});
</script>
and here is the link that i made for testing test add and remove function made by me just click "run" button to test the code
i want that. display input type text when select "other" is not in all line. but in each line. and when we add 'add new item' i just display default selection without display input type text..
please help
Under click event of #AddItemOption you can hide the input which is cloned by default and when the select-box is changed you can use $(this).closest("tr").find('.inputother') to show or hide only that input which is below the select-box .
Demo Code :
var i = 1;
$('#AddItemOption .btn-default').on('click', function(e) {
i++;
var el = $('.table-additems tbody tr:eq(0)').clone();
$(el).find('option:selected').removeAttr('selected');
$(el).find(':input').each(function() {
$(this).removeAttr('value');
});
//while cloning hide other input
$(el).find('.inputother').css({
'display': 'none'
});
$(this).closest('tr').before('<tr id="row' + i + '" >' + $(el).html() + '</tr>');
});
$(document).on('click', '#AddItemOption .btn-danger', function(e) {
if ($('.table-additems tbody tr').length == 2) {
var el = $('.table-additems tbody tr:eq(0)');
$(el).find('select:eq(0)').val($(el).find('select:eq(0) option:first').val());
$(el).find('select:eq(1)').val($(el).find('select:eq(1) option:first').val());
$(el).find('input:eq(0)').val('');
e.preventDefault();
} else {
$(this).closest('tr').remove();
}
});
//use this because other slect-box are dynmically created
$(document).on('change', '.sellitem', function(e) {
if ($(this).val() == 'other') {
//find this ->closest trs-> get input box show
$(this).closest("tr").find('.inputother').css({
'display': 'block'
});
} else {
$(this).closest("tr").find('.inputother').css({
'display': 'none'
});
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ajaxModalBody">
<div class="container-fluid">
<div id="AddItemOption">
<div class="d-flex justify-content-center align-items-center">
<table class="table table-striped table-condensed table-additems">
<thead>
<tr>
<th class="align-middle border-0">items</th>
<th class="align-middle border-0">Delete</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>
<select name="items[]" class="form-control sellitem">
<option value="book">book</option>
<option value="pencil">pencil</option>
<option value="pen">pen</option>
<option value="other">other</option>
</select>
<input type="text" class='form-control inputother' style="display: none;" name="other[]">
</td>
<td class="action">
<button type="submit" class="btn btn-danger ">
Delete
</button>
</td>
</tr>
<tr>
<td colspan="4">
<button type="button" class="btn btn-default btn-xs">+ Add New Item</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
var i=1;
$('#AddItemOption .btn-default').on('click', function(e) {
i++;
var el = $('.table-additems tbody tr:eq(0)').clone();
$(el).find('.inputother').attr('count', i);
$(el).find('.inputother').addClass('inputothercount' + i);
$(el).find('.inputother').removeClass('firstinput');
$(el).find('.sellitem').attr('count', i);
// $(el).find('.sellitem').class('count' + i);
$(el).find('option:selected').removeAttr('selected');
$(el).find(':input').each(function(){
$(this).removeAttr('value');
});
$(this).closest('tr').before('<tr id="row'+i+'" >'+$(el).html()+'</tr>');
listen();
});
$(document).on('click', '#AddItemOption .btn-danger', function(e) {
if ($('.table-additems tbody tr').length == 2) {
var el = $('.table-additems tbody tr:eq(0)');
$(el).find('select:eq(0)').val($(el).find('select:eq(0) option:first').val());
$(el).find('select:eq(1)').val($(el).find('select:eq(1) option:first').val());
$(el).find('input:eq(0)').val('');
e.preventDefault();
}
else {
$(this).closest('tr').remove();
}
});
function listen() {
$('.sellitem').change(function(){
var count = $(this).attr('count') || 1;
if (count == 1) {
if ($(this).val() == 'other') {
$('.firstinput').css({'display':'block'});
}else{
$('.firstinput').css({'display':'none'});
};
return;
} else {
if ($(this).val() == 'other') {
$('.inputothercount' + count).css({'display':'block'});
}else{
$('.inputothercount' + count).css({'display':'none'});
}
}
});
}
listen();
You can play with it here https://repl.it/repls/DefiniteMintyScandisk#index.html and you would need to add firstinput class in <input type="text" class='form-control inputother' style="display: none;" name="other[]" > also
When you add and remove display through class .inputother you are doing it for all elements placed on view. You should add class inputothercontent${count} to it so you can find specific element by count and hide display appropriate div.
Do add firstinput class by default in html and remove it when appending other elements.
You will need to awake listener again to listen for .sellitem click after adding element to dom. It don't auto refresh for dynamically added elements.
You should save current count in attribute of sellItem element so on click you can know which element got changed and change display based on that.
I have 3 <select> from which I would like to filter a table and at the same time filter each other using their options. I will first show you the code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div>
Select A type
<select id="A">
<option>Toate</option>
<option>A1</option>
<option>A2</option>
<option>A3</option>
</select>
</div>
<div>
Select B type
<select id="B">
<option>Toate</option>
<option>B1</option>
<option>B2</option>
<option>B3</option>
<option>B4</option>
<option>B5</option>
<option>B6</option>
</select>
</div>
<div>
Select C type
<select id="C">
<option>Toate</option>
<option>C1</option>
<option>C2</option>
<option>C3</option>
<option>C4</option>
<option>C5</option>
<option>C6</option>
<option>C7</option>
<option>C8</option>
<option>C9</option>
<option>C10</option>
</select>
</div>
<br/>
<table id="X">
<thead>
</thead>
<tbody>
<tr>
<td>A1,B1,C1</td>
</tr>
<tr>
<td>A1,B1,C2</td>
</tr>
<tr>
<td>A1,B1,C3</td>
</tr>
<tr>
<td>A1,B2,C4</td>
</tr>
<tr>
<td>A1,B2,C5</td>
</tr>
<tr>
<td>A1,B3,C6</td>
</tr>
<tr>
<td>A2,B4,C7</td>
</tr>
<tr>
<td>A2,B5,C8</td>
</tr>
<tr>
<td>A2,B5,C9</td>
</tr>
<tr>
<td>A3,B6,C10</td>
</tr>
</tbody>
</table>
</body>
</html>
and the script I managed to pull off so far is this:
$('#A,#B,#C').on('change', function() {
$('table tbody tr td').css("display", "none");
var optiuneaSelectata = this.value;
$('table tbody tr td:contains("' + optiuneaSelectata + '")').css("display", "table-cell");
})
If I choose for example A1, I want to show in the table all the td that contain A1, if I choose A2 show all the td that contain A2 and so on. My code does just that so far. The problem is that I want to restrict the other selects too. For example if I choose C10, in the first select I should only be able to choose A3 and in the second one B6.
You could use the following code. It has a helper function which will build a CSS selector based on the 3 selected values in the 3 select boxes. The function can accept parameters in which case an exception can be made for one select box. The CSS selector will then use a specified value instead of the selected value in that particular select box.
The function will apply that CSS selector and return the rows that match.
The click handler will first use the above function to show only the rows in the table that match the three selected values. Then it will check which values in a select box can be combined with the two other selected values to find at least one row, again using the above helper function:
// Helper function: returns rows that meet the condition in the 3
// select boxes. The optional arguments can specify one of the select boxes
// and which value to use instead of the selected value in that select box
function getRows(override, value) {
var filter = "table tbody tr td";
$("#A,#B,#C").each(function() {
var test = this === override ? value : $(this).val();
if (test !== "Toate") filter += ":contains(" + test + ")";
});
return $(filter).parent();
}
$('#A,#B,#C').on('change', function() {
$('table tbody tr').hide();
getRows().show();
$('#A,#B,#C').each(function (i, select) {
$('option', this).each(function () {
$(this).toggle(getRows(select, $(this).text()).length > 0);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Select A type
<select id="A">
<option>Toate</option>
<option>A1</option>
<option>A2</option>
<option>A3</option>
</select>
</div>
<div>
Select B type
<select id="B">
<option>Toate</option>
<option>B1</option>
<option>B2</option>
<option>B3</option>
<option>B4</option>
<option>B5</option>
<option>B6</option>
</select>
</div>
<div>
Select C type
<select id="C">
<option>Toate</option>
<option>C1</option>
<option>C2</option>
<option>C3</option>
<option>C4</option>
<option>C5</option>
<option>C6</option>
<option>C7</option>
<option>C8</option>
<option>C9</option>
<option>C10</option>
</select>
</div>
<br/>
<table id="X">
<thead>
</thead>
<tbody>
<tr>
<td>A1,B1,C1</td>
</tr>
<tr>
<td>A1,B1,C2</td>
</tr>
<tr>
<td>A1,B1,C3</td>
</tr>
<tr>
<td>A1,B2,C4</td>
</tr>
<tr>
<td>A1,B2,C5</td>
</tr>
<tr>
<td>A1,B3,C6</td>
</tr>
<tr>
<td>A2,B4,C7</td>
</tr>
<tr>
<td>A2,B5,C8</td>
</tr>
<tr>
<td>A2,B5,C9</td>
</tr>
<tr>
<td>A3,B6,C10</td>
</tr>
</tbody>
</table>
You can simply put more parameters this way.
$("table tbody tr td:contains('A1'):contains('B1'):contains('C1')").css( "text-decoration", "underline" );
I am dynamically adding elements. However when I try and serialize the form, none of the dynamically generated elements are serialized.
This is the function I'm using to add elements to the page :
function addObjects(IDname,classname)
{
//to add more objects
var number;
switch(classname)
{
case "name":
number = no_Name++;
break;
case "part":
number = no_part++;
break;
}
var id = classname + number;
$("#"+IDname).append('<tr class="'+id+'"><td><input id="'+id+'" class="'+id+'" type="text"> <button class="'+id+'" onclick=removeAdditions("'+id+'")>x</button></td></tr>');
}
The page looks like this:
<html>
<head>
<script src="Controller.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//in order to prevent form reload when button click occurs
$(document).ready(function(){
document.getElementById("ReportForm").onsubmit = function (event) { event.preventDefault(); }
});
</script>
</head>
<body>
<div class="detailsPane" id="detailsPane1" >
<form id="ReportForm" name="ReportForm" >
<table style="width: 100%;">
<tbody>
<tr>
<td>
1. Describe the Status briefly-
</td>
<td>
<textarea id="StatDescp" name="StatDescp"></textarea>
</td>
</tr>
</tbody>
</table>
<br>
<table style="width: 100%;">
<thead>
<tr>
<th colspan="4" align="top">
Part Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top;">
Part Name:
</td>
<td style="vertical-align:top;">
<table >
<tbody id="PartName">
<tr class="partname0">
<td><input class="part_name" type="text"> <button onclick='addObjects("PartName","part_name");'>+</button></td>
</tr>
</tbody>
</table>
</td>
<tbody>
</table>
</form>
</div>
<div id="buttonDiv" >
<a class="bottomLeftResultDiv" id="messageBox"></a>
<input type="button" id="saveButton" value="Save" style="width:85px" onclick="save();" />
</div>
</body>
</html>
And finally here is the save Button.
function save() {
var select = document.getElementById('newReportPane');
var contents = $('#ReportForm').serialize();
contents = contents.replace(/=on/g, "=checked");
contents = contents.replace(/\+/g, " ");
$("#messageBox").html("Saving report...");
console.log(contents);
$.post("/Report/Report1", { action: "save", content: contents }, function (data) {
if (data != "ACK")
$("#messageBox").html("Unable to save.");
else
$("#messageBox").html("Report saved successfully");
});
}
When I click on the save button, it only posts this StatDescp= without any of the dynamically generated elements.
I really can't figure out why.
Any help would be appreciated.
Give a name= attribute to each of your added inputs.
From http://api.jquery.com/serialize/
For a form element's value to be included in the serialized string,
the element must have a name attribute.
I have a page that the user can dynamically add rows or tables to. I need to count the rows on a given table using jQuery to see if I just need to insert a row or a row and the header. Right now the count is just counting all rows on all tables. I am using jQuery 1.7.2 and the jquery templeter.
<div id="ClonePoint">
<button id="exitSection" class="closesection"><span>Close</span></button> <br /> <br />
<button class="btnEncode" id="buttonEncode">Encode</button>
<input id="encryptedTokenClone" />
<button class="btnDecode" id="buttonDecode">Decode</button>
<table class="tokenTable" cellpadding="3px">
<tbody class="tokenBody" >
</tbody>
</table>
<button id="addRow" class="addingRow">Add Row</button>
</div>
And the jQuery that is adding the rows
$('#BackgroundArea').on('click', '.addingRow', function () {
var selectedDiv = $(this).parent();
var selectedTable = $(selectedDiv).children('.tokenTable');
var rowCount = 0;
rowCount = $('.tokenTable .tokenBody').children('tr').length;
if (rowCount > 0) {
$("#tokenAddRowTemplate")
.tmpl()
.appendTo(selectedTable);
} else {
$("#TableHeader")
.tmpl()
.appendTo(selectedTable);
$("#tokenAddRowTemplate")
.tmpl()
.appendTo(selectedTable);
}
});
The html for the insert is
<script id="TableHeader" type="text/html">
<tr id="TableHead">
<th width="55px">Delete Row</th>
<th align="right"> Key </th>
<th align="left"> Value </th>
</tr>
</script>
<script id="tokenAddRowTemplate" type="text/html">
<tr id="tokenRow">
<td class="deleteRow" id="tokenCell">
<button class="deleteRow">
<span>delete row</span>
</button>
</td>
<td class="keyValue" id="tokenCell">
<div class="edit" contenteditable="true"></div>
</td>
<td class="valueValue" id="tokenCell">
<div class="edit" contenteditable="true"></div>
</td>
</tr>
</script>
This should give tr count in your table.
$("#yourTableId tr").length
Is this what your are looking for ?
If each table is followed by its own "Add Row" button:
var $table = $(this).prev(),
rowCount = $table.find('.tokenBody').children('tr').length;
if (rowCount > 0) {
...
This assumes the "Add Row" button immediately follows the table.
To make the code less brittle, you could consider using a container element, like this:
<div class="tokenTableContainer">
<table class="tokenTable">
...
<table>
<button class="addingRow">...</button>
</div>
Then you can do this:
$('.addingRow').click(function() {
var $table = $(this).closest('.tokenTableContainer').find('.tokenTable');
...
});