Get the cell values of row when clicked in bootstrap table - javascript

Is there any way I can get the value of each cell when I click a particular row of a bootstrap table. I want to access the value of all the cells of that row in some other function. Currently my rowClick event passes the index of row clicked. Here is my table
<Table className='flags-table' id="flags-table" responsive hover>
<thead>
<tr>
<th></th>
<th> Time In</th>
<th> Time Out</th>
<th> Type</th>
<th> Category</th>
</tr>
</thead>
<tbody>
{
this.props.tag_fetch_reducer.tags.map((x, i) => (
<tr className={i === this.props.marker_reached_reducer.index ? 'selected' : ''} key={i} onClick={this.handleRowClick.bind(this, i)}>
<td>
<div className='red-box'></div>
</td>
<td> {this.secondsToHms(x.time)} </td>
<td> {this.secondsToHms(x.stopTime)} </td>
<td> {x.tagname} </td>
<td> {x.category}</td>
</tr>
))
}
</tbody>
</Table>


A method I've used is that I set data attributes for each cell on the row itself. What this does, is it allows you to access the values easily. You simply wire up the click event for the row using javascript/jQuery (my example uses jQuery):
(function(document, window, $) {
$('.flags-table tbody tr').on('click', function() {
var time = $(this).data('time');
var stopTime = $(this).data('stop-time');
var tagName = $(this).data('tag-name');
var category = $(this).data('category');
var key = $(this).data('key');
alert('Values: \r\n' +
'Time: ' + time + '\r\n' +
'Stop: ' + stopTime + '\r\n' +
'Tag: ' + tagName + '\r\n' +
'Category: ' + category + '\r\n' +
'Key: ' + key + '\r\n');
});
})(document, window, jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="flags-table" id="flags-table" responsive hover>
<thead>
<tr>
<th></th>
<th>Time In</th>
<th>Time Out</th>
<th>Type</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr data-time="08:00" data-stop-time="13:00" data-tag-name="test1" data-category="cat1" data-key="34098" class="low">
<td>
<div className="red-box"></div>
</td>
<td>08:00</td>
<td>13:00</td>
<td>Tag 1</td>
<td>Category 1</td>
</tr>
<tr data-time="09:00" data-stop-time="15:00" data-tag-name="test2" data-category="cat2" data-key="34096" class="low">
<td>
<div className="red-box"></div>
</td>
<td>09:00</td>
<td>15:00</td>
<td>Tag 2</td>
<td>Category 2</td>
</tr>
<tr data-time="03:00" data-stop-time="17:00" data-tag-name="test3" data-category="cat3" data-key="34095" class="low">
<td>
<div className="red-box"></div>
</td>
<td>03:00</td>
<td>17:00</td>
<td>Tag 3</td>
<td>Category 3</td>
</tr>
<tr data-time="06:00" data-stop-time="17:20" data-tag-name="test4" data-category="cat4" data-key="34094" class="low">
<td>
<div className="red-box"></div>
</td>
<td>06:00</td>
<td>17:20</td>
<td>Tag 4</td>
<td>Category 4</td>
</tr>
</tbody>
</table>

Related

Get a specific row from specific table with JavaScript?

Say my dynamic HTML looks something like this:
<table id="DanishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="19"><td>Company A</td><td>80</td><td>1980</td></tr>
<tr id="17"><td>Company B</td><td>12</td><td>1910</td></tr>
<tr id="26"><td>Company C</td><td>5000</td><td>2015</td></tr>
</table>
<table id="SwedishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="10"><td>Company D</td><td>500</td><td>1950</td></tr>
<tr id="12"><td>Company E</td><td>900</td><td>1990</td></tr>
<tr id="17"><td>Company F</td><td>90</td><td>2010</td></tr>
</table>
<table id="NorwegianCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="17"><td>Company G</td><td>105</td><td>1970</td></tr>
<tr id="18"><td>Company H</td><td>100</td><td>1980</td></tr>
<tr id="19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>
Each tr has an ID, but ID only relatively unique to the table, as other tables might have the ID, and the number of rows might vary.
How would I obtain the founding year (column 2) of a Swedish company with an id of 17?
I would imagine you would do it like this but I fail to find the correct code.
var table = document.getElementById("SwedishCompanies");
var row_index = ??? //should return 2
return table[row_index].cells[2].innerHTML;
I can't use getElementById just to get id "17", because I would risk getting Danish or Norwegian's company because the order of these tables is random.

you're just not using the right selector,
#DanishCompanies tr[id="17"]
will get you the tr with id 17 that's a child of DanishCompanies :
const row = document.querySelector('#DanishCompanies tr[id="17"]');
const year = row.cells[2].innerHTML;
console.log(year);
<table id="DanishCompanies">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr id="19">
<td>Company A</td>
<td>80</td>
<td>1980</td>
</tr>
<tr id="17">
<td>Company B</td>
<td>12</td>
<td>1910</td>
</tr>
<tr id="26">
<td>Company C</td>
<td>5000</td>
<td>2015</td>
</tr>
</table>
<table id="SwedishCompanies">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr id="10">
<td>Company D</td>
<td>500</td>
<td>1950</td>
</tr>
<tr id="12">
<td>Company E</td>
<td>900</td>
<td>1990</td>
</tr>
<tr id="17">
<td>Company F</td>
<td>90</td>
<td>2010</td>
</tr>
</table>
<table id="NorwegianCompanies">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr id="17">
<td>Company G</td>
<td>105</td>
<td>1970</td>
</tr>
<tr id="18">
<td>Company H</td>
<td>100</td>
<td>1980</td>
</tr>
<tr id="19">
<td>Company I</td>
<td>45</td>
<td>2000</td>
</tr>
</table>

this way (id with number values complicates the css select syntax)
function getTDval( tableId, rowId, colNum)
{
return document
.querySelector(`table#${tableId} tr[id="${rowId}"]`)
.cells[colNum].textContent
}
console.log( getTDval('SwedishCompanies','17',2) )
<table id="DanishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="19"><td>Company A</td><td>80</td><td>1980</td></tr>
<tr id="17"><td>Company B</td><td>12</td><td>1910</td></tr>
<tr id="26"><td>Company C</td><td>5000</td><td>2015</td></tr>
</table>
<table id="SwedishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="10"><td>Company D</td><td>500</td><td>1950</td></tr>
<tr id="12"><td>Company E</td><td>900</td><td>1990</td></tr>
<tr id="17"><td>Company F</td><td>90</td><td>2010</td></tr>
</table>
<table id="NorwegianCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="17"><td>Company G</td><td>105</td><td>1970</td></tr>
<tr id="18"><td>Company H</td><td>100</td><td>1980</td></tr>
<tr id="19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>

It is invalid HTML to reuse the same id value within a page. You might use private data-... attributes for that.
Apart from that, the following line gets the human readable text of the third child node (third column in this case), which is the year (as a string).
document.querySelector('#DanishCompanies tr[id="17"]')
.children[2].innerText;

If you can't rely on getElmentById that means that you are doing something wrong, an id should be unique in the whole html. I suggest a new naming technique, you can concatenate the parent table id with the current row id. Example:
<table id="NorwegianCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="NorwegianCompanies17"><td>Company G</td><td>105</td><td>1970</td></tr>
<tr id="NorwegianCompanies18"><td>Company H</td><td>100</td><td>1980</td></tr>
<tr id="NorwegianCompanies19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>
In that way you can simply call
const row = document.getElementById(rowId)

How to add dynamic texfield while clicking a checkbox?

I need to create textfield dynamically when I click checkbox in table. In table I have around 500 data. Each data has check box and user can search and select parameters. As below image, If user click Testing 1 checkbox from table, Same Testing1 value should present in Parameter name text field.
If the user selects Testing 2 checkbox, dynamically Textfield needs be added and Testing 2 value should be present in created textfield. If user uncheck checkbox, textfield has to be removed from table. I have attached snapshot for reference.
Below code for TextField which resides in table.
<div class="tab-content">
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>

You can do it like this:
$("#paramTable input[type='checkbox']").on("click", function() {
if ($(this).is(":checked")) {
let name = $(this).parent("td").next("td").text();
let newname = name.replace(" ", "_");
let newrow = $("<tr>");
let newcell = $("<td>");
let newinput = $("<input type='text' class='parameterName' name='" + newname + "' id='" + newname + "' value='" + name + "'/>");
newcell.append(newinput);
newrow.append(newcell);
let newcells = $("<td><input type='text' class='parameterDscription' name='parameter_description'></td><td><input type='text' class='expectedValue' name='expected_value'></td>")
newrow.append(newcells);
$("tbody.parameter_table").append(newrow);
} else {
let name = $(this).parent("td").next("td").text();
let newname = name.replace(" ", "_");
$("#addParamTable").find("#" + newname).closest("tr").remove();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramTable">
<tr>
<td><input type="checkbox"/></td>
<td>Testing 1</td>
<td>1, 4, 6, 5, 9</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>Testing 2</td>
<td>1, 4, 3, 5</td>
</tr>
</table>
<div class="tab-content">
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>

How to show table rows between two days?

I have a table. I want to show only table rows which match between two days
<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td> 20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
<tr>
<td>23-06-2019</td>
<td> Payment </td>
<td class="table_account capitalize">ajay </td>
<td>By cash</td>
</tr>
</tbody>
</table>
I want to show rows between date 20-6-2019 to 22-6-2019.
20-6-2019 |Payment | Ajay | By cash|
21-6-2019 |Payment | Ajay |By cash |
22-6-2019 |Payment | Ajay |Tran |

As your data is getting from server , you should hidden table first by css . Then get data and send to javascript function as param I test with displayInterval as below
function displayInterval(from, to) {
$("#Table tbody tr td:first-child").each(function() {
var curDate = setJsDate($(this).html());
var froms =setJsDate(from);
var tos = setJsDate(to);
if(curDate >= froms && curDate <= tos) {
} else {
$(this).parent().hide();
}
});
$("#Table tbody").show();
}
function setJsDate(d) {
if(typeof d == "number" || typeof d == "undefined") return;
var pattern = d.split('-');
var dt = new Date(pattern[2]+"-"+pattern[1] + "-"+pattern[0]);
return dt.getTime();
}
displayInterval('20-06-2019','22-06-2019');
#Table tbody {
display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td>20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
<tr>
<td>23-06-2019</td>
<td> Payment </td>
<td class="table_account capitalize">ajay </td>
<td>By cash</td>
</tr>
</tbody>
</table>

<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td> 20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
</tbody>
</table>

How pass row to other table with only jquery?

I am learning JavaScript, and I want pass row from table to other table like this:
Pass rows from table to other table without repeat the same row..
How do i?
I have this:
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
$("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
$(".btn_remove").click(function() {
$(this).parent().parent().remove();
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

You basically need to create a pseudo-class to identify the rows by their product id. In my example, I just named it e.g. "copy_1". You can then check if the ID already exists in the 2nd table. I also added, that the input field will be increased to add one product. If you don't want this, just remove the else-statement.
Side note: With the "on"-method, you can declare a global listener, which also applies on dynamically generated elements. You can use it for the remove button as well and don't need to redeclare it everytime, when someone adds a product. I change this in my code as well. See this post for more information about it: Jquery adding event listeners to dynamically added elements
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
// check if the row already exists in the 2nd table
// if no, add the line to the 2nd table
// if yes, add one product to the input field
if($("#second_table .copy_"+column1).length == 0)
{
$("#second_table").append("<tr class='copy_"+column1+"'><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number' value='1'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
}
else
{
var value = parseInt($("#second_table .copy_"+column1+" input").val()) + 1;
$("#second_table .copy_"+column1+" input").val(value);
}
});
$("body").on("click",".btn_remove", function() {
$(this).parent().parent().remove();
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

It looks like you are just missing an event handler for the input event in the second table. You'l want to use event delegation since the content is added dynamically.
The following code should do the trick:
$("#second_table").on("input", "input", function() {
var input = $(this);
var columns = input.closest("tr").children();
var price = columns.eq(3).text();
var calculated = input.val() * price;
columns.eq(5).text(calculated);
});
There's a running snippet below. You'll see the price calculate in real-time as you change the inputs in the second table.
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
$("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
$(".btn_remove").click(function() {
$(this).parent().parent().remove();
});
});
$("#second_table").on("input", "input", function() {
var input = $(this);
var columns = input.closest("tr").children();
var price = columns.eq(3).text();
var calculated = input.val() * price;
columns.eq(5).text(calculated);
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Can't find the selectors of a fixed header table

Original Table Example
Example with Fixed Table Header
The first example shows a comparison table that displays data dynamically in a column on click. When the table is full, it'll remove .addinfo class and go back to the second column to replace old data. The problem comes in when I try to use a fixed header plugin from this page. It creates a second thead to allow th to be fixed at the top, like this:
<table id="toptable" style="padding: 0px;">
<thead class="Original">
<tr>
<th style="visibility:hidden">-</th>
<th class="image addinfo">Fdw</th>
</tr>
</thead>
<thead class="Floating" style="display: none;"> //Second Thead//
<tr>
<th style="visibility:hidden">-</th>
<th class="image addinfo">Fdw</th>
</tr>
</thead>
<tbody>
<tr>
<td class="description">Name</td>
<td class="description addinfo">Fdw</td>
</tr>
<tr>
<td class="title">Age</td>
<td class="title addinfo">Fdw</td>
</tr>
<tr>
<td class="title">Age</td>
<td class="title addinfo">Fdw</td>
</tr>
<tbody>
</table>
As you see in the second example, it can't remove the class .addinfo when the table is full. I guess I need to change the table selectors in the script to get it to work. Can someone tell me which table selectors I should change?
This code only works for the first example:
$(function () {
function filltable(buttontext) {
var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;
i + 2 > $('th').length || $('th,td').filter(':nth-child(' + (i + 2) + ')')
.addClass('addinfo').html(buttontext);
}
$('.area').each(function () {
var area = $(this),
button = $(this).find('button'),
buttontext = button.text();
button.on("click", function () {
var allCells = $('table').find('th').length-1;
var fullCells = $('table th.addinfo').length;
console.log(allCells, fullCells);
if (allCells === fullCells) { // If table is full
$('table .addinfo').removeClass('addinfo');
filltable(buttontext);
} else { // If table isn't full
filltable(buttontext);
}
});
});
});
First Example Markup
<div class="area">
<button>Gah</button>
</div>
<div class="area">
<button>Kaj</button>
</div>
<div class="area">
<button>Fdw</button>
</div>
<div class="area">
<button>ffdf</button>
</div>
<table>
<thead>
<tr>
<th>Placeholder</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Age</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Nationality</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Education</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Background</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Language</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Change
var allCells = $('#toptable').find('th').length - 1;
To
var allCells = $('#toptable').find('th').length - 2;
JS FIDDLE DEMO

Categories

Resources