I am learning JavaScript, and I want pass row from table to other table like this:
Pass rows from table to other table without repeat the same row..
How do i?
I have this:
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
$("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
$(".btn_remove").click(function() {
$(this).parent().parent().remove();
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You basically need to create a pseudo-class to identify the rows by their product id. In my example, I just named it e.g. "copy_1". You can then check if the ID already exists in the 2nd table. I also added, that the input field will be increased to add one product. If you don't want this, just remove the else-statement.
Side note: With the "on"-method, you can declare a global listener, which also applies on dynamically generated elements. You can use it for the remove button as well and don't need to redeclare it everytime, when someone adds a product. I change this in my code as well. See this post for more information about it: Jquery adding event listeners to dynamically added elements
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
// check if the row already exists in the 2nd table
// if no, add the line to the 2nd table
// if yes, add one product to the input field
if($("#second_table .copy_"+column1).length == 0)
{
$("#second_table").append("<tr class='copy_"+column1+"'><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number' value='1'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
}
else
{
var value = parseInt($("#second_table .copy_"+column1+" input").val()) + 1;
$("#second_table .copy_"+column1+" input").val(value);
}
});
$("body").on("click",".btn_remove", function() {
$(this).parent().parent().remove();
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
It looks like you are just missing an event handler for the input event in the second table. You'l want to use event delegation since the content is added dynamically.
The following code should do the trick:
$("#second_table").on("input", "input", function() {
var input = $(this);
var columns = input.closest("tr").children();
var price = columns.eq(3).text();
var calculated = input.val() * price;
columns.eq(5).text(calculated);
});
There's a running snippet below. You'll see the price calculate in real-time as you change the inputs in the second table.
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
$("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
$(".btn_remove").click(function() {
$(this).parent().parent().remove();
});
});
$("#second_table").on("input", "input", function() {
var input = $(this);
var columns = input.closest("tr").children();
var price = columns.eq(3).text();
var calculated = input.val() * price;
columns.eq(5).text(calculated);
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Related
I have a table in HTML, which has 616 rows. However, I would like to add an extra column, and each of the rows for that column would contain the same element. Is there a way with JS to do that? What I would like to add on each row for that column is this symbol
Which is just an add button that goes in every element.
Here is my code:
<div class="scrollingTable">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td align="right">125</td>
<td align="right">80</td>
<td align="right">9.5</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td align="right">0</td>
<td align="right">50</td>
<td align="right">3.0</td>
<td>W</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td align="right">15</td>
<td align="right">200</td>
<td align="right">12.5</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td align="right">70</td>
<td align="right">70</td>
<td align="right">8.3</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td align="right">15</td>
<td align="right">170</td>
<td align="right">10.1</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td align="right">4</td>
<td align="right">200</td>
<td align="right">103.6</td>
<td>ES</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td align="right">0</td>
<td align="right">230</td>
<td align="right">119.2</td>
<td>ES</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
I created the jsfiddle for your problem.
var trs = document.querySelectorAll("#myTable tbody tr");
for (var tr of trs) {
let td = document.createElement("td");
let btn = document.createElement("button");
btn.innerHTML = "+";
btn.type = "submit";
td.appendChild(btn);
tr.appendChild(td);
}
<html>
<body>
<div class="scrollingTable">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8" >
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" >
<table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td align="right">125</td>
<td align="right">80</td>
<td align="right">9.5</td>
<td>ED</td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td align="right">0</td>
<td align="right">50</td>
<td align="right">3.0</td>
<td>W</td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td align="right">15</td>
<td align="right">200</td>
<td align="right">12.5</td>
<td>ED</td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td align="right">70</td>
<td align="right">70</td>
<td align="right">8.3</td>
<td>ED</td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td align="right">15</td>
<td align="right">170</td>
<td align="right">10.1</td>
<td>ED</td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td align="right">4</td>
<td align="right">200</td>
<td align="right">103.6</td>
<td>ES</td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td align="right">0</td>
<td align="right">230</td>
<td align="right">119.2</td>
<td>ES</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
There are a lot of ways to insert a column into each row of a table.
It all depends on what libraries you are using.
I will assume that you are using vanilla Javascript, (i.e: no external libraries).
Here is one way to insert a column, and control the content of each cell,
including detecting if you are currently on the table header, or normal cell.
const btn = document.getElementById('my-button');
btn.addEventListener('click', function(){
const tr = document.querySelectorAll('#my-table tr');
tr.forEach((row,index) => {
let cell;
if(index===0) {
cell = document.createElement('th');
cell.innerText = "fourth column";
} else {
cell = document.createElement('td');
cell.innerText = `row ${index},4`;
}
row.appendChild(cell);
});
});
table, td, th
{
border: 1px solid grey;
border-collapse: collapse;
}
td, th
{
padding: 1em;
}
button
{
margin-top: 2em;
}
<button id="my-button">Insert missing column</button>
<table id="my-table">
<thead>
<tr>
<th>first column</th>
<th>second column</th>
<th>third column</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, 1</td>
<td>row 1, 2</td>
<td>row 1, 3</td>
</tr>
<tr>
<td>row 2, 1</td>
<td>row 2, 2</td>
<td>row 2, 3</td>
</tr>
<tr>
<td>row 3, 1</td>
<td>row 3, 2</td>
<td>row 3, 3</td>
</tr>
</tbody>
</table>
const rows = document.getElementsByTagName("table")[0].rows; //Get all rows
for (let i = 1; i < rows.length; i++) { // Iterate rows of body
const row = rows[i]; // Get row
const button = document.createElement("button"); // Create button
button.innerHTML = "+"; // Set text of button
const cell = document.createElement("td"); // Create column
cell.appendChild(button); // Add button to column
row.appendChild(cell); // Add column to row
}
<div class="scrollingTable">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td align="right">125</td>
<td align="right">80</td>
<td align="right">9.5</td>
<td>ED</td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td align="right">0</td>
<td align="right">50</td>
<td align="right">3.0</td>
<td>W</td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td align="right">15</td>
<td align="right">200</td>
<td align="right">12.5</td>
<td>ED</td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td align="right">70</td>
<td align="right">70</td>
<td align="right">8.3</td>
<td>ED</td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td align="right">15</td>
<td align="right">170</td>
<td align="right">10.1</td>
<td>ED</td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td align="right">4</td>
<td align="right">200</td>
<td align="right">103.6</td>
<td>ES</td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td align="right">0</td>
<td align="right">230</td>
<td align="right">119.2</td>
<td>ES</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
IMPORTANT!
#IDs ARE UNIQUE!
Do not have more than one of the same #id on a page because it's:
invalid HTML
semantically gross
behavior becomes unpredictable
JavaScript if not immediately but eventually break
the terrorists win
There's like a ton of these in OP:
<button type="submit" id="myButton">+</button> <!--👎-->
Try to avoid using #id at all -- use .class instead.
In the example below the function insertCol() is versatile and reusable. The <table> has a <tfoot> for demonstration purposes. Details are commented in the example.
// This object stores content for insertCol() to fill a table
let content = {
cap: {
text: 'TEXT',
side: '',
act: 0 // 1='use data' 0='skip data'
},
tH: {
th: 'tH',
act: 0
},
tB: {
th: '',
td: `<td><button class="btn btn-sm btn-info add">âž•</button></td>`,
act: 1
},
tF: {
td: 'tF',
act: 0
}
};
/**
* #desc - Inserts a column into a given table
* #param {number} index - Index to inert new column at
* #param {object} content - Object that stores content
* #param {string<selector>} selector - CSS Selector of a
* tag if undefined #default is "table"
*/
function insertCol(index, content, selector = 'table') {
// Reference <table>
const table = document.querySelector(selector);
// Collect all <tr> into an array
const rowArray = [...table.rows];
let cols = rowArray[0].cells.length;
let size = rowArray.length;
//console.log(size);
//console.log(cols);
/*
If content.tB is active (1)...
... .foreach() <tr> add <td> and content at the index
*/
if (content.tB.act) {
rowArray.forEach(tr => {
tr.insertCell(index).innerHTML = content.tB.td;
});
}
/*
If there's a <thead> AND content.tH.act === 1...
... .removeCell() at index...
... add <th> with content
*/
if (table.tHead && content.tH.act) {
rowArray[0].deleteCell(index);
rowArray[0].insertCell(index).outerHTML = `<th>${content.tH.th}</th>`;
}
// The same as above for <tfoot>
if (table.tFoot && content.tF.act) {
rowArray[size - 1].deleteCell(index);
rowArray[size - 1].insertCell(index).innerHTML = content.tF.td;
}
// This block is for <caption>
if (table.caption && content.cap.act) {
table.caption.innerHTML = content.cap.text;
table.caption.style.captionSide = content.cap.side;
}
}
// -1 is the index after the last index
insertCol(-1, content);
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container scrollingTable">
<section class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8">
<label class='form-label' for='search'>Search</label>
<input id="search" class='form-control mb-2' type="text" placeholder="Search for names..">
<table class='table table-striped table-hover'>
<caption></caption>
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td>125</td>
<td>80</td>
<td>9.5</td>
<td>ED</td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td>0</td>
<td>50</td>
<td>3.0</td>
<td>W</td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td>15</td>
<td>200</td>
<td>12.5</td>
<td>ED</td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td>70</td>
<td>70</td>
<td>8.3</td>
<td>ED</td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td>15</td>
<td>170</td>
<td>10.1</td>
<td>ED</td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td>4</td>
<td>200</td>
<td>103.6</td>
<td>ES</td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td>0</td>
<td>230</td>
<td>119.2</td>
<td>ES</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
</tr>
</tfoot>
</table>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>
I need to access the cell of an HTML Table and change Its value. The method I tried didn't worked out. Refer the screenshot as well.
Cannot use the following method, since there were multiple with same value in some cases. I need to access the specific marked cell.
$('td:contains("1200")').text('....');
Cell need to access and Change the amount
<table class="table table-striped">
<thead>
<tr>
<th>Loan amount</th>
<th>New loan installment amount (first installment)</th>
<th>DSCR (both new and existing)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ValueOne">LKR 12000</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Accessing by ID And changing the value didn't worked.
document.getElementById("ValueOne").innerHTML = 'New Value';
Since you kindly provided us with an ID. Simply use:
Javascript:
document.getElementById("ValueOne").innerHTML = "LKR 100"
JQuery:
$("#ValueOne").text("LKR 100")
Demo: https://jsfiddle.net/fme8v6oa/
Options:
document.getElementsByTagName("td")[0].innerHTML = "LKR 100"
Your javascript code works, make sure to run your script after the page is loaded.
Here is an example using a button:
<table class="table table-striped">
<thead>
<tr>
<th>Loan amount</th>
<th>New loan installment amount (first installment)</th>
<th>DSCR (both new and existing)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ValueOne">LKR 12000</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<button onclick="changeme()">Change</button>
<script>
function changeme(){
document.getElementById("ValueOne").innerHTML = 'New Value';
}
</script>
Using jquery :
$('#mytable tr').each(function() {
$(this).find("#ValueOne").html("new value");
});
where mytable is the Id of your table
Demo : https://jsfiddle.net/xLz6f49h/4/
<html>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>Loan amount</th>
<th>New loan installment amount (first installment)</th>
<th>DSCR (both new and existing)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="Value1">LKR 12000</td>
<td id="Value2">Doe</td>
<td id="Value2">john#example.com</td>
</tr>
<tr>
<td id="Value3">Mary</td>
<td id="Value4">Moe</td>
<td id="Value5">mary#example.com</td>
</tr>
<tr>
<td id="Value6">July</td>
<td id="Value7">Dooley</td>
<td id="Value8">july#example.com</td>
</tr>
<tr>
<td id="Value9">July</td>
<td id="Value10">Dooley</td>
<td id="Value11">july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
CELL id: <input type="text" name="celliD" id="input1"><br><br>
New CELL Value: <input type="text" name="celliD" id="input2"><br>
<button onclick="changeCellValue()">Change Value</button>
<script>
function changeCellValue(){
var inputVal = document.getElementById('input1').value;
var newVal = document.getElementById('input2').value;
if(inputVal == null || inputVal == "" && newVal == null || newVal == ""){
alert("value is required");
} else {
var changeVal = document.getElementById(inputVal).innerHTML = newVal;
}
}
</script>
<body>
</html>
I know there was a billion questions like my but I still can't find solution, and I know it's basic and fundamentals of JS but I'm new with this language.
Ok, so I have table
<table>
<tr id = 'first'>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>SomeName</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName2</td>
<td>
Up
Down
</td>
</tr>
</table>
And I need to make functionality which allows to replacing table rows under <th># . When I put row with #2 on place #1 I want to keep proper orders of rows, 1,2 etc. I have row 2 on first place in my table but with #2, I need to change it.
It looks like this:
function moveChoiceTo(elem_choice, direction) {
var tr = elem_choice.parentNode.parentNode,
td = tr.parentNode;
if (direction === -1 && tr.previousElementSibling &&
!tr.previousElementSibling.id) {
td.insertBefore(tr, tr.previousElementSibling);
} else if (direction === 1 && tr.nextElementSibling) {
td.insertBefore(tr, tr.nextElementSibling.nextElementSibling)
}
}
But I still have no idea how to make my # unchanged. I want to use for it JQ but I've tried different solutions and none of them works.
I've tried
$(tr.firstElementChild.innerHTML).before($(tr.previousElementSibling.firstElementChild.innerHTML));
$(tr.firstElementChild.innerHTML).html(tr.previousElementSibling.firstElementChild.innerHTML);
$(tr.firstElementChild.innerHTML).replaceWith($(tr.previousElementSibling.firstElementChild.innerHTML));
And some others combination but i can't figured out what is wrong. Do I pass JS variable to JQ function in wrong way?
My table should looks like:
<table>
<tr id = 'first'>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>SomeName2</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName1</td>
<td>
Up
Down
</td>
</tr>
</table>
Name, action and others rows replaced places but #id is unchanged
EDIT.
Ok, I'm the stupidest man on the earth.
This is solution I was looking for:
$(tr.firstElementChild).html(tr.previousElementSibling.firstElementChild.innerHTML++);
when I go up, and
$(tr.firstElementChild).html(tr.nextElementSibling.firstElementChild.innerHTML--);
when I go down
Get second tr using $('tr').eq(1), then get all the children of tr and then use eq(1) to get second td.
const td1 = $('tr').eq(1).children().eq(1);
const td2 = $('tr').eq(2).children().eq(1);
const temp = td1.text();
td1.text(td2.text());
td2.text(temp);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id='first'>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>SomeName</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName2</td>
<td>
Up
Down
</td>
</tr>
</table>
Here's a simple solution using a delegate listener on the table element:
myTable.addEventListener('click', function({
target: t
}) {
if (t.tagName === 'BUTTON' && ['up', 'down'].includes(t.textContent.toLowerCase())) {
let row = t.closest('tr');
switch (t.textContent.toLowerCase()) {
case 'up':
let prevRow = row.previousElementSibling;
if (prevRow) {
row.parentElement.insertBefore(row, prevRow);
}
break;
case 'down':
let nextRow = row.nextElementSibling;
if (nextRow) {
row.parentElement.insertBefore(nextRow, row);
}
break;
}
}
})
<table id="myTable">
<thead>
<tr id="first">
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>SomeName1</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName2</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>3</td>
<td>SomeName3</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>4</td>
<td>SomeName4</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>5</td>
<td>SomeName5</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>6</td>
<td>SomeName6</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
</tbody>
</table>
I have a table structured as below, I want the user onclick on view details button to get the value of the order id and the value of the selected option from the combobox in an array to use it in ajax to update the database, how can this be done?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Jack</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails()">view</button></td>
</tr>
<tr>
<td>5</td>
<td>Adel</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails()">view</button></td>
</tr>
<tr>
<td>6</td>
<td>Aly</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails()">view</button></td>
</tr>
</tbody>
</tr>
</table>
in html:
onclick="ViewDetails(this)"
js:
function ViewDetails(_el){
var orders_id=$(_el).parent().parent().find("td:first").html();
alert(orders_id);
////////...........
}
This might be what you're looking for. This will get the id and the selected value of the select from the row of witch the pressed button.
function ViewDetails(obj) {
var $obj = $(obj);
var id, option;
id = $obj.closest("tr").find("td:eq(0)").text();
option = $obj.closest("tr").find("td:eq(2) select").val();
console.log(id + " | " + option)
}
Please note that I added this to onclick="ViewDetails()", onclick="ViewDetails(this)"
Demo
function ViewDetails(obj) {
var $obj = $(obj);
var id, option;
id = $obj.closest("tr").find("td:eq(0)").text();
option = $obj.closest("tr").find("td:eq(2) select").val();
console.log(id + " | " + option)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Jack</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button type="button" value="Ok" class="btn btn-success ViewDetails btn-sm" onclick="ViewDetails(this)">ViewDetails</button></td>
</tr>
<tr>
<td>5</td>
<td>Adel</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button type="button" value="Ok" class="btn btn-success ViewDetails btn-sm" onclick="ViewDetails(this)">ViewDetails</button></td>
</tr>
<tr>
<td>6</td>
<td>Aly</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button type="button" value="Ok" class="btn btn-success ViewDetails btn-sm" onclick="ViewDetails(this)">ViewDetails</button></td>
</tr>
</tbody>
</tr>
Add a common class to each of the td containing orderId and a common class to each of the select element. Then use jquery to find the parent tr & use find method to to get the values
function viewDetails(elem) {
// finding parent tr and then the td for orderId
var orderId = $(elem).parent().parent().find('.odId').text().trim();
// get selected option from dropdown
var selectedOption = $(elem).parent().parent().find('.selected').val();
console.log(orderId, selectedOption)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="odId">4</td>
<td>Jack</td>
<td><select class='selected'><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails_1" type="button" value="Ok" class="btn btn-success btn-sm" onclick="viewDetails(this)">Click</button></td>
</tr>
<tr>
<td class="odId">5</td>
<td>Adel</td>
<td><select class='selected'><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails_2" type="button" value="Ok" class="btn btn-success btn-sm" onclick="viewDetails(this)">Click</button></td>
</tr>
<tr>
<td class="odId">6</td>
<td>Aly</td>
<td><select class='selected'><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails_3" type="button" value="Ok" class="btn btn-success btn-sm" onclick="viewDetails(this)">Click</button></td>
</tr>
</tbody>
</table>
Try this
$(document).on('click', '.view_details', function(){
p = $(this).parents("tr")
order_id = p.find("td:first").html()
select_value = p.find("select").val()
alert("order_id:"+order_id+" selected:"+select_value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Jack</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm view_details" >view</button></td>
</tr>
<tr>
<td>5</td>
<td>Adel</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm view_details" >view</button></td>
</tr>
<tr>
<td>6</td>
<td>Aly</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm view_details" >view</button></td>
</tr>
</tbody>
</tr>
Change onclick="ViewDetails()" to onclick="ViewDetails(this)", this way you'll pass DOM element to your function.
Now your function:
function ViewDetails(buttonEl) {
var row = buttonEl.closest('tr'); // here you'll get your row
var orderId = row.getElementsByTagName('td')[0].textContent; //order id
var status = row.getElementsByTagName('select')[0].value; //status
}
function ViewDetails(buttonEl) {
var row = buttonEl.closest('tr'); // here you'll get your row
var orderId = row.getElementsByTagName('td')[0].textContent; //order id
var status = row.getElementsByTagName('select')[0].value; //status
console.log(orderId + ' ' + status);
}
<table>
<tr>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Jack</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails(this)"></button></td>
</tr>
<tr>
<td>5</td>
<td>Adel</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails(this)"></button></td>
</tr>
<tr>
<td>6</td>
<td>Aly</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails(this)"></button></td>
</tr>
</tbody>
</tr>
I am currently trying to setup a table in HTML with 2 columns of information. The 3rd column has a button, and when pressed, it deletes that entry from the table.
What I am looking for is that the user cannot select an item below the first entry in the table. The code I have for the table right now is listed below.
HTML:
<table>
<tr>
<th>Firstname</th>
<th>Issue</th>
<th>Select</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)"/>
</td>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)"/>
</td>
</tr>
</table>
JavaScript:
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
As per i understand your question you need to delete first row not a second row.
Please see below code if you want to do like this.
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
if(row.rowIndex<=1)
row.parentNode.removeChild(row);
}
<table>
<tr>
<th>Firstname</th>
<th>Issue</th>
<th>Select</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)"/>
</td>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)"/>
</td>
</tr>
</table>
you can try with this code
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="tbUser">
<tr>
<th>Name</th>
<th>Location</th>
<th></th>
</tr>
<tr>
<td>Amit</td>
<td>Ghatkopar</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
<tr>
<td>Vicky</td>
<td>Powai</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
<tr>
<td>Sunny</td>
<td>Powai</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
<tr>
<td>John</td>
<td>NewYork</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#tbUser").on('click','.btnDelete',function(){
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>