I am adding elements to a dynamic table. The issue i am facing is that i need the generated rows as clickable by which i can navigate to a new web page.
Here is my code:
//adding rows dynamically after fetching data from table
function addRow() {
var myName = document.getElementById("name");
var age = document.getElementById("age");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
// row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
//this is where I fetch the value for the dynamic rows
row.insertCell(0).innerHTML=myName.value;
row.insertCell(1).innerHTML= age.value;
}
I am using:
$('#table-name').on('click', 'tr', function() {alert('hello');});
but its not working for me
The problem is the following
$('#table-name').on('click', 'tr', function() {alert('hello');});
The id is not correct, try
$('#myTableData').on('click', 'tr', function() {alert('hello');});
See working fiddle
Related
Bootstrap tagsinput is not working with new dynamically added rows. Actually I am cloning a hidden table row which contains some input fields and a icon. On click of that icon, modal form appears and on submit of that modal form, I set some values from that modal form into input bootstrap tagsinput field that is contained in that row. Please note that all rows have same input fields but that have different tr row ids and input tagsinput field ids. When I try to set value in bootstrap tagsinput field for any dynamically added row, value is always set against hidden tr row, I don't know why this is happening with tagsinput. I tried to set value for other input fields (textfield, numberfield) but they are working fine. What's the issue with this?
$('.table-add').click(function () {
// var $tr = $TABLE.find('tr.hide');
// var $clone = $tr.clone(true).addClass('hide table-line');
// $tr.removeClass('hide table-line');
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
hid = $TABLE.find('tr.hide').attr('id');
// //Assigning every table row a unique ID
var max=0;
$('table').find('tr').each(function(){
var id=parseInt($(this).attr('id'));
if (id>=max){
max = id;
}
});
//cloning row with new ID
$clone.attr('id', parseInt(max)+1);
$clone.find('input.myinput').attr('id', parseInt(max)+1);
$clone.appendTo( $('#'+hid).parent() );
});
Every table row has these ( tagsinput field and modalform field).
<td>
<span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span>
</td>
<td>
<input contenteditable="false" name="unique_tag"
class = "myinput" id="tagsinputid" data-role="tagsinput"/>
</td>
When modal form button is clicked, Following code works, in which I get parent tr row and get row Id that is unique and save it for another action and populate modal form with some words.
//Click on model box
$('tr #modelbox').click(function() {
var $row = $(this).closest('tr');
var tbid = $row.attr('id'); // table row ID
$('#myModal').data('current', tbid); //save current tbid
var fieldOption = []
$row.find('#words option').each(function() { fieldOption.push($(this).val()); });
console.log(fieldOption);
$('.modal-body-inner').html('');
for(var i = 0, size = fieldOption.length; i < size ; i++){
var item = fieldOption[i];
$('.modal-body-inner').append("<span class=span1 > "+ item + "</span>");
}
});
On click of modal form, I do take table row and set value against tagsinput field for that table row which is not working in my case. This is not working for tagsinput field I don't know why but it is working for other input fields. When I set value in tagsinput for that row, this code set value for tagsinput field for hidden row.
$('#modelformbuttonclick').click(function() {
var tableRowId = $('#myModal').data('current');
c = '#' + tableRowId;
//removing all tags if anyone updates tags
$(c+ ' input.myinput').tagsinput('removeAll');
var count=1; var color = ["Europe","America","Australia","Africa","Asia", "Asia2", "Africa2"];
$('.modal-body-inner span.myclass').each(function() {
c = '#' + tableRowId;
var randomNumber = Math.floor(Math.random()*color.length);
$(c + ' input.myinput').tagsinput('add', { "name": "tagsdata", "value": $(this).text() , "text": $(this).text(), "continent": color[randomNumber]});
count = count+1;
});
submitForm();
});
I have created a table using javascript , now i want to edit each row when i tap on edit button in the end of the row
Here is my code to create a dynamic table
function addRow() {
var firstname = document.getElementById("firstname");
var lastname = document.getElementById("lastname");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = firstname.value;
row.insertCell(1).innerHTML = lastname.value;
row.insertCell(2).innerHTML = '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">' + '<input type="button" value = "Edit" onClick="Javacsript:editRow(this)">';
Once user clicks on edit button table cells should become editable once each cell is edited it should change the value.
You are better off using jQuery. This will require several steps:
Make row editable on buttonclick with:
$("yourcell").contentEditable = true;
Create a hook on change:
$("yourcell").change(function(){
//do a server update
});
Post new data on server with jQuery post:
$.post( "insertyourdata.php", function( data ) {
//let user know the save has been done
});
If you want to edit whole row, you can create a class for each row like row142 and then select the cells by this class.
In HTML table, there is a text field on which I have binded Jquery datepicker control:
$("#CreatedOnValue").datepicker();
It works fine. The table is dynamic and user can add as many rows as he wants by clicking on add button adjacent to each row. I am trying to bind datepicker control to dynamic rows as well and it is not working. Here is function which is executed when user clicks on row add button:
function addGroupRow(e) {
var rowId = e.parentNode.parentNode.id;
var newindex = getConditionPlacementIndex(rowId);
var row = document.getElementById("advancedSearch").insertRow(newindex);
...
// create table cell of datetime textbox
var cell3 = row.insertCell(3);
cell3.id = row.id+"_cell3";
var strHtml3 = "<INPUT class=\"textbox\" TYPE=\"text\">";
cell3.innerHTML = strHtml3.replace(/!count!/g, count);
$("#" + cell3.id).datepicker();
}
Its not working and datepicker does not appear on dynamic text field. Any suggestion?
Thanks.
Use class instead of id(Give dynamically generated textboxes a class say 'textbox') and do as :
$('body').on('focus',".textbox", function(){
$(this).datepicker();
});
Working Demo
I have resolved this issue by following code modification:
var cell3 = row.insertCell(3);
var cell3Id = row.id+"_cell3";
var strHtml3 = "<INPUT class=\"textbox\" TYPE=\"text\" id=" + cell3Id + ">";
cell3.innerHTML = strHtml3.replace(/!count!/g, count);
$("#" + cell3Id).datepicker();
I've a form in which containing one <div> tag and the HTML within it. This is what I've when page loads. Then through AJAX I'm appending the same block(i.e. ) to the existing one. In every <div> tag there is one <table> and in that <table> I've a button with class products. After clicking on it I'm calculating the no. of rows present in that table only and assigning the id to the newly added row. But the issue I'm facing is when I add multiple such tables using AJAX and click on add button of any table it's calculating the total no. of rows present in all tables and adding that much no. of rows to the table in which I clicked add button. This shouldn't have to happen. It has to add only one row. I've created a jsfiddle for your reference. In fiddle I've put in static HTMl so it's working fine over there but on my local machine when I add multiple tables using AJAX I'm getting wrong no. of rows added.For example if I added three tables and click on add button of first table then it's adding four rows to that table. Why it's counting the total no. of rows present in all the tables present on a page?Is there any need to improve my script? My script is as follows:
$(document).ready(function() {
$('.products').click(function () {
var table_id = $(this).closest('table').attr('id');
var no = table_id.match(/\d+/)[0];
//var first_row = $(this).closest('table').find('tbody tr:first').attr('id');
var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
var new_row = $('#'+first_row).clone();
var tbody = $('tbody', '#'+table_id);
var n = $('tr', tbody).length + 1;
new_row.attr('id', 'reb' + no +'_'+ n);
$(':input', new_row).not('.prod_list').remove();
$('select', new_row).attr('name','product_id_'+no+'['+n+']');
$('select', new_row).attr('id','product_id_'+no+'_'+n);
$('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">×</button>').appendTo( $(new_row.find('td:first')) );
tbody.append(new_row);
$('.delete').on('click', deleteRow);
});
});
Following is jsFiddle link: http://jsfiddle.net/vrNAL/2/
I think what you mean to query is this:
var tbody = $('#' + table_id + ' tbody');
Instead of:
var tbody = $('tbody', '#' + table_id);
From the jQuery documentation, I don't think selectors work this way.
You are doing some strange things with the IDs here. why are you getting the IDs and selecting the sleemts with that, instead of using the selected elements directly?
Example:
var table_id = $(this).closest('table').attr('id');
var table = $("#" + table_id);
Is the same as just
var table = $(this).closest('table');
and
var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
var new_row = $('#'+first_row).clone();
is the same as:
var new_row = table.find('tbody tr:first').clone();
I have a table dynamically created with java script.It has one checkbox in each row as the first column.I want to fetch the row data based on the checkboxes selected of respective rows.
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = 'Select';
cell1.innerHTML = 'Epic';
cell0.innerHTML = " checkbox html code ";
cell1.innerHTML = epicSeries[j];
Actually too many columns are there I am putting just two of them. I have lot of epics down the column header 'epic' and one checkbox as the first column in each row.I want row data based on checkbox selcted.
Sorry code was too long so I cant paste all of them.
Having now an example of your code and bit more clear requirement, i think you should do the folowing:
$('#myTable input[type=checkbox]:checked').each(function() {
var row = $(this).parent().parent();
var rowcells = row.find('td');
// rowcells contains all td's in the row
// you can do
// rowcells.each(function() {var tdhtml = $(this).html(); });
// to cycle all of them
});
If you have table like that:
<table>
<tr>
....
<td><input type="checkbox" name="cb1" checked></td>
...
</tr>
</table>
This code will return all <tr>'s with checked checkboxes
If row selecting check box is in a deeper level you should as more .parent()'s as needed
This exemple uses jQuery of course.
$('table#tableid input[type=checkbox]').each(function() {
if ($(this).is(':checked')) {
....
}
});
something like that i supose
This is what I used in my case using jquery:
$('.chkbox').click(function(){
var row = jQuery(this).closest('tr');//your nearest row for the check box
$(row).each(function(){
//get all data using the id and use/store it
$(this).find(".item").html();
});
});
For each checkbox and for each item in a row give a class(I used chkbox for all checkboxes and item, price etc. for all items of a single row)