Below I have the code that allows me to edit a table row inline. However it edits ALL of the TDs within that row. My problem, along with the code, are stated below. Any help is appreciated.
<tbody>
<tr>
<th scope="row">Test</th>
<td class="amount">$124</td>
<td class="amount" id="" >$154</td>
<td class="diff">- 754</td>
</tr>
</tbody>
The above table is just a sample. What I have been trying to accomplish is, to simply edit the TDs within that particular row, but I need it to disregard the diff TD.
I'm fairly new to jQuery and have got the following code via the help of a jQuery book.
$(document).ready(function() {
TABLE.formwork('#current-expenses');
});
var TABLE = {};
TABLE.formwork = function(table){
var $tables = $(table);
$tables.each(function () {
var _table = $(this);
_table.find('thead tr').append($('<th class="edit"> </th>'));
_table.find('tbody tr').append($('<td class="edit"><input type="button" value="Edit"/></td>'))
});
$tables.find('.edit :button').live('click', function(e) {
TABLE.editable(this);
e.preventDefault();
});
}
TABLE.editable = function(button) {
var $button = $(button);
var $row = $button.parents('tbody tr');
var $cells = $row.children('td').not('.edit');
if($row.data('flag')) { // in edit mode, move back to table
// cell methods
$cells.each(function () {
var _cell = $(this);
_cell.html(_cell.find('input').val());
})
$row.data('flag',false);
$button.val('Edit');
}
else { // in table mode, move to edit mode
// cell methods
$cells.each(function() {
var _cell = $(this);
_cell.data('text', _cell.html()).html('');
if($('td.diff')){
var $input = $('<input type="text" />')
.val(_cell.data('text'))
.width(_cell.width() - 16);
_cell.append($input);
}
})
$row.data('flag', true);
$button.val('Save');
}
}
I have attempted to alter the code so that it would disregard the diff class TD, but have had no luck so far.
Replace
var $cells = $row.children('td').not('.edit');
with
var $cells = $row.children('td').not('.edit').not('.diff');
Add one more line after:
var $cells = $row.children('td').not('.edit').not('.diff');
Related
This question already has answers here:
Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
(2 answers)
Closed 3 months ago.
I want to use jQuery to create a table. Currently I have an empty table body and I would like to use some jQuery to fill up the table:
var $tr = $("<tr>"),
$td = $("<td>");
var date = '2018-01-01'
$td.text(date);
$tr.append($td);
$td.text("New Years");
$tr.append($td);
$("#body").append($tr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id='body'>
</tbody>
<table>
But this only appends the second td. The first one gets overwritten. Any ideas on how to fix?
Like Taplar said in comments, if the element already is in DOM, the .append will only "move it".
Now in your example, you append it a the same place, but also change the text.
Try the .clone() method to duplicate elements.
var $tr = $("<tr>");
var $td = $("<td>");
var date = '2018-01-01';
$td.text(date);
$tr.append($td);
var secondCell = $td.clone().text("New Years");
$tr.append(secondCell);
$("#body").append($tr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id='body'>
</tbody>
</table>
var $tr1 = $("<tr>"),
$tr2 = $("<tr>"),
$tr3 = $("<tr>"),
$td = $("<td>");
var date = '2018-01-01';
$td.text(date);
//various ways to accomplish it
$tr1.append($td.prop('outerHTML'));
$tr2.append($td.clone());
$tr3.append($('<td>', { text: date }));
$td.text("New Years");
$tr1.append($td.prop('outerHTML'));
$tr2.append($td.clone());
$tr3.append($('<td>', { text: 'New Years' }));
$("#body").append([$tr1, $tr2, $tr3]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id='body'>
</tbody>
<table>
You have to clone $td, so that DOM treats it as a new element.
var $tr = $("<tr>"),
$td = $("<td>");
var date = '2018-01-01'
$td.text(date);
$tr.append($td.clone());
$td.text("New Years");
$tr.append($td.clone());
$("#body").append($tr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id='body'>
</tbody>
<table>
You can try next code without jquery:
let tbody = document.querySelector('#body');
let tr = document.createElement('tr');
let td = document.createElement('tr');
td.textContent = '2018-01-01';;
let tdClone = td.cloneNode();
tdClone.textContent = "New Years";
tr.append(td,tdClone);
tbody.append(tr);
I think that is true way, because you can create new td instead of clone created td (maybe for example this td has special classes or atributes), and you code repaint DOM only after insert tr in table.
Hmm... Maybe this could be an alternative to do that:
var texts = ["2018-01-01", "New Years"];
$.each(texts, function(i, val){
$("<tr><td>"+val+"</td></tr>").appendTo("#body")
});
$.each gets each item on the array texts, wrap it on tr and td, then append to the result on #body.
working fiddle
I need a help on changing the JavaScript code to jQuery of my own code.
TASK:
When I click the '+' button on the tree, it shows/adds a new row to the table also the button changes to '-'(minus). After that, again I click on the minus(-) button, it hides the row.
The above task is done in javascript. I need to convert it to jQuery. Is it possible? If yes means, please help me. Thanks in advance.
The code is as follows:
<html>
<head>
<title>Appending table row in a table</title>
<script language = "javascript">
function changeImage(that,x)
{
var clickedrow = document.getElementById("append"+x);
var subrow = document.getElementById("append"+x+"a");
var table = document.getElementById("mytable");
if(that.src === "http://renko-server/sample/arun/jquery/images/plus.gif")
{
that.src = "http://renko-server/sample/arun/jquery/images/minus.gif";
if(subrow)
{
subrow.style.display="";
}
else
{
subrow = table.insertRow(clickedrow.rowIndex+1);
subrow.id="append"+x+"a";
var cell1 = subrow.insertCell(0);
var cell2 = subrow.insertCell(1);
var cell3 = subrow.insertCell(2);
cell1.innerHTML = "";
cell2.innerHTML = "Kumar";
cell3.innerHTML = "Madurai";
}
}
else
{
that.src = "http://renko-server/sample/arun/jquery/images/plus.gif";
subrow.style.display="none";
}
}
</script>
</head>
<body>
<table id="mytable" class="appendtable">
<tr><td></td><td><b>Name</b></td><td><b>Location</b></td></tr>
<tr id="append1"><td><img id="plus1" onclick="javascript:changeImage(this,1);" src="http://renko-server/sample/arun/jquery/images/plus.gif" / ></td><td>Arun</td><td>Sivakasi</td></tr>
<tr id="append2"><td><img onclick="javascript:changeImage(this,2);" id="plus2" src="http://renko-server/sample/arun/jquery/images/plus.gif"/></td><td>Raj</td><td>Kovai</td></tr>
<tr id="append3"><td><img id="plus3" src="http://renko-server/sample/arun/jquery/images/plus.gif" onclick="javascript:changeImage(this,3);"/></td><td>Jerome</td><td>Bangalore</td></tr>
</table>
</body>
</html>
change you html like this:-
<table id="mytable" class="appendtable">
<tr><td></td><td><b>Name</b></td><td><b>Location</b></td></tr>
<tr id="append1"><td><img id="plus1" onclick="changeImage(this);" src="http://renko-server/sample/arun/jquery/images/plus.gif" /> ></td><td>Arun</td><td>Sivakasi</td></tr>
// ^^^ this is change
<tr id="append2"><td><img onclick="changeImage(this);" id="plus2" src="http://renko-server/sample/arun/jquery/images/plus.gif" /></td><td>Raj</td><td>Kovai</td></tr>
<tr id="append3"><td><img id="plus3" src="http://renko-server/sample/arun/jquery/images/plus.gif" onclick="javascript:changeImage(this);" /></td><td>Jerome</td><td>Bangalore</td></tr>
</table>
and your jquery function is:-
function changeImage(that) {
var clickedrow = $(that);
var subrow = $('#' + clickedrow.attr('id') + 'a');
var table = $("#mytable");
if (clickedrow.attr('src') === "http://renko-server/sample/arun/jquery/images/plus.gif") {
clickedrow.attr('src', "http://renko-server/sample/arun/jquery/images/minus.gif");
if (subrow.length) {
subrow.show();
}
else {
subrow = $('<tr><td></td><td>Kumar</td><td>Madurai</td></tr>').insertAfter(clickedrow.parents('tr'));
}
}
else {
clickedrow.attr('src', "http://renko-server/sample/arun/jquery/images/plus.gif");
subrow.hide();
}
}
Demo
Or if you don't want to use onclick direct on image Try this
<table id="mytable">
<tr>
<td> 1.<a class="mybk" href="/sample/samples/sample.php?mybookid=2000"> PROFESSIONAL EDUCATIONAL</a></td>
</tr>
<tr>
<td> 2.<a class="mybk" href="/sample/samples/sample.php?mybookid=2001"> New EDUCATIONAL</a></td>
</tr>
........
.
</table>
From the HTML I can able to get the tr, td value as
1.<a class="mybk" href="/sample/samples/sample.php?mybookid=2000"> PROFESSIONAL EDUCATIONAL</a>
..etc
my question is on the each row how can i get the anchor tag href value
My code is :
$('#mytable> tbody > tr').each(function() {
var name = $(this).find("td").eq(0).html();
var href = $(".mybk").attr('href');
}
I got only first href values for all the loop. How can i get each time each row a tag href value ??
Try to change it to working "in context"
$('#mytable> tbody > tr').each(function() {
var tData = $(this).find("td").eq(0);
var name = tData.html();
var href = $(".mybk", tData).attr('href');
var bookId = href.match(/mybookid=(\d+)/)[1];
});
http://jsbin.com/lijeq/1/
Because you're asking for that value:
var href = $(".mybk").attr('href');
IE: the first element with class .mybk encountered
try this:
$(function(){
$('#mytable> tbody > tr').each(function() {
var name = $(this).find("a").text();
var href = $(this).find("a").attr('href');
console.log(name,href);
});
})
I am using the following snippet and from this I can find the index of a row which one is selected on the basis of checkbox on every row of the table.How can I modify this snippet so that I can get the selected row data instead of index?
Please Help!!
<script>
function myfunction3() {
var element_table = document.getElementsByName('collection');
var element_tableRows = element_table[0].rows;
var selectedTr = new Array();
var data = "";
for (var i = 0; i < element_tableRows.length; i++) {
var checkerbox = element_tableRows[i].cells[0].firstChild;
if (checkerbox.checked) {
data = data+ element_tableRows[i].getAttribute("name");
}
}
var element_paragraph = document.getElementsByName('description');
element_paragraph.innerHTML = data;
alert(data);
}
</script>
as TJ says, i dont see any index in your code. but try something like this which is cleaner
$('.collection tr').each(function () {
//processing this row
$(this).find('td input:checked').each(function () {
// there is checkbox and it is checked, do your business with it
var value_of_checkbox = $(this).val(); // which is 'data' that you wanted
});
});
I have a dynamic form that is generated based on javascript. Here's the relevant javascript:
function addRowToTable()
{
var tbl = document.getElementById('convention');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// right cell
var cellRight = row.insertCell(0);
var el = document.createElement('textarea');
el.rows = '2';
el.cols = '80';
el.name = 'conventionSkill' + iteration;
el.size = 40;
var el2 = document.createElement('input');
el2.type = 'hidden';
el2.name = 'conventioni_alt';
el2.value = iteration;
el2.size = 40;
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
cellRight.appendChild(el2);
}
function removeRowFromTable()
{
var tbl = document.getElementById('convention');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
HTML:
<table id="convention">
<tr>
<td><label>Skill Descriptions:</label></td>
</tr>
<tr>
<td>
<textarea name='convention_54' rows='2' cols='80'>
text
</textarea></td>
<td><a href='javascript:void(0)' onclick='removeRowFromTable(54);'><font size=
'+1'>-</font></a></td>
</tr>
<tr>
<td>
<textarea name='convention_55' rows='2' cols='80'>
text2
</textarea></td>
<td><a href='javascript:void(0)' onclick='removeRowFromTable(55);'><font size=
'+1'>-</font></a></td>
<td><a href='javascript:void(0)' onclick='addRowToTable();'><font size=
'+1'>+</font></a></td>
</tr>
</table>
I like the add function as it simply adds a new textarea. However, the remove button removes from the bottom of the form up. How can I make it so that removeRowFromTable removes a specific textarea? For example, if I want to delete one of the textareas in the middle, rather than the last one in the form.
Thanks for any suggestions!
In short, you'll have to find the exact textarea you want to remove (probably by ID).
However, before you go too far down this road hand-rolling ID enumeration and DOM manipulation code, you might want to look at jQuery (http://jquery.com/). jQuery handles oodles of this stuff quite easily via its selector mechanism and will save you from many of the cross-browser headaches you may have if you try to do all this DOM manipulation yourself.
You'll find a lot of questions about jQuery on SO; for example look at how easy this related- and-simple table manipulation is:
What is the best way to remove a table row with jQuery?
IMHO learning jQuery was a tremendous Javascript productivity boosts for me and my team -- it's well worth the time spent in my experience.