Develop Reference

Dynamic table with a checkbox per row and only one can be checked (true)

I know similar questions have been asked but no one helped me with my problem.
I am displaying a dynamic table with all result from a sql request and the user has to choose one row by checking a checkbox but ONLY one. The thing is I don't know how to do this with a dynamic table.
Could someone tell me what I did wrong or what could be improved
Here is my html and javascript :
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" border="1">
<thead>
<tr>
<th>Position</th>
<th>Quantity</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in msg.payload">
<td ng-repeat="item in row" >{{item}}</td>
<td ><input type="checkbox" class="radio" value="1" name="row[1][]" /></td>
</tr>
</tbody>
</table>

Just need to change type="checkbox" by type="radio"

jquery- table column filter and row toggling together not working properly

I have created a table with column filter and a button "test" for toggling rows of that table
HTML
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.tablesorter.combined.js"></script>
<script src="js/widget-columnSelector.js"></script>
<script src="js/widget-sort2Hash.js"></script>
<div>
<input type="button" id="test" className="invalid" value="Hide">
<table id="testtable" class="tablesorter custom-popup">
<thead>
<tr>
<th class="filter-false">S.no</th>
<th class="filter-false">name</th>
<th class="filter-select" data-placeholder="Select All">Department</th>
<th class="filter-false">Age</th>
<th class="filter-false">Section</th>
</tr>
</thead>
<tbody>
<tr class="invalid">
<td>1</td>
<td>yyy</td>
<td>CSE</td>
<td>17</td>
<td>A</td>
<tr>
<tr>
<td>1</td>
<td>zzz</td>
<td>ECE</td>
<td>17</td>
<td>A</td>
<tr>
<tr class="invalid">
..
</tr>
...
</div>
JS
$(document).ready(function () {
$('#test').on('click', function () {
var name = $(this).attr('className');
if ($(this).val() == 'Hide' ) {
$('#testtable tr.' + name).hide();
$(this).val('Show');
} else{
$('#testtable tr.' + name).show();
$(this).val('Hide');
}
});
});
With the above JS code I can able to toggle rows which has class name "invalid".
But when I tried to add column filter in Department column, toggling is not working properly.
1.If I filter the column by selecting any option from dropdown and clicking hide button, The filtered row which has "invalid" is hiding properly..but if again i pressed show it showing all the "invalid" rows not only filtered.
2.If I filter the column by selecting any option and pressed hide,now rows are hided then if i select "select all", it is showing full table.
I dont even have any idea to solve above scenarios.
Please suggest me on this.

find child table selector from parent table - jQuery

I have a table structure like this. Fairly simple one.
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
At runtime I am binding a new row to this table for a particular rowclick. This new row contains a new table.
Now on clicking the row again, I want to be able to remove the newly added row(the new table).
I am using bootstrap table.
Here is what I have tried so far.
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
//if ($element.has('#newlyAddedTable').length) { ....// did not work
if ($('#myTable').has('#newlyAddedTable').length) { // this removes the table on any row click. Not what I intend to do
{
$("#newlyAddedTable").remove();
} else {
// some operation...
}
}
I want to be able to remove the newly added table on the row it was created.
Just more explanation based on the Answers below:
<tr> ----------> if i click this
<td>
<table id="newlyAddedTable"> ---------> this is added
</table>
</td>
</tr>
<tr> ----------> if i again click this or maybe any other row in the table
<td>
<table id="newlyAddedTable"> ---------> this is removed
</table>
</td>
</tr>

Update: from OP's comment below it sounds like the best way to implement the new table is to use a class selector and not an id selector. The code below has been updated accordingly. ***Where previously there was an id for newTable there is a class ---> #newTable ===> .newTable:
Just change:
$('#myTable').has('#newlyAddedTable').length
To:
$('.newlyAddedTable', $element).length //element === clicked row -- see demo
vvvvv DEMO vvvvv
$('#myTable').bootstrapTable().on('click-row.bs.table', function(e, row, $element) {
if( $('.newTable', $element).length ) {
$('.newTable', $element).remove();
} else {
$('td:first', $element)
.append( '<table class="newTable"><tr><td>NEW TABLE</td></tr></table>' );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css" rel="stylesheet"/>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>

Try replacing your remove code with this:
$(document).on("click", "#newlyAddedTable", function(){
$(this).remove();
});
The code above registers a click listener on the document. The second parameter filters those events for those with the target #newlyAddedTable. This way you don't have to register a new click handler every time you insert a row (as in #VimalanJayaGanesh's solution).
P.S. If you are adding HTML that looks like this:
<tr>
<td>
<table id="newlyAddedTable">
</table>
</td>
</tr>
Then you are probably actually wanting to remove the parent tr (not the table with the id). There are two ways to fix this.
You can change the selector that filters click events and so have the tr handle the click rather than the table element in my example code:
$(document).on("click", "tr:has(#newlyAddedTable)", function(){
You can leave the selector as is but grab the parent tr from the table and remove that changing the remove line above to:
$(this).parents("tr").first().remove()
or
$(this).parent().parent().remove()

As I don't have your complete code / fiddler, here is a possible solution.
Are you looking for something like this?
$('#add').on('click', function()
{
var newRow = '<tr CLASS="newrow"><td colspan="3"><table><tr><td>Test</td><td>User</td><td>test#example.com</td></table></td></tr>'
$('#myTableBody').append(newRow);
Remove()
});
function Remove()
{
$('.newrow').off('click').on('click', function()
{
$(this).remove();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<button type='button' id='add'>Add</button>
Note:
The following line indicates that,
$('.newrow').off('click').on('click', function()
the click event will be binded to the new row only once.
The reason for adding 'off('click') is, when you are dynamically adding rows (with common class 'newrow') to the table, the events will be binded several times. To avoid that, remove the previously binded click event and add a new one.

Last Clicked Radio button ID

I have table which consists of multiple rows and each row consists of Radio button in the first column as follows:
<table class="table table-condensed span8" id="AllocationTable">
<thead>
<tr>
<th title="Entity to Allocate" style="width: 30%">Entity</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.EntityAllocations)
{
<tr>
<td>
<input type="radio" name="radio" id="#item.ID" class="EntityRadioSelect" value="#item.ID" onclick="EntitySelect(this)" disabled="disabled" >
</td>
</tr>
}
</tbody>
</table>
Now I want to capture the Ids of the last clicked radio button
I have tried something like this
function EntitySelect(select) {
if ($(select).parent().data("lastClicked")){
alert($(select).parent().data("lastClicked"));
}
$(select).parent().data("lastClicked", select.id);
}
But I am getting the wrong value as it is giving me current value and sometime other values which is not accepted answer.

var clicked='';
var preClicked='';
$("#AllocationTable").on("click",".EntityRadioSelect",function(){
preClicked=clicked;
clicked=$(this).attr("id");
});
remove onclick="EntitySelect(this)"

try this:
function EntitySelect(select) {
var parent=$(select).parents('#AllocationTable');
if (parent.data("lastClicked")){
alert(parent.data("lastClicked"));
}
parent.data("lastClicked", select.id);
}

Add row to the beginning of a table - JavaScript - jQuery

What is the best method in jQuery to add an additional row to a table as the first row?
I have a table like this
<table id="mytable" cellpadding="0" cellspacing="0">
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
<button id="but">mybutton</button>
I want to add a row as the first row to the beginning of the table with given default values. How can I accomplish this using JavaScript and jQuery? A fiddle will be helpful.

You can use .prepend function in jQuery.
$('#mytable').prepend($('<tr>'));
http://api.jquery.com/prepend/

http://jsfiddle.net/32Ymw/
$("#but").click(function(){
row = $("<tr></tr>");
col1 = $("<td>col1</td>");
col2 = $("<td>col2</td>");
col3 = $("<td>col3</td>");
row.append(col1,col2,col3).prependTo("#mytable");
});​

Using .on('click',...); and prepend:
http://jsfiddle.net/k8hCa/
jQuery:
$('#but').on('click', function(e){
$('#mytable').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});

The accepted answer is good, but it is definitely worth noting that the tbody is the node you should append/prepend to, and using the appendTo and prependTo methods is the best solution as it will work when there are any number of rows, including zero.
See this answer for a good example: https://stackoverflow.com/a/1353736/2812428
Note also that it is good practice to specify a tbody yourself, even if there are no rows, to avoid the issue that there would be no tbody automatically in the DOM in the case that there were no rows added to the table.

The jQuery .prepend() method should work
$('#mytable').prepend($('<tr>'));

Folloing is what I am doing
Template
<script type="text/template" id="cardTemplate">
<TR class=Normal>
<TD>
{0}
</TD>
<TD>
{1}
</TD>
<TD>
{2}
</TD>
</TR>
</script>
jQuery
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
});
};
var cardTemplate = $("#cardTemplate").html();
//Note: format is a custom method added for "String"
var template = cardTemplate.format("a", "b","c");
//$('#tblScanResult tbody > tr:first').before(template);
$('#tblScanResult tbody').prepend(template);

This question is really ancient but just for the sake of completeness, if you have headers, you can easily modify Alex answer to insert at the top of the body rows but after the headers rows thusly...
<table id="mytable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</tbody>
</table>
<button id="but">mybutton</button>
$('#but').on('click', function(e){
$('#mytable > tbody').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});