We Keep Coding

2 Tables on one page - buttons on Rows to run different script

I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here's my script that runs when the Select button from the first table is clicked:
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
Not sure how to have another version of this that only runs when the Select button from the 2nd table is clicked?

Was interrupted writing the answer but you could try something like this:
const selectHelper =
($me,classToAdd,inputSelector) => {
$me.parents("table")
.eq(0)
.find("tr")
.removeClass("success warning danger");
const id =
$me.parents("tr")
.eq(0)
.addClass(classToAdd)
.attr("id")
;
$(inputSelector).val(id);
}
;
const clickActions = {
one:(e,$me)=>
selectHelper(
$me
,"warning"
,"#inputidOne"
)
,two:(e,$me)=>
selectHelper(
$me
,"success"
,"#inputidTwo"
)
};
$(document.body)
.on(
"click"
,`[data-action-click]`
,e=>{
const action = e.target.getAttribute("data-action-click");
if(typeof clickActions[action] === "function"){
clickActions[action](e,$(e.target))
}
debugger;
}
)
The button needs a data-action-click attribute that has the name of the function you want to execute when clicked:
<button
type="button"
data-action-click="two"
class="btn btn-success btn-sm"
>
Select
</button>

I believe this is what you're looking for:
$(document).ready(function() {
$("table:first").find('button[type!="submit"]').click(function() {
$("table:first").find("tr").removeClass("success warning danger");
$(this).parents("tr").addClass("success");
$("#productID").val($(this).parents("tr").attr("id"));
});
$("table").eq(1).find('button[type!="submit"]').click(function() {
$("table").eq(1).find("tr").removeClass("success warning danger");
//Do whatever color you want
$(this).parents("tr").addClass("warning");
//Wasn't provided this snippet so I just made up accessoryID
$("#accessoryID").val($(this).parents("tr").attr("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
.eq This returns a jQuery object from a list of jQuery objects by index, whereas indexing with brackets will return HTML content.
P.S. You don't really need class="" and scope="col" in the table, the HTML I provided doesn't have those. The only real point of the class attribute is to assign multiple CSS attributes easily, unless you're using classes as selectors. Same with scope, I've made many tables and never used scope.
Also, when you do a thead, you need to add a tr before you add the headers. I fixed that in the code above. (Yes, this does mean that tables support multiple header rows).

JS JQuery Bootstrap datatables resize

Hi I have a datatable that displays 10 columns but the problem is it dont fit the screen properly. I still need to scroll horizontally and vertically to see the other columns/rows. What I want to do is to make the table smaller. How can I achieve that? Refer to the screenshots here and here . I have tried setting table width = "100%" but unfortunately nothing happens.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h1 class="page-header">TMTRO Iloilo <small>Violators Records</small> </h1></center>
<div class="removeMessages"></div>
<button class="btn btn-default pull pull-right" data-toggle="modal" data-target="#addMember" id="addMemberModalBtn">
<span class="glyphicon glyphicon-plus-sign"></span> Add Member
</button>
<br /> <br /> <br />
<table class="table-striped table-bordered nowrap" width="100%" id="manageMemberTable">
<thead>
<tr>
<th>ID #</th>
<th>Name</th>
<th>Last Name</th>
<th>License Number</th>
<th>Violation</th>
<th>Arrest Place</th>
<th>Address</th>
<th>Plate Number</th>
<th>Contact Number</th>
<th>Officer Name</th>
<th>Date&Time</th>
<th>Paid</th>
<th>Option</th>
</tr>
</thead>
</table>
</div>
</div>
</div>

Per the HTML spec, a <table> and its children are auto-sized. Put simply, other rules are thrown out the window to make the table itself look good, by default.
Bootstrap does have an answer for this, with responsive tables. Just add the table-responsive class to your table element and it'll handle any scrollbars within the table rather than allowing your entire page to scroll.
<table class="table table-responsive">
...
</table>

How to pass data-key value of clicked Table row when click on Button

I have a table with some rows and each tow has an data-key value. Now I select one of those rows and want to click on a button in order to forward this data-key value as an GET value. I don't really know how to capture this selected data-key. Kindly asking for help.
Here is a fiddle: fiddle
Below is my snippet so far.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="form-horizontal" style="margin-top:5em;">
<div class="input-group">
<input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
<button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" style="margin-left:1em; font-size:12px;">Add Event</button>
</div>
<div id="Table">
<table class="table table-sm table-hover">
<thead>
<tr>
<th>ID</th>
<th>Event Name</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row" data-key="12">
<td>12</td>
<td>Test Event 12</td>
</tr>
<tr class="clickable-row" data-key="13">
<td>13</td>
<td>Test Event 13</td>
</tr>
</tbody>
</table>
</div>
</div>

You could try to implement this code.
I will add modified version of your code, but I will mark out where I modified it.
<div class="container-fluid">
<div class="form-horizontal" style="margin-top:5em;">
<div class="input-group">
<input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
<button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" onclick="addEvent();" style="margin-left:1em; font-size:12px;">Add Event</button>
</div>
<div id="Table">
<table class="table table-sm">
<thead>
<tr>
<th>ID</th>
<th>Event Name</th>
</tr>
</thead>
<tbody>
<tr onclick="test(this);"> // MODIFIED, This line would be added onto all your rows that you want clickable.
<td>12</td>
<td>Test Event 12</td>
</tr>
<tr onclick="test(this);">
<td>13</td>
<td>Test Event 13</td>
</tr>
</tbody>
</table>
</div>
</div>
Now I will show you the implementation of the function test.
function test(element){
console.log(element.innerHTML);
}
Now, you could do anything with this element callback. For example, you could store it in a variable and send that to a PHP page using AJAX, when you press a button.
Edit 1
First, I want to point out that you cannot use <button> as a link.
First, there are a few modifications to the HTML.
<button id="submitButton" class="btn btn-sm btn-secondary" onclick="addEvent();" data-id="" style="margin-left:1em; font-size:12px;">Add Event</button>
Here we added an id, "submitButton" and an onclickEvent which will call the function addEvent.
This is the function addEvent:
function addEvent(){
if(currentRow == undefined){
alert("Select a row");
return;
}
var link = "events.phtml?TableID="+currentRow.cells[0].innerHTML;
}
This link variable can easily be implemented using an AJAX call with jQuery or just plain javascript.
Sidenote
The function test has also been edited.
function test(element){
currentRow = element;
}
I recommend editing the name on the function test so that the code will look more organised.
Edit 2
If I have understood what you want out of this, this will be the new fix.
So you will have to edit the HTML again.
<div class="container-fluid">
<div class="form-horizontal" style="margin-top:5em;">
<div class="input-group">
<input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
<button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" onclick="addEvent();" style="margin-left:1em; font-size:12px;">Add Event</button>
</div>
<div id="Table">
<table class="table table-sm">
<thead>
<tr>
<th>ID</th>
<th>Event Name</th>
</tr>
</thead>
<tbody>
<tr onclick="test(this);" data-key="12"> // MODIFIED, This line would be added onto all your rows that you want clickable.
<td>12</td>
<td>Test Event 12</td>
</tr>
<tr onclick="test(this);" data-key="13">
<td>13</td>
<td>Test Event 13</td>
</tr>
</tbody>
</table>
</div>
</div>
You will need to make a slight change to the javascript as well.
function addEvent(){
if(currentRow == undefined){
alert("Select a row");
return;
}
var link = "events.phtml?TableID="+currentRow.getAttribute("data-key");
}
You still use this address for anything you like, for example an AJAX request.

materialize: make table row accordion header

I am trying to use materialize to create a table that allows for each table row to be clickable. Clicking on a row should expand an accordion under the row that holds more data for the row. I can not seem to get the accordion to open or set the whole as the header for the accordion. I have tried adding the classes straight to the tr's as well as wrapping each tr in a div. neither solution gave the right behavior. Here is the code I currently have:
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script type="text/javascript">
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
</script>
<table class="bordered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr class="collapsible" data-collapsible="accordion">
<td class="collapsible-header">Alvin</td>
<div class="collapsible-body">
<p>
hello
</p>
</div>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>

The Materialize Collapsible needs to be configured on an li element.
Try this:
<table class="bordered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">Alvin</div>
<div class="collapsible-body">
<p>
hello
</p>
</div>
</li>
</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
The layout is not so good, but works as you expect.
If you are using Materialize just for the collapsible, I suggest you use another component, like Bootstrap Collapse

How would I implement Next/Previous Buttons to cycle through tabular data in HTML

I'm creating a nutritional data table, and I want to cycle through displaying calories, protein, total fat etc. by pressing the next button or previous to change what value the table displays.
My current table is: http://jsfiddle.net/Zku6N/
<table id='mealSection' border="1" rules="rows">
<caption id="mealCaption"><b>Your Meal</b></caption>
<!--nested table-->
<tr><td align="center"><table>
<tr><td><input type="button" id="prevValue" value="<"/></td><td style="width:100px" align="center"><b>Calories</b></td><td><input type="button" id="nextValue" value=">"/></td></tr>
</table></td><tr>
<!--nested table-->
<tr><td><table id='info' border="1" rules="rows">
<tr><td><b>Item Name:</b></td><td><b>Value:</b></td></tr>
<tr><td id="itemName" style="width:160px"></td><td id="itemInfo" style="width:60px"></td></tr>
</table></td></tr>
</table>
The table is hardcoded to display calories. How can I cycle through calories, protein, and total fat with the next button, and changing the value of "id=itemInfo" at the same time?

I would put the whole lot in one table, hiding the appropriate columns with CSS. Something along the lines of:
<table id="mealPlanner">
<caption id="mealCaption"><b>Your Meal</b>
</caption>
<thead>
<tr>
<th colspan="2" class="calories">
<input type="button" class="prev" value="<" />Calories
<input type="button" class="next" value=">" />
</th>
<th colspan="2" class="protien">
<input type="button" class="prev" value="<" />Protien
<input type="button" class="next" value=">" />
</th>
<th colspan="2" class="fat">
<input type="button" class="prev" value="<" />Total Fat
<input type="button" class="next" value=">" />
</th>
</tr>
<tr>
<th class="calories">Item Name</th>
<th class="calories">Item Value</th>
<th class="protien">Item Name</th>
<th class="protien">Item Value</th>
<th class="fat">Item Name</th>
<th class="fat">Item Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="calories">Name</td>
<td class="calories">Value</td>
<td class="protien">Name</td>
<td class="protien">Value</td>
<td class="fat">Name</td>
<td class="fat">Value</td>
</tr>
</tbody>
</table>
With the following CSS:
.protien, .fat {
display:none;
}
Then wire up the following javascript/jquery:
/*Calories*/
$("th.calories .next").click(function () {
$(".calories").hide();
$(".protien").show();
});
$("th.calories .prev").click(function () {
$(".calories").hide();
$(".fat").show();
});
/*Protein*/
$("th.protien .next").click(function () {
$(".protien").hide();
$(".fat").show();
});
$("th.protien .prev").click(function () {
$(".protien").hide();
$(".calories").show();
});
/*Fat*/
$("th.fat .next").click(function () {
$(".fat").hide();
$(".calories").show();
});
$("th.fat .prev").click(function () {
$(".fat").hide();
$(".protien").show();
});
There would be more elegant ways of doing this with fewer lines and being more DRY but this is fairly simple and self explanatory and you should be aable to adapt it should you wish to use nested tables.
See it action here: http://jsfiddle.net/6ZPmm/1/