hi there I want to clear the data from a table but just one row and not delete the row. i was looking for some code but I find just delete row
what is the best way to clear the data from a tr and leave the td tittle just clear the Item and Task
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Task</th>
<th>Item</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>tittle</td>
<td data-name="task" class="task" data-type="text">task1</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
<td> <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>tittle</td>
<td data-name="task" data-disabled="true" class="task" data-type="text">task2</td>
<td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
<td> <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>tittle</td>
<td data-name="task" class="task" data-type="text">task3</td>
<td data-name="Item" class="Item" data-type="select">Item3</td>
<td> <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
</tr>
</tbody>
</table>
On click find the .parent() of the button, and clear its .siblings() using `.empty()':
$('#table').on('click', '.delete', function() {
$(this).parent('td')
.siblings('.task, .Item') // or remove selectors to clear all siblings
.empty();
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
<td><button class="delete btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>2</td>
<td data-name="task" data-disabled="true" class="task" data-type="text">002</td>
<td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
<td><button class="delete btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>3</td>
<td data-name="task" class="task" data-type="text">003</td>
<td data-name="Item" class="Item" data-type="select">Item3</td>
<td><button class="delete btn btn-sm btn-default">delete data</button></td>
</tr>
</tbody>
</table>
If you want to remove the row entirely :
$('#delete').click(function() {
$(this).closest('tr').remove();
});
To remove all content -including th divs- :
$('#delete').click(function() {
$(this).closest('tr').empty();
});
To remove only the content of each cell :
$('#delete').click(function() {
$(this).closest('tr').children().empty();
$(this).closest('tr').css({display: "hidden"});//to visually remove the line (and not have an empty line)
});
$("#table tr:nth-child(n) td").empty();
OR
$("#table tr:nth-child(n) td").html('');
Related
I've always used jQuery, it's easy there, but I decided to switch to pure JS and ran into difficulties.
When I click on the button, I want the crossOut class to be added to the 3 elements with the appOrd class, and the button itself becomes inactive (the bootstrap class - disabled).
And the second button, Resume, does the opposite.
But nothing works, please tell me what is the problem?
P.S.I suppose there is an error in the const, perhaps it cannot be used like that?
UPD-1. Barmar suggested a typo, corrected it.
UPD-2. It is necessary that the class is added only to the current row of the table.
const hasClass = document.querySelector('.appOrd').classList.contains('crossOut');
document.querySelector('.completeBtn').onclick=function(e) {
e.preventDefault();
if( !hasClass) {
document.querySelector('.appOrd').classList.add('crossOut');
document.querySelector('.resumeBtn').classList.remove('disabled');
this.classList.add('disabled');
}
}
document.querySelector('.resumeBtn').onclick=function(e) {
e.preventDefault();
if(hasClass) {
document.querySelector('.appOrd').classList.remove('crossOut');
document.querySelector('.completeBtn').classList.remove('disabled');
this.classList.add('disabled');
}
}
.crossOut{
text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">Name</th>
<th scope="col">Phone number</th>
<th scope="col">Application time</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
</tbody>
</table>
You need to use querySelectorAll() to select more than one element, and then update the class on all of them. This can be done with .forEach() to loop over them.
Similarly, use querySelectorAll() to add the onclick handler to each of the buttons.
document.querySelectorAll('.completeBtn').forEach(el => el.onclick = function(e) {
e.preventDefault();
let row = this.closest("tr");
row.querySelectorAll('.appOrd').forEach(el => el.classList.add('crossOut'));
row.querySelector('.resumeBtn').classList.remove('disabled');
this.classList.add('disabled');
});
document.querySelectorAll('.resumeBtn').forEach(el => el.onclick = function(e) {
e.preventDefault();
let row = this.closest("tr");
row.querySelectorAll('.appOrd').forEach(el => el.classList.remove('crossOut'));
row.querySelector('.completeBtn').classList.remove('disabled');
this.classList.add('disabled');
});
.crossOut {
text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">Name</th>
<th scope="col">Phone number</th>
<th scope="col">Application time</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
<tr class="text-center">
<td scope="row" class="appOrd">Name 2</td>
<td class="appOrd">Phone number 2</td>
<td class="appOrd">2021-02-06 09:00:50</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
</tbody>
</table>
I'm not sure this is best approach OR not.
You can query the table rows (tbody tr) and add handlers by querying the Complete and Resume buttons and toggle the classes based clicks. In this way, you can handle the rows(tr) smoothly.
const rows = document.querySelectorAll('tbody tr')
rows.forEach(row => {
const completeBtn = row.querySelector('.completeBtn');
const resumeBtn = row.querySelector('.resumeBtn');
const appOrds = row.querySelectorAll('.appOrd');
completeBtn.addEventListener('click', function(e) {
e.preventDefault();
appOrds.forEach(el => el.classList.add('crossOut'));
resumeBtn.classList.remove('disabled');
this.classList.add('disabled');
})
resumeBtn.addEventListener('click', function(e) {
e.preventDefault();
appOrds.forEach(el => el.classList.remove('crossOut'));
completeBtn.classList.remove('disabled');
this.classList.add('disabled');
})
})
.crossOut{
text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">Name</th>
<th scope="col">Phone number</th>
<th scope="col">Application time</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
</tbody>
</table>
the buttons are for the row that the they are in, so it is better to do it this way
const resume = (src, enable) => {
const tr = src.parentElement.parentElement;
const nameElts = tr.querySelectorAll('.appOrd');
if (enable) {
nameElts.forEach(e => e.classList.remove('crossOut'));
} else {
nameElts.forEach(e => e.classList.add('crossOut'));
}
const completeBtn = tr.querySelector(".completeBtn");
const resumeBtn = tr.querySelector(".resumeBtn");
if (enable) {
completeBtn.classList.remove('disabled');
resumeBtn.classList.add('disabled');
} else {
resumeBtn.classList.remove('disabled');
completeBtn.classList.add('disabled');
}
}
document.querySelectorAll(".completeBtn").forEach(elt => {
elt.onclick = () => {
resume(event.target, false);
}
});
document.querySelectorAll('.resumeBtn').forEach(elt => {
elt.onclick = () => {
resume(event.target, true);
}
});
.crossOut {
text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">Name</th>
<th scope="col">Phone number</th>
<th scope="col">Application time</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
<tr class="text-center">
<td scope="row" class="appOrd">Name1</td>
<td class="appOrd">Phone number1</td>
<td class="appOrd">2021-02-08 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
</tbody>
</table>
I would like show "No Record(s) Found" if I search something that is not on the table. Can someone show me a javascript code on how can I achieve that? I am not using any plugins cause I am not familiar with those.
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th scope="col">Image</th>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">QR Code</th>
<th colspan="2" scope="col"></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr id="noRecordTR" class='notfound'>
<td colspan='7'>No record found</td>
</tr>
</tbody>
</table>
This is my HTML file where the table is located...
<script src="__assets/js/jquery-3.5.1.min.js"></script>
<script src="__assets/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
And this is my javascript file. I know I have to put some js but I don't know what I am going to put. Thank you.
So check to see any rows are visible after hiding them
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
$("#noRecordTR").toggle(!$("#myTable tr:visible").length);
});
});
.notfound {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" />
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th scope="col">Image</th>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">QR Code</th>
<th colspan="2" scope="col"></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr id="noRecordTR" class='notfound'>
<td colspan='7'>No record found</td>
</tr>
</tbody>
</table>
I have a dynamic table and I want to be able to replace an entire row with data from another page.
I want to be able to replace the data over and over again without refreshing the page. I have made a fiddle here but can't understand why $("#rowid").replaceWith(newdata);does not seem work. If I change this to $("#2").replaceWith(newdata); then row 2 with id=2 gets replaced as expected.
What have I got wrong? Many thanks.
html
<div class="container">
<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table" id="1"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
<tbody>
</table>
</div>
Jquery
$('#data_table').on("click", "tr",function(){
var btnid= $(this).attr("id");//Find button ID
var rowid= $(this).closest('tr').attr("id");//Find row ID
var newdata= '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>'; //Data to be replaced
alert(rowid);
$("#rowid").replaceWith(newdata); //Replace clicked row with data
});
It's because "#rowid" is a string literal.
Try: $("#"+rowid)
You need to access your variable.
The immediate issue is because rowid is a variable, yet you are using it as a string literal. You need to fix this by concatenating the value of the variable to the selector:
$('#' + rowid).replaceWith(newdata);
$('#data_table').on("click", "tr", function() {
var btnid = $(this).attr("id"); //Find button ID
var rowid = $(this).closest('tr').attr("id"); //Find row ID
var newdata = '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>';
$('#' + rowid).replaceWith(newdata);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table">
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="table" id="1">
<td></td>
<td class="prod">First cell</td>
<td class="prod">Second cell</td>
<td class="prod">Third Cell</td>
<td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2">
<td></td>
<td class="prod">Fourth Cell</td>
<td class="prod">Fifth cell</td>
<td class="prod">Sixth Cell</td>
<td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3">
<td></td>
<td class="prod">Seventh</td>
<td class="prod">Eighth</td>
<td class="prod">Ninth</td>
<td> <button type="button" id="btn3" class="add-row">Replace Row</button></td>
</tr>
</tbody>
</table>
</div>
That being said, the pattern of using incremental id attributes on each and every tr is not a good idea. For a start it makes the HTML harder to maintain and the JS needlessly complex.
A much better approach is to use DOM traversal to find the tr related to the clicked button. You can also place the HTML content to be used as the source within the DOM so that the HTML and JS are not coupled too closely. With those points in mind, try this:
$('#data_table').on("click", ".add-row", function() {
var $newdata = $('#data_table tr.clone').clone().removeClass('clone');
$(this).closest('tr').replaceWith($newdata);
});
.clone {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table">
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="clone">
<td></td>
<td class="prod">10</td>
<td class="prod">11</td>
<td class="prod">12</td>
<td><button type="button" class="add-row">Replace Row</button></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">First cell</td>
<td class="prod">Second cell</td>
<td class="prod">Third Cell</td>
<td> <button type="button" class="add-row">Replace Row</button></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">Fourth Cell</td>
<td class="prod">Fifth cell</td>
<td class="prod">Sixth Cell</td>
<td> <button type="button" class="add-row">Replace Row</button></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">Seventh</td>
<td class="prod">Eighth</td>
<td class="prod">Ninth</td>
<td> <button type="button" class="add-row">Replace Row</button></td>
</tr>
</tbody>
</table>
</div>
Instead of $("#rowid") you need to use $("#"+rowid) since rowid is the variable not a selector.
/* Latest compiled and minified JavaScript included as External Resource */$('#data_table').on("click", "tr",function(){
var btnid= $(this).attr("id");//Find button ID
var rowid= $(this).closest('tr').attr("id");//Find row ID
var newdata= '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>';
//alert(rowid);
$("#"+rowid).replaceWith(newdata);
});
//$("#"+btn).click(function(){
// });
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table" id="1"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
<tbody>
</table>
</div>
I have a dynamic table and I want to replace two rows
with data from another page. I've got it to work with one table row but whenever I try to replace two rows it replaces one and adds another. Is this possible?
I've made a fiddle here.
(The reason I'm doing this is in the final version the second row is an accordion with the same data but displayed differently).
Many thanks.
Html
<div class="container">
<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table_hidden"><td></td><td>1a</td><td>2a</td><td>3a</td><td></td></tr>
<tr class="table"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table_hidden"><td></td><td>4a</td><td>5a</td><td>6a</td><td></td></tr>
<tr class="table"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
<tr class="table_hidden"><td></td><td>7a</td><td>8a</td><td>9a</td><td></td></tr>
<tbody>
</table>
</div>
Jquery
$('#data_table').on("click", ".add-row", function() {
var newdata= '<tr class="table"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr><tr class="table_hidden"><td></td><td>a</td><td>b</td><td>c</td><td></td></tr>';
$(this).closest('tr').replaceWith(newdata);
});
If you want to remove 2 rows, you can delete the 2nd row first. Use replaceWith to replace the <tr> with 2 <tr>s
$('#data_table').on("click", ".add-row", function() {
var newdata = '<tr class="table"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr><tr class="table_hidden"><td></td><td>a</td><td>b</td><td>c</td><td></td></tr>';
$(this).closest('tr').next('tr').remove(); //Remove the next tr
$(this).closest('tr').replaceWith(newdata); //Replace the current tr
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table">
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="table">
<td></td>
<td class="prod">First cell</td>
<td class="prod">Second cell</td>
<td class="prod">Third Cell</td>
<td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table_hidden">
<td></td>
<td>1a</td>
<td>2a</td>
<td>3a</td>
<td></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">Fourth Cell</td>
<td class="prod">Fifth cell</td>
<td class="prod">Sixth Cell</td>
<td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table_hidden">
<td></td>
<td>4a</td>
<td>5a</td>
<td>6a</td>
<td></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">Seventh</td>
<td class="prod">Eighth</td>
<td class="prod">Ninth</td>
<td> <button type="button" id="btn3" class="add-row">Replace Row</button></td>
</tr>
<tr class="table_hidden">
<td></td>
<td>7a</td>
<td>8a</td>
<td>9a</td>
<td></td>
</tr>
<tbody>
</table>
</div>
I have an html table inside a div, and i want to run jquery on each li element or the li class
and alert his id.
this is the html code.
this is the html code.
HTML:
<div id="lightbox_tlbr" style="top: 273px; display: block;">
<div id="test">
<div class="header_div" id="first_header"></div>
<div class="header_div" id="second_header"></div>
<div class="header_div" id="third_header"></div>
<div class="header_div" id="fourth_header"></div>
</div>
<li class="announcement_tlbr" id="announcement7">
<table id="tg_toolbar7" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
<th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
<th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
<td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
</tr>
<tr id="tg_text97">
<td colspan="2" class="tg_text" id="tg_text37"></td>
</tr>
<tr class="r2_toolbar" id="tg_text47">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
<td class="tg_toolbar-031e" id="tg_text67"></td>
<td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
</tr>
</tbody>
</table>
</li>
<li class="announcement_tlbr" id="announcement5">
<table id="tg_toolbar5" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
<th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
<th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
<td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
</tr>
<tr id="tg_text95">
<td colspan="2" class="tg_text" id="tg_text35"></td>
</tr>
<tr class="r2_toolbar" id="tg_text45">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
<td class="tg_toolbar-031e" id="tg_text65"></td>
<td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
</tr>
</tbody>
</table>
</li>
<div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>
i try:
jQuery.each(".announcement_tlbr", function(k,v){ alert(k); })
what is a good way to do this?
You should use this inside each to get the reference of current element.Try this:
jQuery.each(".announcement_tlbr", function(e){
alert($(this).attr('id'));//or this.id
});
$(document).ready(function() {
$(".announcement_tlbr").each(function(){
alert($(this).attr("id"))
});
});