I have created table dynamically using javascript, want to add a "href" link with the image to the table cell when table created dynamically and increase the width and height of the table cell.Please see "http://jsfiddle.net/c3X8Y/1/". In "Action" columnn of the table i want to display the href links and want to increase the width and height of the table cells.Below is the code.
HTML code:
<input type="file" name="fileUpload" size="50" id="fileUploadID" multiple/></td>
</tr><br>
</table>
</td></tr> <tr><td>
<br/> <table border="1" id="uploadTable" style="visibility:hidden">
<tr> <th>SNo</th><th>FileName</th><th>Action</th> </tr>
</table>
Javascript code:
<script>
var rowN = 1;var count = 1;var a=1;
document.getElementById("fileUploadID").onchange = function() {
document.getElementById("uploadTable").style.visibility="visible";
var fileNameIndex = document.getElementById('fileUploadID').value.lastIndexOf("\\");
var file_name = document.getElementById('fileUploadID').value.substring(fileNameIndex + 1);
// Get a reference to the table
var tableRef = document.getElementById('uploadTable');
// Insert a row in the table at row index 1
var newRow = tableRef.insertRow(rowN);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
// Append a text node to the cell
var newText = document.createTextNode(rowN);
newCell.appendChild(newText);
// Insert a cell in the row at index 1
var newCell2 = newRow.insertCell(1);
// Append a text node to the cell
var newText2 = document.createTextNode(file_name);
newCell2.appendChild(newText2);
// Insert a cell in the row at index 2
var newCell2 = newRow.insertCell(2);
// Append a text node to the cell
var newText2 = document.createTextNode('delete');
newCell2.appendChild(newText2);
rowN++;
}
</script>
Instead of creating an html element, you're creating a textNode in the following code:
// Append a text node to the cell
var newText2 = document.createTextNode('delete' +'show');
newCell2.appendChild(newText2);
instead, you actually have to create html elements using createElement() function as follows:
// Append a text node to the cell
var newText2 = document.createElement('a'); //create actual HTML element
newText2.innerHTML='show'; // set the elements properties
newText2.href="#";
newCell2.appendChild(newText2);
JSFiddle
this is just for demo purpose, you can actually create the remaining anchor and set all of their properties as shown above...
Update
As for changing the size, simply specify it in css as follows:
td{
width:250px;
height:250px;
}
JSFiddle
Update
You can set the height and width of dynamically created elements as follows:
newCell.style.width ='250px';
newCell.style.height ='250px';
For displaying an image, instead of creating an <a> simply create <img> and set it's source and do your logic on it's click event.
JSFiddle
Related
I am looping through a grids datasource and when it gets to ToFactory not being empty I need to add a div into its td cell. Below is the code that I am using to get the td at index 18 of its row
var data = this.dataSource.view();
for(i=0;i<data.length;i++){
var dataItem = data[i];
var tr = $("#QuickEntryGrid").find("[data-uid='" + dataItem.uid + "']");
if(dataItem.ToFactory != ""){
let me = tr.find('td')[18];
me.innerHtml = "<div class='abc'>1234</div>"; // Doesn't work
console.log(me);
}
}
the variable me is
<td class role='gridcell'></td>
and what I would like to put in the td is
<div class='abc'>123</div>
and me should look like this
<td class role='gridcell'><div class='abc'>123</div></td>
but its not happening,
any idea's on why I am not getting this working? I have also tried
me.append("<div class='abc'>123</div>");
How would I reduce the value of:
<input type="text" id="totalNumber" value="0" name="number" size="5" maxlength="2" disabled>
based on a number located in a specific cell on a table. The cells are generate via Javascript.
HTML:
<div id="tableAdjust">
<table id="myTable" style="width:100%; border: solid black 1px;">
<tr>
<th>products</th>
<th>Desciption</th>
<th>Extras</th>
<th>Quantity</th>
<th>Cost</th>
</tr>
<tr></tr>
</table>
</div>
JS:
var table = document.getElementById("myTable");//RETRIEVES TABLE
var row = table.insertRow(1); //INDICATES ROW INSERTION
var cell1 = row.insertCell(0); //ASSIGNS CELL
var cell2 = row.insertCell(1); //ASSIGNS CELL
var cell3 = row.insertCell(2); //ASSIGNS CELL
var cell4 = row.insertCell(3); //ASSIGNS CELL
var cell5 = row.insertCell(4); //ASSIGNS CELL
cell1.innerHTML = cartProducts.name;//ASSIGNS CART PRODUCT NAME
cell2.innerHTML = cartProducts.descript;//ASSIGNS CART PRODUCT DESCRIPTION
cell3.innerHTML = cartProductExtras;//ASSIGNS CART PRODUCT DESCRIPTION
cell4.innerHTML = cartProductQuant;//ASSIGNS CART PRODUCT QUANTITY
cell5.innerHTML = "$ " + cartProductPrice;//ASSIGNS CART ITEM PRICE`
HTML INPUTBOX:
<input type="text" id="userNumber" name="number" size="2" maxlength="2" value="1" >
every time a button is click it adds to the value of the inputbox above and displays the users input in cell 4. I need cell 4's "value" in order to remove it from the table list and reduce the total based on the "value" in that cell.
IMPORTANT: no JQUERY please.
EDIT
Getting the row from a cell and removing it from its table is also quite simple:
var inputA = document.getElementById("totalNumber");
// Retrieve the value in cell4 and cast it to a number.
var cell4value = parseInt(cell4.innerHTML, 10);
// Delete the row that contains cell4.
var row = cell4.parentNode;
row.parentNode.removeChild(row);
// Subtract the value that was in cell4 from inputA value.
// Also cast inputA value to a number just in case.
inputA.value = parseInt(inputA.value, 10) - cell4value;
Initial message:
As I understand, you have 2 HTML inputs: A for total (actually remaining available items?) and B for how many to add to the user's cart when the latter clicks on a button.
You already have a system that automatically adds the value of B to cell4 when the user clicks on the button. Now you want to subtract the same value from value of A? Or the way you describe it, you want to read the result appearing in cell4, and subtract it to the value of A? Note that in the latter case, you will subtract more than needed if the user clicks several times on the button.
I guess you cannot modify the code that already does the addition into B, otherwise it would be trivial to add a line of code to subtract the same amount from A: document.getElementById("totalNumber").value -= addedAmount;
To do it the way you describe, let's first read the new content of cell4: var newCell4qty = parseInt(cell4.innerHTML, 10);
Then subtract it from A like the initial proposition: document.getElementById("totalNumber").value -= newCell4qty;
But it sounds to be more logical to rather read the value of B to use for the subtraction: var addedAmount2 = parseInt(document.getElementById("userNumber").value, 10);
Finally, you could need to implement a check if there are enough remaining items before increasing B on button click.
<tbody id="contacttable">
</tbody>
<script>
var hrtypeCode = document.getElementById('hrtypeCode').value;
var hrCode = document.getElementById('hrCode').value;
var hrName = document.getElementById('hrName').value;
var hrDesc = document.getElementById('hrDesc').value;
for(i=0;i<hrCode.length; i++){
if(hrCode[i]!="") {
var table = document.getElementById("contacttable");
var slNo = table.rows.length;
var tr = table.insertRow(slNo-1);
tr.id = 'list_tr_' + slNo;
tr.innerHTML ='<td><input type="text" name="hrtypeCode" value="'+hrtypeCode[i]+'" ></td><td><input type="text" name="hrCode" value="'+hrCode[i]+ '"></td><td><input type="text" name="hrName" value="'+hrName[i]+'" ></td>';
count++;
}
}
</script>
<i>
how to find out the cell values.i have tried the following code but it showing entire TD row
tbl.rows[i].cells[j].innerHTML);
alert(tbl.rows[i].cells[j].innerHTML);
Kindly help in finding the value.. thanks.
Table cells don't have values, only input elements do. You need to access the <input> element within the table cell.
Use:
tbl.rows[i].cells[j].getElementsByTagName("input")[0].value
DEMO
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)