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>
Related
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('');
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 want to change a row from a table to another but I want to replace the addBtn for a removeBtn.
dataTableTeamMembers is the other table
$('.addBtn').click(function() {
var row = $(this).closest('tr');
console.log(row[1]);
$('#dataTableTeamMembers tbody').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="text-center hover-table odd" role="row">
<td class="sorting_1"><img class="avatarImage" src="data:image/jpg;base64,iVBORw"></td>
<td>johns</td>
<td>John Smith</td>
<td>Member</td>
<td>
<button type="button" class="btn btn-primary addBtn"> Add</button>
</td>
</tr>
update your js code with this.
$('.addBtn').click(function () {
var row = $(this).closest('tr');
console.log(row[0]);
$('#dataTableTeamMembers tbody').append(row[0].innerHTML);
});
$('.addBtn').click(function() {
var row = $(".tbl .tbltr").html();
console.log(row[1]);
$('.tbl').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='tbl'>
<tr class="text-center hover-table odd tbltr" role="row">
<td class="sorting_1"><img class="avatarImage" src="data:image/jpg;base64,iVBORw"></td>
<td>johns</td>
<td>John Smith</td>
<td>Member</td>
<td>
<button type="button" class="btn btn-primary addBtn"> Add</button>
</td>
</tr>
</table>
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>
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"))
});
});