So I have a table, where upon clicking a button, the java script will fill in the cells with a 'value'.
Currently however, my buttons are also disappearing at the end of each row in my table upon clicking the button. I tried placing them outside of my table(outside of the td), but when I click my button, they disappear again.
Does any one have any idea on what I can do to make them stay?
You replacing the whole html for your table,.
With jQuery you can just replace the existing cells..
Example below.. ->
$(document).ready(function (e) {
var data1 = [ //needs to be changed to something that generates a random #
{ field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4', field5: 'value a5' },
{ field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4', field5: 'value b5' },
{ field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4', field5: 'value c5' }
];
function loadTable(tableId, fields, data) {
//$('#' + tableId).empty(); //not really necessary
$.each(data, function(index, item) {
var $row = $('#data-table tbody tr:nth-child(' + (index+1) + ')');
$.each(fields, function(index, field) {
var $col = $row.find('td:nth-child(' + (index+1) + ')');
$col.text(item[fields[index]]);
});
});
}
$('#btn-update').click(function (e) {
loadTable('data-table', ['field1', 'field2', 'field3', 'field4',], data1);
});
});
<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"/>
<table id="data-table" class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th>Video </th>
<th>Size </th>
<th>Compressed Size</th>
<th>Savings</th>
<th type="button" class="button btn btn-success">Compress All </th>
<th type="button" class="button btn btn-danger">Delete All</th>
<th type="button" class="button btn btn-primary">Download All</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1">Video 1 File Name</td>
<td id="2">Original File Size</td>
<td id="3">Estimated File Size after compression</td>
<td id="4">Amount Saved</td>
<td>
<button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-compressed"></span></button>
<button id="delete" type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button>
<button id="download" type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-download-alt"></span></button>
</td>
</tr>
<tr>
<td>Video 2 File Name</td>
<td>Original File Size</td>
<td>Estimated File Size after compression</td>
<td>Amount Saved</td>
<td>
<button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-compressed"></span></button>
<button id="delete" type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button>
<button id="download" type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-download-alt"> </span></button>
</td>
</tr>
<tr>
<td>Video 3 File Name</td>
<td>Original File Size</td>
<td>Estimated File Size after compression</td>
<td>Amount Saved </td>
<td>
<button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-compressed"></span></button>
<button id="delete" type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button>
<button id="download" type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-download-alt"> </span></button>
</td>
</tr>
</tbody>
</table>
<button id="btn-update">Randomize</button>
there were some issues with the markup there were multiple elements with the same ID
<th type="button" class="button btn btn-success">Compress All</th> is invalid html
$(document).ready(function(e) {
var data1 = [ //needs to be changed to something that generates a random #
{
field1: 'value a1',
field2: 'value a2',
field3: 'value a3',
field4: 'value a4',
field5: 'value a5'
}, {
field1: 'value b1',
field2: 'value b2',
field3: 'value b3',
field4: 'value b4',
field5: 'value b5'
}, {
field1: 'value c1',
field2: 'value c2',
field3: 'value c3',
field4: 'value c4',
field5: 'value c5'
}
];
function loadTable(tableId, fields, data) {
//$('#' + tableId).empty(); //not really necessary
var rows = '';
$.each(data, function(index, item) {
var row = '<tr>';
$.each(fields, function(index, field) {
row += '<td>' + item[field + ''] + '</td>';
});
row+= '<td> <button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-compressed"></span> </button> </td> <td> <button id="" type="submit" class="btn btn-default btn-sm delete"><span class="glyphicon glyphicon-trash"></span> </button> </td> <td> <button id="" type="submit" class="btn btn-default btn-sm download"><span class="glyphicon glyphicon-download-alt"></span> </button> </td>';
rows += row + '<tr>';
});
$('#' + tableId + ' tbody').html(rows);
}
$('#btn-update').click(function(e) {
loadTable('data-table', ['field1', 'field2', 'field3', 'field4', ], data1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="data-table" class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th>Video</th>
<th>Size</th>
<th>Compressed Size</th>
<th>Savings</th>
<th>
<button type="button" class="button btn btn-success">Compress All</button>
</th>
<th>
<button type="button" class="button btn btn-danger">Delete All</button>
</th>
<th>
<button type="button" class="button btn btn-primary">Download All</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1">Video 1 File Name</td>
<td id="2">Original File Size</td>
<td id="3">Estimated File Size after compression</td>
<td id="4">Amount Saved</td>
<td>
<button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-compressed"></span>
</button>
</td>
<td>
<button id="" type="submit" class="btn btn-default btn-sm delete"><span class="glyphicon glyphicon-trash"></span>
</button>
</td>
<td>
<button id="" type="submit" class="btn btn-default btn-sm download"><span class="glyphicon glyphicon-download-alt"></span>
</button>
</td>
</tr>
<tr>
<td>Video 2 File Name</td>
<td>Original File Size</td>
<td>Estimated File Size after compression</td>
<td>Amount Saved</td>
<td>
<button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-compressed"></span>
</button>
</td>
<td>
<button id= "" type="submit" class="btn btn-default btn-sm delete"><span class="glyphicon glyphicon-trash"></span>
</button>
</td>
<td>
<button id="" type="submit" class="btn btn-default btn-sm download"><span class="glyphicon glyphicon-download-alt"> </span>
</button>
</td>
</tr>
<tr>
<td>Video 3 File Name</td>
<td>Original File Size</td>
<td>Estimated File Size after compression</td>
<td>Amount Saved</td>
<td>
<button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-compressed"></span>
</button>
</td>
<td>
<button id="" type="submit" class="btn btn-default btn-sm delete"><span class="glyphicon glyphicon-trash"></span>
</button>
</td>
<td>
<button id="" type="submit" class="btn btn-default btn-sm download"><span class="glyphicon glyphicon-download-alt"> </span>
</button>
</td>
</tr>
</tbody>
</table>
<button id="btn-update">Randomize</button>
</body>
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 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>
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);