jQuery: change a table row into a form - javascript

What is the best method in jQuery to change a particular table row into a form ?
For example to change :
<table>
<tr><td>edit</td><td>first row</td></tr>
<tr><td>edit</td><td>some row</td></tr>
<tr><td>edit</td><td>last row</td></tr>
</table>
into :
<table>
<tr><td>edit</td><td>first row</td></tr>
<tr>
<form>
<td>edit</td>
<td><input type='text' name='a' value='b'/></td>
</form>
</tr>
<tr><td>edit</td><td>last row</td></tr>
</table>
Update : the html we finally use :
<form>
<table>
<tr>
<td><img class="editRow"></td>
<td class="field">field to know</td>
</tr>
</table>
</form>
and the jQuery code :
$( ".editRow" ).click( function() {
var rowToEdit = $(this).parent().parent();
var field = rowToEdit.children(".field")
rowToEdit = .replaceWith( "<td></td>\
<td>\
<input type='hidden' value='"+field+"'>\
</td>"
});

Try out the function .wrap(). For more infomation see here.

There is a jquery function that does exactly what you are revering to, basically it allows you to create a table and then each cell is editable so you don't have to use just google it a bit. You will find it

Related

click event in js datatables (broken with paging)

I want to have a button with js click in each datatable row, but my code is broken by datatables paging system - default datatable option. Click works only on first datatable page. My only idea is to disable paging and create scrolable datatable, but I would prefer to keep paging for better UX.
Example datatable:
<table id="data_tables">
<thead>
<tr>
<td>Action</td>
<td>Name</td>
<td>Surname</td>
<tr>
</thead>
<tbody>
<!-- Datarow 1 -->
<tr>
<td><input type='button' class='my_button' data-id='1' value='click' /></td>
<td>John</td>
<td>Wayne</td>
</tr>
<!-- Datarow 2 -->
<tr>
<td><input type='button' class='my_button' data-id='2' value='click' /></td>
<td>Clark</td>
<td>Kent</td>
</tr>
</tbody>
</table>
Click event handler
//simple on() in jquery would do the trick in normal <table>
$( ".my_button" ).on( "click", function() {
var id = $(this).attr("data-id");
alert(id);
});
Is there a way to workaround this problem? Or maybe datatable api solution?
You can do something like this:
$("#data_tables").on("click", ".my_button", function() {
var id = $(this).data("id");
alert(id);
});

How to add input field using jQuery and call Ajax into new input field

I am using a table with input fields. I use jQuery for adding new row/ input field, and then I want to call Ajax into new row/input field. But its not working. Because it's not filling up the condition of document.ready() function..
here is my html form:
<table>
<thead>
<tr>
<th>Account Name:</th>
<th>Branch:</th>
</tr>
</thead>
<tr>
<td>
<div>
<input type="text" name="ac_name" class="auto-search-ac">
</div>
</td>
<td>
<div>
<input type="text" name="branch">
</div>
</td>
</table>
Script for add new row in the table ( It is working perfectly) :
<script>
$(document).on("focus",'#table tr:last-child td:last-child',function() {
//append the new row here.
var table = $("#table");
table.append('<tr>\
<td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\
</td>\
<td><div><input type="text" name="branch"></div>\
</td>\
</tr>');
});
</script>
Ajax call into new inserted input field:: (in first row - ajax is working nicely)
<script type="text/javascript">
$(".auto-search-ac").autocomplete({
source: "/ca-list",
minLength: 1,
select: function( event, ui ) {
$('.auto-search-ac').val(ui.item.value);
$('#ca-id-val').val(ui.item.ca_id);
}
});
</script>
Note That :: I am using all scripts and html in Modal. In First row, everything is OK.
after adding new row by jQuery then I can not call ajax. May it could be the issue of document.ready().
Question : how may I call any script/ajax/jQuery after adding a new input field/row using jquery in html ? Thanks in Advanced.
Use class selector as you do not have element having is as auto-search-ac. After appending element, find element having class as auto-search-ac from the appended tr and initialize autocomplete
Try this:
$(".auto-search-ac").autocomplete({
source: "/ca-list",
minLength: 1,
select: function(event, ui) {
alert(ui.item.value);
alert(ui.item.ca_id);
}
});
$(document).on("focus", '#table tr:last-child td:last-child', function() {
var table = $("#table");
var element = '<tr>\
<td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\
</td>\
<td><div><input type="text" name="branch"></div>\
</td>\
</tr>';
table.append(element);
$("#table tr:last-child").find(".auto-search-ac").autocomplete({
source: "/ca-list",
minLength: 1,
select: function(event, ui) {
alert(ui.item.value);
alert(ui.item.ca_id);
}
});
});
<table id='table'>
<thead>
<tr>
<th>Account Name:</th>
<th>Branch:</th>
</tr>
</thead>
<tr>
<td>
<div>
<input type="text" name="ac_name" class="auto-search-ac">
</div>
</td>
<td>
<div>
<input type="text" name="branch">
</div>
</td>
</table>
Fiddle demo

How to set value in dynamically added rows form using jquery?

I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.
This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":
while($personsArrayLength>2){
echo '
<script>
$(document).ready(function(){
var i = 2;
var rowTemplate2 = jQuery.format($("#template2").html());
rowTemplate2.value = "xx";
addRow2();
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
});
</script>
';
Here is html for that:
function addRows2(){
global $personsError_css;
$personsArray = $_POST['persons'];
JB_var_dump($_POST['whichRow']);
$html = '<table id="template2" align="right" style="display:none; ">
<tr id="row_{0}">
<td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
<td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
</tr>
</table>
<table id="list2" style="margin-left:200px;">
<thead >
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="app_here2"></td>
</tr>
</tbody>
</table>';
return $html;
}
This is properly filled form
In this epty fields I want to add values "xx"
Sorry for my english.
How can i set values in added rows? What i should change in my code?
Thanks for help.
Change your 'addRow2' to this:
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
//UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
$("#template2").find("input:empty").val("xx");; // added this row
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}

How to get the count of checked rows of a table on a button click using jQuery?

I'm working with Asp .net MVC3 following is my table,
<table id="myIndiaTable">
<thead>
<tr>
<th>Select All<input type="checkbox" class="chkhead" onchange="Getchecked()"/></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>1</td>
<td>xxx</td>
</tr>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>2</td>
<td>yyytd>
</tr>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>3</td>
<td>zzz</td>
</tr>
</tbody>
</table>
<div class="btn">
<input type="button" name = "Submit" value ="Submit" onclick ="GetValues()"/>
</div>
When I click the submit button I have to get the count of selected rows count as an alert. How can I get this using jQuery?
USe :checked for getting the checked checkboxes,
$( ".chkdata:checked" ).length;
pure javascript
thi line ckbox = document.getElementsByClassName("chkdata"); will get all the element with class name chkdata return an array of element and then we loop through those element to check how many element are checked .if it is checked then we increment the counter otherwise continue to loop
ckbox = document.getElementsByClassName("chkdata");
count=0;
for(var i=0;i<ckbox.length;i++){
element = ckbox[i];
if(element.checked){
count++;
}
}
alert("Number : " + count);
You can get all the checked checkboxes with class chkdata inside the table myIndiaTable
function GetValues(){
alert($('#myIndiaTable .chkdata:checked').length)
}
to get only the checked checkboxs in the table use
$('#myIndiaTable').find("input[type='checkbox']:checked").length

Change the value of a text box to its current order in a sortable tab

Edit: I have solved this by myself. See my answer below
I have set up a nice sortable table with jQuery and it is quite nice. But now i want to extend it.
Each table row has a text box, and i want i am after is to, every time a row is dropped, the text boxes update to reflect the order of the text boxes. E.g. The text box up the top always has the value of '1', the second is always '2' and so on.
I am using jQuery and the Table Drag and Drop JQuery plugin
Code
Javascript:
<script type = "text/javascript" >
$(document).ready(function () {
$("#table-2").tableDnD({
onDrop: function (table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Order: ";
for (var i = 0; i < rows.length; i++) {
debugStr += rows[i].id + ", ";
}
console.log(debugStr)
document.forms['productform'].sort1.value = debugStr;
document.forms['productform'].sort2.value = debugStr;
document.forms['productform'].sort3.value = debugStr;
document.forms['productform'].sort4.value = debugStr;
},
});
});
</script>
HTML Table:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr>
<td>Product</td>
<td>Order</td>
</tr>
</thead>
<tbody>
<tr class="row1" id="Pol">
<td>Pol</td>
<td><input type="textbox" name="sort1"/></td>
</tr>
<tr class="row2" id="Evo">
<td>Evo</td>
<td><input type="textbox" name="sort2"/></td>
</tr>
<tr class="row3" id="Kal">
<td>Kal</td>
<td><input type="textbox" name="sort3"/></td>
</tr>
<tr class="row4" id="Lok">
<td>Lok</td>
<td><input type="textbox" name="sort4"/></td>
</tr>
</tbody>
</table>
</form>
Hardnrg in #jquery ended up solving it for me.
It involved adding an id="" to each input:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr><td>Product</td> <td>Order</td></tr>
</thead>
<tbody>
<tr class="row1" id="Pol"> <td>Pol</td> <td><input id="Pol_field" type="textbox" name="sort1"/></td> </tr>
<tr class="row2" id="Evo"> <td>Evo</td> <td><input id="Evo_field" type="textbox" name="sort2"/></td> </tr>
<tr class="row3" id="Kal"> <td>Kal</td> <td><input id="Kal_field" type="textbox" name="sort3"/></td> </tr>
<tr class="row4" id="Lok"> <td>Lok</td> <td><input id="Lok_field" type="textbox" name="sort4"/></td> </tr>
</tbody>
</table>
</form>
And add this js to the OnDrop event:
for (var i=0; i < rows.length; i++) {
$('#' + rows[i].id + "_field").val(i+1);
}
Easy peasy!
Hmmm..
I think you want to do something like this:
$("input:text", "#table-2").each( function(i){ this.value=i+1; });
The $().each() function's info is here: http://docs.jquery.com/Core/each

Categories