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);
Related
three state toggle button whose functionality is different in each row in table.and store their value in array foam.like in first row i select toggle button on and in next row i will select off. all these value store in array foam
<script type="text/javascript">
var i = 1;
$(".add-row").click(function(){
var table = document.getElementById("choose-address-table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var val = ++i;
cell1.innerHTML = "<input type='text' name='key_performance[]' id='key_performance' >";
cell2.innerHTML = "<input type='text' name='target[]' id='target'>";
cell3.innerHTML = "<input type='text' name='actual[]' id='actual'>";
cell4.innerHTML = '<div id="rates"><input type="radio" id="r1" name="rate'+(val)+'" value="1"><input type="radio" id="r2" name="rate'+ (val)+'" value="0"><input type="radio" id="r3" name="rate'+(val)+'" value="2" checked="checked"></div>'
});
</script>
<script>
var data4 = new Array();
$("input[type=radio]:checked").each(function()
{
var ttt = $(this).val();
data4.push(ttt);
});
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.
I will create table row in javascript , in table row I have some input field and now I want to access data from this fields using thymeleaf
function myCreateFunction2() {
var table = document.getElementById("mdlTable2");
var row = table.insertRow(1);
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);
cell1.innerHTML = "Item";
cell2.innerHTML = '<input id="item" type="number" value="">';
cell3.innerHTML = "UOM";
cell4.innerHTML = '<textarea></textarea>';
cell5.innerHTML = '<button type="submit" value="save" class="btn btn-success btn-sm" onclick="save()">Save</button></form>';
cell6.innerHTML = '<button type="button" class="btn btn-danger btn-sm" onclick="myDeleteFunction2()">Remove</button>';
}
You need to add a name to each input and then on your controller, ask for those parameters. Let's assume you you expected url is /edit.
JS
function myCreateFunction2() {
var table = document.getElementById("mdlTable2");
var row = table.insertRow(1);
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);
cell1.innerHTML = "Item";
cell2.innerHTML = '<input id="item" type="number" value="" name="id">';
cell3.innerHTML = "UOM";
cell4.innerHTML = '<textarea id="description" name="description"></textarea>';
cell5.innerHTML = '<button type="submit" value="save" class="btn btn-success btn-sm" onclick="save()">Save</button></form>';
cell6.innerHTML = '<button type="button" class="btn btn-danger btn-sm" onclick="myDeleteFunction2()">Remove</button>';
}
Controller
#RequestMapping(value = "/edit", method = RequestMethod.POST)
public String edit(#RequestParam("id") String id,
#RequestParam("description") String description { ... }
Save (JS)
Now, since you don't have a form, if you want to submit your data, you will need one. In this case, we will do it using javascript.
function save() {
// First, let's create the form.
var form = document.createElement("form");
form.method = "POST";
form.action = "/edit";
// Now, let's add the inputs.
var id = document.getElementById('id');
var description = document.getElementBy('description');
form.appendChild(id);
form.appendChild(description);
// Submit the form.
document.body.appendChild(form);
form.submit();
}
Another, more easy way, would be to wrap your html code in a form. Of course, you would need to duplicate your code, since you would need both the edit and the delete form.
Hope it helps.
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>");
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'/>"
}