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>
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 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 am trying to move a selected row in my DataTable to another DataTable. I have this almost working but the problem is with the cells that have data-search attributes on them. That data just gets placed into my other table as [object Object]. I've tried finding an example on how to handle this case in the documentation but I'm not having any luck. Here is what I have..
https://jsfiddle.net/dmcgrew/x85o0mgL/5/
HTML..
<table id="selected_items">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Crest Allowed</th>
<th> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="select_items">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Crest Allowed</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr id="1">
<td data-search="test">1</td>
<td>Testing Bowl</td>
<td data-search="nocrest">NO</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="test">32</td>
<td>Cup Test</td>
<td data-search="nocrest">NO</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="pristine">3335</td>
<td>Bowl Test</td>
<td data-search="nocrest">NO</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="pristine">120</td>
<td>Plate Test</td>
<td data-search="yescrest">YES</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="test">1000</td>
<td>Mug Test</td>
<td data-search="yescrest">YES</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="pristine">65</td>
<td>Ramekin Test</td>
<td data-search="yescrest">YES</td>
<td><button class="button select">Select</button></td>
</tr>
</tbody>
</table>
JS...
var select_items = $('.select_items').dataTable();
var selected_items = $('#selected_items').DataTable();
$('.select_items').on("click", "button.select", function(){
var selectedRow = select_items.api().row( $(this).parents("tr") ).data();
selected_items.row.add(selectedRow).draw(true);
});
Your basic problem is the data.
When a td has a data attribute (data-search), it is included in the data object so your data array looks like this:
[{display:"1", #data-search:"test"}, "Testing Bowl", {display: "NO", #data-search: "nocrest"}, "Select"] so first and third items in the array are, in fact objects, hence [object, object]
so the quickest (not the best in my mind) is to alter the data before you add it.
select_items.on("click", "button.select", function(){
var selectedRow = select_items.api().row( $(this).parents("tr") ).data();
console.log(selectedRow);
selectedRow[0] = selectedRow[0].display;
selectedRow[2] = selectedRow[2].display;
selected_items.row.add(selectedRow).draw(true);
});
https://jsfiddle.net/x85o0mgL/12/
$(function() {
$('.sus').click(function(e) {
if($(".case").is(":checked")){
for (var i = Things.length; i >= 0; i++) {
Things[i]
}
alert("checkeado");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success sus">Success</button>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Checkbox</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
I'm trying to make ckecked to be showing me the first name of which is ckecked.
As shown in the picture
Or make a for which to cross the table and show me the ones that are checked
enter image description here
This should work for you. You will need to remove the extra comma (,) at the end.
$(function() {
$('.sus').click(function(e) {
var checkedNames = '';
var $things = $('.case:checked');
if($things.length > 0){
for (var i = 0; i < $things.length; i++) {
checkedNames += $($things[i]).closest('tr').find('td:first').text() + ',';
}
alert("checkeado " + checkedNames);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success sus">Success</button>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Checkbox</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
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>