I am looking for a way to insert an element directly below a row. My table should look like the following:
As you can see the following element is inserted below my row:
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
Below you can find my viable example:
$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement
plusButtonParent.insertAdjacentHTML('beforebegin', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 1</td>
<td>
<button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
Add Product1
</button>
</td>
</tr>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
<button type="button" class="btn btn-dark btn-sm product3">+</button>
</td>
</tr>
</tbody>
</table>
As you can see the element is inserted on the side and not at the bottom.
Any suggestions how to insert the element below the row?
I appreciate your replies!
It is an issue with your Javascript. You were close!
This is the problematic line:
let plusButtonParent = plusButton[0].parentElement;
You are accessing the <td> element. So inserting a <tr> before the <td> starts would result in something like this:
<tr>
<tr> <!-- this code is added -->
<td>...</td> <!-- this code is added -->
</tr> <!-- this code is added -->
<td>...</td>
</tr>
That's clearly not what you want. So target the parent <tr> instead, and problem solved.
let plusButtonParent = plusButton[0].parentElement.parentElement;
And you will probably want to keep the Product 2 at the top like in your example. Easy, just change beforebegin to afterend.
$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement.parentElement;
plusButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 1</td>
<td>
<button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
Add Product1
</button>
</td>
</tr>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
<button type="button" class="btn btn-dark btn-sm product3">+</button>
</td>
</tr>
</tbody>
</table>
Related
Here I want to display the show and hide function at the end of the of the table column, where it's showing at the top of the column now. It is using the first column of the table as the parent and displaying the show and hide at the first of the column.
Here the fiddle
<div class="col-lg-12" style="width: 100%"
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-condensed"
style="border-collapse:collapse;">
<tr>
<th></th>
<th>Driver</th>
<th>First Name</th>
<th>Cell Phone</th>
<th>Acct To</th>
<th>Container#</th>
<th>Ord Typ</th>
<th>Start Date</th>
<th>Start Time</th>
<th>Sched From</th>
<th>Sched To</th>
<th>Order Status</th>
</tr>
<tr data-toggle="collapse"
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse"
id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button"
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4"/>
</div></thead></table>
</div>
</td></tr>
<tr data-toggle="collapse"
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse"
id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button"
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4"/>
</div></thead></table>
</div>
</td></tr>
<tr data-toggle="collapse"
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse"
id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button"
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4"/>
</div></thead></table>
</div>
</td></tr>
Here's the code. Thanks in advance.
Working fiddle.
You've just to move the column to the end of the row like :
<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.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="col-lg-12" style="width: 100%" <div class="panel panel-default">
<div class="panel-body">
<table class="table table-condensed" style="border-collapse:collapse;">
<tr>
<th></th>
<th>Driver</th>
<th>First Name</th>
<th>Cell Phone</th>
<th>Acct To</th>
<th>Container#</th>
<th>Ord Typ</th>
<th>Start Date</th>
<th>Start Time</th>
<th>Sched From</th>
<th>Sched To</th>
<th>Order Status</th>
</tr>
<tr data-toggle="collapse" data-target="#DADRVC" class="accordion-toggle">
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
<td><button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4" />
</div>
</thead>
</table>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#DADRVC1" class="accordion-toggle">
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
<td><button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" id="DADRVC1">
<table class="table table-striped">
<thead>
<div class="">
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4" />
</div>
</thead>
</table>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#DADRVC2" class="accordion-toggle">
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
<td><button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" id="DADRVC2">
<table class="table table-striped">
<thead>
<div class="">
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4" />
</div>
</thead>
</table>
</div>
</td>
</tr>
It's why you're putting everything inside thead tag, you need to put your show/hide function in the table's footer, using the tag tfoot. Like this:
<table>
<thead>
<tr>
<th>MyColumnHeader</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyContent</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button>show</button></td>
</tr>
</tfoot>
</table>
I have created with JQuery a table where I can add a certain text by pressing a button.
As you can see Product 2 and Product 3 can only be added once. Product 4 can be added several times. All text that is inserted can also be deleted by pressing the x-button.
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))
function deleteRow(e) {
let deleteBtn = $(e.target).closest(".deleteMe");
deleteBtn.closest('tr').remove()
}
function ourClickDispatcher(e) {
let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
let targetButtonParent = targetButton[0].parentElement.parentElement
targetButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
<td class="deleteMe">
<button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
</td>
</tr>
`)
if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
targetButton.attr("disabled", true);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product 2
</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product 4
</td>
</tr>
</tbody>
</table>
My problem is that if I delete all rows below a disabled button I cannot add any new rows again. This case is shown in the picture below:
Any suggestions how to enable the button if all rows below have been deleted?
I appreciate your replies!
I added you one new function to your javascript
function enableButton(elemId) {
console.log(document.getElementById(elemId));
if (!document.getElementById(elemId)) {
var str = elemId.split('_');
var button = $('#'+str[1]);
$('#'+str[1]).removeAttr('disabled');
}
}
and i also set ids on your html buttons
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))
function deleteRow(e) {
let deleteBtn = $(e.target).closest(".deleteMe");
let itemId = e.target.getAttribute('id');
deleteBtn.closest('tr').remove();
enableButton(itemId);
}
function enableButton(elemId) {
if (!document.getElementById(elemId)) {
var str = elemId.split('_');
var button = $('#'+str[1]);
$('#'+str[1]).removeAttr('disabled');
}
}
function ourClickDispatcher(e) {
let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm");
let targetButtonParent = targetButton[0].parentElement.parentElement;
var elemId = 'item_'+e.target.getAttribute('id');
targetButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
<td class="deleteMe">
<button id='`+elemId+`' type="button" class="btn btn-danger btn-sm deleteMe">x</button>
</td>
</tr>
`)
if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
targetButton.attr("disabled", true);
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" id='btn2' data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product 2
</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" id='btn3' data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" id='btn4' data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product 4
</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Just add $(".btn.btn-primary.btn-sm").attr("disabled", false); at the end of deleteRow method.
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))
function deleteRow(e) {
let deleteBtn = $(e.target).closest(".deleteMe");
deleteBtn.closest('tr').remove();
$(".btn.btn-primary.btn-sm").attr("disabled", false);
}
function ourClickDispatcher(e) {
let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
let targetButtonParent = targetButton[0].parentElement.parentElement
targetButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
<td class="deleteMe">
<button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
</td>
</tr>
`)
if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
targetButton.attr("disabled", true);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product 2
</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product 4
</td>
</tr>
</tbody>
</table>
I am trying to create a repeater field within my table.
Basically I want the following behavior:
If no "Test Product2" has been added to the table, the user cannot add another field below.
If a "Test Product2" has been added to the table, the user is allowed to add a field below and can add another "Test Product2" next to the new blue button.
The below an example of the second case for the behaviour.
$(".btn.btn-dark.btn-sm.product2").on("click", this.clickDispatcherTable.bind(this))
//$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this));
$("#miningTable").on("click", ".btn.btn-primary.btn-sm.product2", this.ourClickDispatcher.bind(this));
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement.parentElement;
plusButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
function ourClickDispatcher(e) {
let targetButton = $(".btn.btn-primary.btn-sm.product2")
let targetButtonParent = targetButton[0].parentElement
targetButtonParent.insertAdjacentHTML('beforebegin', `
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
`)
targetButton.attr('class', 'btn btn-danger btn-sm product2'); // change button class to red
targetButton.text(function() {
return $(this).text().replace("Add", "Edit");
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="miningTable" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product4
</td>
</tr>
</tbody>
</table>
As you can see in the above example a user can add multiple fields as he want. There is currently no restriction.
Any suggestions how to restrict the user for adding a field if a condition is not satisfied?
I appreciate your reply!
If I correctly understand your problem, think this is your answer
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
let sw = true;
$( "tbody tr" ).each(function(index, row) {
if(row.children.length != 3) {
sw = false;
}
});
if (sw) {
$('tbody tr:last').after(`
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>`)
}
}
Can any body please help what's the problem in this code?
Uncaught TypeError: Cannot read property 'value' of null
I have this code in my PartialView
<table class="table">
<tr>
<th>
Products
</th>
<th>
Quantity
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Product)
</td>
<td>
#Html.DisplayFor(modelItem => item.Quantity)
</td>
<td>
<input type='text' name='qty#(item.Product)' id='qty#(item.ProductId)'/>
<Button class="btn btn-success btn-xs glyphicon glyphicon-plus" name="add" onclick='javascript: document.getElementById("qty").value++;' value='+' />
<Button class="btn btn-warning btn-xs glyphicon glyphicon-minus" name="subtract" onclick='javascript: subtractQty(qty#(item.ProductId));' value='-' />
<button type="button" class="btn btn-primary" onclick="update();">Ok</button>
</td>
</tr>
}
</table>
And JavaScript in my Index.cshtml:
function subtractQty(name) {
if (document.getElementById(name).value - 1 < 0)
return;
else
document.getElementById(name).value--;
}
I'am trying to put textbox in my #foreach PartialView page
Thank you in advance guys!
The onClick event for your add button is:
onclick='javascript: document.getElementById("qty").value++;
The "qty" should be "qty#(item.ProductId)" so that it uses the values in your loop.
The onClick event for your subtract button is:
onclick='javascript: subtractQty(qty#(item.ProductId));'
The argument to subtractQty should be enclosed in quotes.
Here's a working example without the templating variables
<script type="text/javascript">
function subtractQty(name) {
if (document.getElementById(name).value - 1 < 0)
return;
else
document.getElementById(name).value--;
}
</script>
<table class="table">
<tr>
<th>
Products
</th>
<th>
Quantity
</th>
<th></th>
</tr>
<tr><td>
<input type='text' name='qty' id='qty' value="0"/>
<Button class="btn btn-success btn-xs glyphicon glyphicon-plus" name="add" onclick='javascript: document.getElementById("qty").value++;' value='+' />
<Button class="btn btn-warning btn-xs glyphicon glyphicon-minus" name="subtract" onclick='javascript: subtractQty("qty");' value='-' />
<button type="button" class="btn btn-primary" onclick="update();">Ok</button>
</td>
</tr>
</table>
This is my code at the moment it does not contain any javascript at the moment just HTML as im unsure how to go about doing this. The code below contains a keypad from 1 - 9 and 3 other buttons. For example if i press 1 Ix want it to input 1 into the field above the pinpad
Visual Representation
Here is the HTML:
<div class="container text-center">
<h2>Pinpad</h2>
<hr>
<table style="display: inline">
<tr>
<td colspan="4">
This is the Input field
<input type="password" readonly="yes" class="form-control" placeholder="PIN Number" style="text-align: center;">
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg">1</button>
</td>
<td>
<button class="btn btn-default btn-lg">2</button>
</td>
<td>
<button class="btn btn-default btn-lg">3</button>
</td>
<td>
<button class="btn btn-danger btn-block btn-lg"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg">4</button>
</td>
<td>
<button class="btn btn-default btn-lg">5</button>
</td>
<td>
<button class="btn btn-default btn-lg">6</button>
</td>
<td>
<button class="btn btn-warning btn-block btn-lg"><i class="fa fa-arrow-left"></i></button>
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg">7</button>
</td>
<td>
<button class="btn btn-default btn-lg">8</button>
</td>
<td>
<button class="btn btn-default btn-lg">9</button>
</td>
<td>
<button class="btn btn-success btn-lg"><i class="fa fa-check"></i></button>
</td>
</tr>
<tr>
<td colspan="4">
<button class="btn btn-default btn-block btn-lg">0</button>
</td>
</tr>
</table>
http://jsfiddle.net/feather0148/17dhf4ae/
First, give every button an ID, then use this jQuery:
$(document).ready(function(){
$("#buttonId").click(function(){
$("input:text").val("buttonNumber");
});
});
hope this helps!
these can help too: Examplew3schoolsanother
Maybe You are trying to do something like this, so I have it a little bit elaborated for you:
HTML:
<div class="container text-center">
<h2>Pinpad</h2>
<hr>
<table style="display: inline">
<tr>
<td colspan="4">
<input id="input" type="text" readonly="yes" class="form-control" placeholder="PIN Number" style="text-align: center;">
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg key">1</button>
</td>
<td>
<button class="btn btn-default btn-lg key">2</button>
</td>
<td>
<button class="btn btn-default btn-lg key">3</button>
</td>
<td>
<button class="btn btn-danger btn-block btn-lg clear"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg key">4</button>
</td>
<td>
<button class="btn btn-default btn-lg key">5</button>
</td>
<td>
<button class="btn btn-default btn-lg key">6</button>
</td>
<td>
<button class="btn btn-warning btn-block btn-lg cancel"><i class="fa fa-arrow-left"></i></button>
</td>
</tr>
<tr>
<td>
<button class="btn btn-default btn-lg key">7</button>
</td>
<td>
<button class="btn btn-default btn-lg key">8</button>
</td>
<td>
<button class="btn btn-default btn-lg key">9</button>
</td>
<td>
<button class="btn btn-success btn-lg clear check"><i class="fa fa-check"></i></button>
</td>
</tr>
<tr>
<td colspan="4">
<button class="btn btn-default btn-block btn-lg key">0</button>
</td>
</tr>
</table>
</div>
<div class="container text-center error"></div>
Js:
$(document).ready(function(){
//restrict the input
var maxPin = 4;
//add the chosen number
$('.key').click(function(){
$('.error').html('')
if($('#input').val().length < maxPin){
if ($('#input').val() == '') {
$('#input').val($(this).html());
}else{
$('#input').val($('#input').val() + $(this).html())
}
}
});
//clear the iput field
$('.clear').click(function(){
$('.error').html('')
$('#input').val('')
})
//remove the last inserted number
$('.cancel').click(function(){
$('.error').html('')
$(input).val(
function(index,value){
return value.substr(0,value.length-1);
})
})
//check
$('.check').click(function(){
alert('Do something with this')
})
})
You can see the demo here:
https://jsfiddle.net/0he9jouw/
A solution would be to assign the text field as well as the buttons unique id's ('field', 'b1', 'b2', 'b3', ...)
Then you could structure your JavaScript like this:
function writeInField (e) {
document.getElementById('field').value = document.getElementById('field').value+''+e.target.innerHTML;
}
document.getElementById('b1').addEventListener('click', writeInField, false);
document.getElementById('b2').addEventListener('click', writeInField, false);
document.getElementById('b3').addEventListener('click', writeInField, false);