I am trying to implement insert two text box with same row in datatable same row of searching box I am trying by following way
custom.js
$(window).load(function (){
var table = document.getElementById("example");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
});
but i cant to do that...plz help
Couldn't you just do $("#example").append("<tr><td>" + "NEW CELL1" + "</td></tr>");
Related
I am trying to create drop-down box dynamically, here I can create dynamically drop-down boxes but after that, I need to load the values from DB, so I need to do on-click function. Here I try the using dynamic id but it is not working how to solve this.
$( document ).ready(function() {
$("#ssr").click(function(){
alert("Test");
load_shift_code();
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
for(var i=0;i<4;i++){
var a=["html","css","java","javascript","php","c++","node.js","ASP","JSP","SQL"];
var employee_name =emp_name();
var table_body = document.getElementById("table_head");
var row = table_body.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2)
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5)
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
var cell11 = row.insertCell(10);
var cell12 = row.insertCell(11);
var drop_down_list =document.getElementById("select");
var idx="ssr";
cell1.innerHTML = employee_name[i];
cell2.innerHTML = employee_name[i];
cell3.innerHTML = "<select id='" + idx +"'><option value='default'>default</option></select>";
cell4.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell5.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell6.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell7.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell8.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell9.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell10.innerHTML ="<select id='select'><option value='default'>default</option></select>";
cell11.innerHTML ="<select id='select'><option value='default'>default</option></select>";
}
});
Put the code to add the event listener to the element with id ssr after the code that creates the element and puts it in the DOM. As posted $("#ssr") won't find anything.
Here is part of a function that adds rows. It works like a charm, except I'd also like it to add an integer (+1) to the ID names of each newly created set of elements.
For example, the code below generates a row, a cell, and a button. If three rows are created, then I'd like the button ID's to be foo1, foo2, foo3 for each row, respectively.
How would I go about accomplishing this?
function addrow() {
var i = 1;
var table = document.getElementById("mytable");
var row = table.insertRow(1);
var cell1 = row.insertCell(1);
cell1.innerHTML = "<input type='button' id='foo+i' value='Hello'>";
i++;}
Thank you in advance!
Change:
cell1.innerHTML = "<input type='button' id='foo+i' value='Hello'>";
to:
cell1.innerHTML = "<input type='button' id='foo" + i + "' value='Hello'>";
Change
cell1.innerHTML = "<input type='button' id='foo+i' value='Hello'>";
to
cell1.innerHTML = "<input type='button' id='foo"+ i +"' value='Hello'>";
And initialize i value as global variable.
Use
var i = 1;
function addrow() {
var table = document.getElementById("mytable");
var row = table.insertRow(1);
var cell1 = row.insertCell(1);
cell1.innerHTML = "<input type='button' id='foo"+i +"' value='Hello'>";
i++;
}
You need to concat the string with your incremented variable, not place it inside the string.
"<input type='button' id=foo" + i +" value='Hello'>"
But there is more you need to do...
You need to make your i variable be global so it isn't reset every time you call this function like so
var i = 1;
function addrow() {
var table = document.getElementById("mytable"),
row = table.insertRow(i),
cell1 = row.insertCell(i);
cell1.innerHTML = '<input type="button" id=foo' + i + ' value="Hello">';
i++;
}
I also changed the quotes around since a single quote isn't considered valid syntax for HTML
I have some code that is printing out a customers order on an order confirmation screen. It is doing this using Javascript to populate a table with the information. Ideally I would like to do this in JQuery
This is my HTML
<!-- Order Confirmation Form -->
<form action="<?the_permalink()?>" method="post">
<div id="summary">
<table id="ordertable">
<tr><th>Product</th>
<th>Quantity</th>
<th>Bulk</th>
<th>Options</th>
</tr>
</table>
<!-- Comments Box -->
Comments<br/>
<textarea name="comments"></textarea><br/>
<input name="product_list" id="products_field" type="hidden" value="<?= isset($_POST['product_list'])?$_POST['product_list']:'' ?>">
Next Day Delivery <input type="checkbox" name="next-day-delivery" value="yes" />
<input type="submit" value="Confirm Order" class="confirmBtn"/>
</div>
</form>
This is my JS
//Reference to the order table
var ordertable = document.getElementById("ordertable");
//Loop through the Array and display in the table
for(var i = 0; i < productArray.length; i ++){
//This is the data to display
console.log("Order Item " + i);
console.log("StockCode: " + productArray[i].stockCode);
console.log("Quantity: " + productArray[i].quantity);
console.log("Bulk: " + productArray[i].bulk);
var row = ordertable.insertRow(i + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = productArray[i].stockCode;
cell2.innerHTML = productArray[i].quantity;
cell3.innerHTML = productArray[i].bulk;
cell4.innerHTML = "<input type='button' value='-' class='removeBtn'/><input type='button' value='+' class='addBtn'/><input type='button' value='Delete' class='deleteBtn'/>"
}
This is an image of my page, I can't seem to figure out how I could add a select box to the cells below bulk (outlined in red). The idea being if bulk == true display a select box else don't show anything. (Some products can be ordered in bulk.)
Does anyone have any suggestions as to how I might go about achieving this?
Maybe simply something like
if(productArray[i].bulk)
cell3.innerHTML = "<select><option>1</option>..</select>";
Try like this
cell3.innerHTML = (productArray[i].bulk)?'<select><option value="...">...</option></select>':'';
Try this,
var select = '<select><option value="1">1</option><option value="2">2</option></select>';
cell3.innerHTML = productArray[i].bulk?select: '';
or just
cell3.innerHTML = productArray[i].bulk? '<select><option value="1">1</option><option value="2">2</option></select>' : '
for(var i = 0; i < productArray.length; i ++){
//This is the data to display
console.log("Order Item " + i);
console.log("StockCode: " + productArray[i].stockCode);
console.log("Quantity: " + productArray[i].quantity);
console.log("Bulk: " + productArray[i].bulk);
var row = ordertable.insertRow(i + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = productArray[i].stockCode;
cell2.innerHTML = productArray[i].quantity;
if(productArray[i].bulk) // true means select
cell3.innerHTML = "<select><option>1</option>..</select>"
else
cell3.innerHTML = '';
ell4.innerHTML = "<input type='button' value='-' class='removeBtn'/><input type='button' value='+' class='addBtn'/><input type='button' value='Delete' class='deleteBtn'/>"
}
How to add a table row with a text input inside the table field?
var table=document.getElementById("myTable");
var rowCount = table.row.length;
var row=table.insertRow(rowCount);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML += "<td class='align-center'>1</td>";
cell2.innerHTML += "<input type='text' class='input-long' name='newcategoryname' value='New Category' onfocus='if(this.value == \"New Category\"){ this.value = \"\"; }' onblur='if(this.value==\"\"){this.value=\"New Category\";}'/>";
You have to create input element by using createElement method,
try this
var cell1 = row.insertCell(1);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
cell1.appendChild(element1);
Hi I have a table structure
<table id ="tbl1" >
<thead>
<tr>
<td></td>
<td>
<button class="btn-danger btn fileinput-button" type="button">-</button></td>
</tr>
</thead>
</table>
I have to build dynamic rows in javascript...I am using the below code to generate..
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = filename;
var cell2 = row.insertCell(1);
var element2 = document.createElement("button");
element2.type = "button";
element2.className = "btn-danger btn fileinput-button";
var element3 = document.createElement("span");
element3.innerHTML = "-";
element2.appendChild(element3);
cell2.appendChild(element2);
The above code works fine in Fire fox but in ie button td is not creating. Could any one help on this.
Many Thanks
Anna
An alternative to this in jQuery:
var filename = 'sdsd';
var $btn = $('<button type="button">-</button>');
$btn.attr('class', 'btn-danger btn fileinput-button');
var $tr = $('<tr />');
$tr.append('<td>'+filename+'</td>');
$tr.append('<td />');
$tr.find('td:last').append( $btn );
$('#tbl1').append( $tr );
the error is coz of this line in ur code:
element2.type = "button";
Thanks Sally,
I have changed my code like below, this is also working.
var strTableRow = "<tr><td>" + filename + "</td><td><button class='btn-danger btn fileinput-button' type='button'>-</button></td></tr>";
$('#'+tableID).append(strTableRow);
Many Thanks
Anna