How can I dynamically copy values from table to input field using JS ? I wanna make something like this - If I click on table row it should be added into input field, if I click on another row it should be added after "," in same input field. Something like this (http://prog.linkstraffic.net/jquery/table_row_event_fill_table.html) but it should work from table -> input field. I'm still JS newbie :(
I'm getting data from MySQL table:
<input id="cel" placeholder="Phone number" type="text" name="number"></input>
<table name="users" class="ui compact celled definition table">
<?php
$result = $pdo->query("SELECT * FROM users");
echo
'<table id="sourcetable">
<thead class="full-width">
<tr id="sour">
<th>Login</th>
<th>Phone</th>
</tr>
</thead>';
foreach ($result as $row)
{ ?>
<tr id="sour">
</div>
<td id="td" style="cursor:pointer"><?php echo $row['login']?></td>
<td style="cursor:pointer"><?php echo $row['phone']?></td></tr>
</div>
<?php
}
$result->closeCursor();
echo '</table>';
?>
</table>
Changed the source table:
var addedrows = new Array();
$(document).ready(function() {
$( "#tbId tbody tr" ).on( "click", function( event ) {
var ok = 0;
var id = $( this ).attr('id').replace("tr","");
var newaddedrows = new Array();
for (index = 0; index < addedrows.length; ++index) {
// if already selected then remove
if (addedrows[index] == id) {
newaddedrows.splice(addedrows.indexOf(index), 0);
ok = 1;
} else {
newaddedrows.push(addedrows[index]);
}
}
addedrows = newaddedrows;
if (!ok) {
addedrows.push(id);
}
$('#inptTxt').val(addedrows.toString());
console.log(addedrows.toString());
});
});
table{
border: 1px solid black;
}
td{
background-color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbId">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Url</th>
<th>Country</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr id="tr0">
<td>1</td>
<td>Name 1</td>
<td>url 1</td>
<td>Country 1</td>
<td>Item 1</td>
</tr>
<tr id="tr1">
<td>2</td>
<td>Name 2</td>
<td>url 2</td>
<td>Country 2</td>
<td>Item 2</td>
</tr>
<tr id="tr2">
<td>3</td>
<td>Name 3</td>
<td>url 3</td>
<td>Country 3</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="inptTxt">
Related
I have code like this
<table id='data-table'>
<thead>
<tr>
<th>No</th>
<th>Name Items</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<php foreach($data as $d) : ?>
<tr>
<td><?= $no++ ?></td>
<td><?= $d['name'] ?></td>
<td><?= $d['qty'] ?></td>
<td><?= $d['price'] ?></td>
<td><button type='button' class='btn' name='up'>up</button></td>
<td><input type='checkbox'></td>
</tr>
<php endforeach ?>
</tbody>
</table>
I want when click button, that qty update data and checkbox if that check then uncheck, I'm use jquery like this but i don't know how can i uncheckbox when button click.
Thank you in advance
$('#data-table tbody').on('click', '.btn[name="up"]', function() {
const row = $(this).closest('tr')[0];
const qty = Number(row.cells[2].innerHTML);
const tqty = qty + 1;
row.cells[2].innerHTML = tqty;
});
You should use jQuery all the way or not at all
Also you are missing <tr></tr>
$('#data-table tbody').on('click', '.btn[name="up"]', function() {
const $row = $(this).closest('tr');
const $cells = $row.find("td");
const $qtyCell = $cells.eq(2);
const qty = +$qtyCell.text()
$qtyCell.text(qty + 1);
$cells.eq(5).find("[type=checkbox]").prop("checked",false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id='data-table'>
<thead>
<tr>
<th>No</th>
<th>Name Items</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name 1</td>
<td>5</td>
<td>2.00</td>
<td><button type='button' class='btn' name='up'>up</button></td>
<td><input type='checkbox'></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>8</td>
<td>4.00</td>
<td><button type='button' class='btn' name='up'>up</button></td>
<td><input type='checkbox'></td>
</tr>
</tbody>
</table>
I try to change the index 0 by 1 at the start position in order to refresh the position in my td attribute; How can I change this?
$(document).ready(function() {
$('#sortable').sortable({
update: function(event, ui) {
var data = $(this).sortable("toArray", ui.item.attr("id"));
$(this).children().each(function(index) {
$(this).find('td.ordre').html(index + 1);
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table id="players" name="players" class="table table-striped">
<thead>
<tr>
<td>N°</td>
<td>Nom</td>
<td>Prénom</td>
<td>N° licence</td>
</tr>
</thead>
<tbody id="sortable">
<tr id="1" data-position="1">
<td class="ordre">1</td>
<td>Name 1</td>
<td>Surname 1</td>
</tr>
<tr id="2" data-position="2">
<td class="ordre">2</td>
<td>Name 2</td>
<td>Surname 2</td>
</tr>
<tr id="3" data-position="3">
<td class="ordre">3</td>
<td>Name 3</td>
<td>Surname 3</td>
</tr>
</tbody>
</table>
I saw this question. In my particular case, I have Machines in different Rooms. So let's say my table contains columns: room, machine, etc. One room may contain many machines.
I need to change the row color when the room_name changes.
I tried this but it did not work.
var tbl = document.getElementById("tblMain");
if (tbl != null) {
if (tbl.rows[0] != null) {
var room = document.getElementById("tblMain").rows[1].cells[0].innerHTML;
tbl.rows[0].style.backgroundColor = "#f1fafa";
}
for (var i = 1; i < tbl.rows.length; i++) {
if (room == document.getElementById("tblMain").rows[i].cells[0].innerHTML;)
tbl.rows[i].style.backgroundColor = "#f1fafa";
}
room = document.getElementById("tblMain").rows[i].cells[0].innerHTML;
}
<table class="hoverTable dataTable" id="tblMain">
<thead>
<tr>
<th>Room</th>
<th>Machine</th>
<th>Serial Number</th>
</tr>
</thead>
<tbody>
<?php foreach ($assignations as $assignation): ?>
<tr>
<td>
<?= $assignation->has('room') ? $assignation->room->name : '-' ?>
</td>
<td>
<?= $assignation->has('machine') ? $assignation->machine->name : '' ?>
</td>
<td>
<?= $assignation->has('machine') ? $assignation->machine->serial_number : '' ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Here is an example of the output I need:
<table border="1" cellpadding="4" cellspacing="4">
<tr>
<td>room 1</td>
<td>machine 1</td>
</tr>
<tr bgcolor="#FF0000">
<td>room 2</td>
<td>machine 2</td>
</tr>
<tr bgcolor="#FF0000">
<td>room 2</td>
<td>machine 3</td>
</tr>
<tr>
<td>room 4</td>
<td>machine 4</td>
</tr>
<tr bgcolor="#FF0000">
<td>room 7</td>
<td>machine 5</td>
</tr>
</table>
In my application I am in need to set different background color to table row based on similar td value which is dynamic data. I tried to achieve this but I was unable to group the table row with different background color. I have attached the expected result screen-cap along with the fiddle link.
fiddle
HTML CODE
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>73023-04041</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</table>
JS CODE
$("table tr td:nth-child(2)").each(function () {
var tdVal = $(this).children().find("span").text();
var valueColor = $(this).children().find("span").text();
if (valueColor == tdVal) {
//alert("if");
$(this).parent("tr").addClass("trColor");
}
});
Expected Result
You could use a filter in an each loop:
var $lastChildren = $("tbody td:last-child"); // get all last children
var colourCounter = 1;
$lastChildren.each(function() { // loop
var $child = $(this); // get the current child
if (!$child.hasClass('coloured')) { // check if it has already been coloured
var testNumber = $child.text(); // if not get the text
var $filtered = $lastChildren.filter(function() {
return $(this).text() === testNumber; // filter any other children with same text
})
if ($filtered.length) {
$filtered.addClass('coloured') // add class to say it is colored (and not include in further tests)
.parent().addClass('trColor' + colourCounter); // add colour class to row
colourCounter++;
}
}
});
/* not sure how you were going to do this colouring - I've used an incremental counter */
.trColor1 {
background-color:green;
}
.trColor2 {
background-color:lightblue;
}
.trColor3 {
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name 1</td>
<td>73023-04041</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</tbody>
</table>
Here is my jsfiddle with working code. You need to give multiple classes in css and assign different colors.
https://jsfiddle.net/SmitRaval/t5ft82z2/58/
HTML
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td><span>73023-04041</span></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</table>
CSS
table td {
border:1px solid #000;
}
.trColor0 {
background-color:pink;
}
.trColor1 {
background-color:red;
}
.trColor2 {
background-color:blue;
}
.trColor3 {
background-color:green;
}
.trColor4 {
background-color:yellow;
}
JS
$(document).ready(function(){
var i = 0;
$("table tr td:nth-child(3)").each(function () {
var tdVal = $(this).text();
$("table tr td span").each(function(){
if(tdVal == $(this).text()){
$(this).closest("tr").addClass("trColor"+i);
}
});
i++;
});
});
You can have a look at following a piece of code as well.
Basically, I am creating an object with desired keys with respective Colors associated with them.
var colorMap = {};
$("table tr td:nth-child(3)").each(function () {
var tdVal = $(this).find("span").text();
//alert(tdVal);
if(checkItemExist(tdVal,colorMap) == false)
colorMap[tdVal] = 'trColor'+ (Object.keys(colorMap).length+1)+'';
//alert(JSON.stringify(colorMap));
$(this).parent("tr").addClass(colorMap[tdVal]);
});
function checkItemExist(item,array){
for (var k in array){
if (k == item){
return true;
}
}
return false;
//colorMap.indexOf(tdVal) == -1
}
table td{
border:1px solid #000;
}
.trColor1{
background-color:pink;
}
.trColor2{
background-color:red;
}
.trColor3{
background-color:green;
}
.trColor4{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td><span>73023-04041</span></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</table>
I have a problem, I need to show / hide a colspan of each column when a link is clicked.
That is to say, I have many records, and when you click on any specific, need to show this information on a colspan, when another record is clicked hide the record previously clicked.
My HTML code:
<table class="table table-condensed table-bordered table-hover text-center">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Date</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $row): ?>
<tr>
<td>1</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td colspan="5">Details of selected product</td>
</tr>
<?php endforeach; ?>
<tbody>
</table>
I had this code, but always brought me the first record:
$('.show').click(function(){
$(this).parent().parent().next().toggle('slow');
var id = $(this).attr('id');
$('td #colspanid').append(id); //show id
return false;
});
If you want specific row to toggle then you can use eq
jQuery(document).ready(function($){
$('.show').on('click', function(e){
e.preventDefault();
// Put row index in eq
$('.table tr').eq(2).toggle();
})
})
Or if you want to toggle next tr then check this jsfiddle that i've created.
Hope it helps you.
Modify the click function like this.
$('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous');
var id = element1.attr('id');
$('td#colspn').text('Details of selected product is :' +id); //show id
return false;
});
and add css:
.hide{
display:none;
}
Play the below html for reference.
$('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous');
var id = element1.attr('id');
$('td#colspn').text('Details of selected product is :' +id); //show id
return false;
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table class="table table-condensed table-bordered table-hover text-center">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Date</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>3</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>4</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td id="colspn" colspan="5">Details of selected product</td>
</tr>
<tbody>
</table>
First, identify the details rows by giving them a class.
<tbody>
<?php foreach ($products as $row): ?>
<tr>
<td><?php echo $row[0] ?></td>
<td><?php echo $row[1] ?></td>
<td><?php echo $row[2] ?></td>
<td><?php echo $row[3] ?></td>
<td>Show details</td>
</tr>
<tr class="details"> <!-- <<<<< class="details" -->
<td colspan="5">Details of selected product</td>
</tr>
<?php endforeach; ?>
<tbody>
Then, the jQuery will be as follows :
$(function() {
$("tr.details").hide().closest("tbody").find("a.show").on('click', function(e) {
e.preventDefault();//prevent hyperlink action
$("tr.details").slideUp('fast');//hide any previously opened details
$(this).closest("tr").next("tr.details").slideDown('fast');//show details for the clicked row
});
});