Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")
There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.
Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.
Related
I have an HTML table that is filled dynamically and only shows a certain button in the first column if specific conditions are met, otherwise this button does not appear.
The button looks as follows (it always has the name = voidBtn):
<input type="button" name="voidBtn" value="Void" />
How can I check whether the current row contains this button or not ?
I was thinking of something like the following but didn't know how to write this the right way:
if($(this).closest('tr').find('input[name=void]') ...
OR
if($(this).closest('tr').find("td:eq(1):contains('voidBtn')") ...
I just need to know if the current row has such a button as then I want to click on it and do some other stuff.
Your way of checking should be fine, you just need to ask if it found it with length:
if($(this).closest('tr').find('input[name=void]').length > 0){
// there is a button
}
Considering $(this) as current row then you can find button like this...
$(this).find('input[name=voidBtn]')
$( '#'+tableId + "> tbody > tr> td").find('td','searched-string')
Here is the Example where we can find an element inside a row containing searched-string.Here yoy may use other option as my string was coming for input text field.
Let say you want to find all the rows of the table that contains a particular String "STRING" then you may write like this
**$('#tableid > tbody').find('tr','STRING')**
You may also count the number of row by
**$('#tableid > tbody').find('tr','STRING').length**
In Above answer i already declared tableid as Var in my Jquery Code.
I've got a little function which allows to search values through rows, but there is a problem with it - search function is not working properly.
Please take a look at the fiddle here http://jsfiddle.net/4f3WF/
Try to set text in input to "798" for example.
In the end this function must be able to search through entire row, not just only first or last ms-column div. I just don't get what's wrong.
Just try with:
e.find('.multiple-selector-table .ms-search-label .ms-search').on("keyup", function() {
var value = $(this).val();
e.find('.multiple-selector-table-row').hide();
e.find('.ms-column:contains("' + value + '")').parents('.multiple-selector-table-row').show();
});
Updated fiddle
In the first step, we hide all rows. Next we search for cells that contain value passed in input and show their parent rows.
hi i am using JQGrid and want to set value of a cell to zero when i edit the row and whatever the value of the cell is like if cell value is 103.50 i want to to set to 0
i try
editoptions:{dataInit : function (elem){$(elem).val("0");}}
and it works for only new but i want to reset value of cell to "0" even when i use form edit.
i also try
editoptions:{defaultValue:"0"}
and
editoptions:{value:"0"}
but all is working when use form edit for new row and when try to edit it show first time the default "0" value but when i cancel and again edit form then cell value is set in the text input field
i know its not logical but want to do for customer requirement and also search a lot for it
but unable to find any related proper answer
I think you need to set the value of the cell, when selecting the row, if it an inline edit.
onSelectRow: function (id) {
if (id) {
selectedRowId = id; // save current row ID
var myCellData = grid.jqGrid('getCell', selectedRowId , 'MyColName');
}
},
where id the row id, then you can find the cell value
Hope this helps you. Enjoy jqGrid.
beforeShowForm: function($form) {
setTimeout(function() {
$form.find('input#credit.FormElement').val(0);
},50);
}
works for me as when load the form i reset the value of Credit;
I have this code here but it doesn't work... I have a text input where user can key in any number. When user click on ADD, it will add a new row to the table. when click on REMOVE, that row will be remove.
I want to keep track of the index and it is working. However I need to keep track of the number the user input as well, then I can remove that row with that number. However, I can't get the textInput to be displayed on the table... not sure what's the right way to display that. Please help.
var index=1;
textInput = $('#outputTextInput').val();
$('#outputAdd').click(function(){
index++;
$('#status_table tr:last').after('<tr id="output_newrow_'+textInput+'"><td>'+index+'</td><td id="type_row_'+index+'">type_row_'+textInput+'</td><td id="num_row_'+index+'">num row '+index+'</td><td><img class="image" src="static/OffLamp-icon.png" style="height:64px; width=64px"/></td></tr>');
});
$('#outputRemove').click(function(){
$('#status_table').find("#output_newrow_'+textInput+'").remove();
});
Replace this:
$('#status_table').find("#output_newrow_'+textInput+'").remove();
With this:
$('#status_table').find("#output_newrow_" + textInput).remove();
and try again!
I have a working jQuery autocomplete being performed on the text input of a table data element, txtRow1. The text data is remote, from a mysql database, and is returned by JSON as 'value' for the text input. The returned data includes another piece of text, which, via a select event within the autocomplete, is populated to the adjacent table data element tickerRow1.
With help from the SO community, the autocomplete is now live and working on all text input elements of a dynamically created table (so txtRow1 to txtRowN). There is javascript code to create and name the table elements txtRoxN + 1 and tickerRowN + 1.
However, I have a problem with the select event for the id of tickerRowN. Because it changes every time I add a row, I don't know how to call the select event for the specific id of the table data in question.
I have done a lot of searching around but as I am new to this, the only functions I have been able to find manipulate the element data when you know the id already. This id is dynamically created and so I don't know how to build the syntax.
Thankyou for your time.
UPDATE: with huge thanks to JK, the following example works. I now know about jsFiddle and will try to use this for all further questions. The following code works for my dynamic example, but I don't know why. Sigh.
jsFiddle working example
function getRowId(acInput){
//set prefix, get row number
var rowPrefix = 'txtRow';
var rowNum = acInput.attr("id").substring((rowPrefix.length));
return rowNum;
}
$("#txtRow1").autocomplete({
source: states,
minLength: 2,
select: function(event, ui) {
var tickerRow = "#tickerRow" + getRowId($(this));
//set ticker input
$(tickerRow).val(ui.item.label);
}
});
http://jsfiddle.net/jensbits/BjqNz/