We Keep Coding

Append text box and button

how to create textbox/text field and button
JavaScript
<script type="text/javascript">
function addItemTodo(){
var value = document.getElementById('item1').value;
var value2 = document.getElementById('item2').value;
var my_table = document.getElementById('todo');
var rows = my_table.getElementsByTagName("tr").length;
row = my_table.insertRow(rows);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell1.innerHTML = value;
cell2.innerHTML = value2;
}
</script>
HTML Code
<input type="text" id="item1" placeholder="item1" size="12">
<input type="text" id="item2" placeholder="item2" size="14">
<button id="add" onclick="addItemTodo()">Add</button>
<table border="1" style="width:50%" id="todo">
<tr>
<th>Input from 'item1'</th>
<th>Input from 'item2'</th>
<th>Text Box</th>
<th>Button</th>
</tr>
</table>
How to append the text box and button, when clicked the add button

You could create your new elements within your Javascript as strings, and then add them to two new cells (insertCell(2) and insertCell(3)) using .innerHTML like so:
function addItemTodo() {
var value = document.getElementById('item1').value;
var value2 = document.getElementById('item2').value;
var my_table = document.getElementById('todo');
var rows = my_table.getElementsByTagName("tr").length;
var row = my_table.insertRow(rows);
row.insertCell(0).innerHTML = value;
row.insertCell(1).innerHTML = value2;
row.insertCell(2).innerHTML = "<input type='text' placeholder='xxx' class='text-box' />";
row.insertCell(3).innerHTML = "<button>Text</button>";
}
.text-box {
width: 50px;
}
<input type="text" id="item1" placeholder="item1" size="12">
<input type="text" id="item2" placeholder="item2" size="14">
<button id="add" onclick="addItemTodo()">Add</button>
<table border="1" style="width:50%" id="todo">
<tr>
<th>Input from 'item1'</th>
<th>Input from 'item2'</th>
<th>Text Box</th>
<th>Button</th>
</tr>
</table>

How to save HTML dynamic table into database

My problem is I am creating dynamic HTML table by using javascript.
How do I save this dynamic HTML table into a DataBase using CodeIginter?
This my input text code:
<table id="tb3" name="tb3">
<tr>
<td>Product Code</td>
<td>Product Name</td>
<td>Qty</td>
<td>Rate</td>
<td>Amount</td>
</tr>
<tr>
<td>
<input type="text" onkeyup="autofill()" id="Product_Code" name="Prdtcode" class="form-control input-xs Product_Code " required>
</td>
<td ><input type="text" id="Product_Name" name="Prdtname" class="form-control input-xs"></td>
<td><input type="text"
onkeypress="javascript:doit_onkeypress(event)" id="Qty" onkeyup="movetoNext(this, 'addMore3')" name="Qty"class="form-control input-xs" required>
</td>
<td><input type="text" id="Rate" class="form-control input-xs"name="Rate" value="" ></td>
<td><input type="text" id="Value" name="Value" class="form-control input-xs" ></td>
</tr>
</table>
This code gets data from a TextBox and displays in table format using javascript:
<table class="table table-bordered table-striped table-xxs" id="tb2" name="tb2">
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
</tr>
This is the javascript code to create table
function doit_onkeypress(event)
{
if (event.keyCode == 13 || event.which == 13){
if(!checkEmptyInput()){
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
code = document.getElementById("Product_Code").value,
name = document.getElementById("Product_Name").value,
qty = document.getElementById("Qty").value,
rate = document.getElementById("Rate").value,
amt = document.getElementById("Value").value;
cell1.innerHTML = code;
cell2.innerHTML = name;
cell3.innerHTML = qty;
cell4.innerHTML = rate;
cell5.innerHTML = amt;
var prdtcode = $("#Product_Code").val("");
var Prdtname = $("#Product_Name").val("");
var qty = $("#Qty").val("");
var Rate = $("#Rate").val("");
var amt = $("#Value").val("");
}
}
}
My problem is I am creating a dynamic HTML table by using javascript,how I save this dynamic html table into database using codeiginter.

Store whole table html data into one variable
var table_data = $("#table_id").html();
$.trim(table_data. replace(/>[\n\t ]+</g, "><"));
Now Send this table_data variable to controller function to add data
Make sure the datatype of your field should be text or longtext then normally do the insertdata query in controller's function.
The ajax code is as below:
$.ajax({
url:"path to your controller function",
type: 'POST',
data:{
table_data:table_data,
},
success:function(result){
console.log(result);
},
});
The controller's function code is as below:
function insert_table_data(){
$data = array('table_data' => $this->input->post('table_data'));
$this->db->insert('table_name', $data);
}

Can I put <input> tag in insertRow() function? Not only text

I want to use insertRow() function for adding rows in my table. but can I insert a row which contain <input> tag. because my table look like this
<table><thead>
<tr>
<th>No Account</th>
<th>Deskripsi</th>
<th>Debit</th>
<th>Credit</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="input-td" type="text" placeholder="No Account">
</td>
<td><input class="input-td" type="text" placeholder="-"></td>
<td><input class="input-td" type="text" placeholder="-"></td>
<td><input class="input-td" type="text" placeholder="0"></td>
<td><input class="input-td" type="text" placeholder="0"></td>
</tr></thead>
</table>
<i class="fa fa-plus"></i>&nbsp Add row
so far i could only find this example for the javascript code
function myCreateFunction() {
var table = document.getElementById("bootstrap-data-table");
var row = table.insertRow(3);
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);
cell1.innerHTML = "0";
cell2.innerHTML = "0";
cell3.innerHTML = "0";
cell4.innerHTML = "0";
cell.innerHTML = "0";
}
could I change "0" which is only text to being input tag like the previous row?

You could just assign an HTML string:
cell1.innerHTML = `<input class="input-td" type="text" placeholder="No Account">`;
Other options include creating the DOM via document.createElement and the like.
const input1 = document.createElement("input");
input1.classList.add("input-td");
input1.type = "text";
input1.placeholder = "No Account";
cell1.appendChild(input1);

How to add a name attribute to a dynamically generated <tr>

I have been looking all around through numerous sources to try and find a way to add name="" to generated table rows. Here is the table part of the form being submitted.
<table id="quote_form_table"border="1" style="border-collapse:collapse;border:1px solid #000000;width:100%" cellpadding="3" cellspacing="3">
<tr>
<td>Quantity</td>
<td>Item</td>
<td>Unit Price</td>
</tr>
<tr name="row[]">
<td><input type="text" name="quantity" ></td>
<td>
<select name="products">
<option>Roller banner</option>
<option>Grasshopper</option>
<option>Pop up display</option>
</select>
</td>
<td>
<select name="type">
<option>Roller banner</option>
<option>Grasshopper</option>
<option>Pop up display</option>
</select>
</td>
</tr>
</table>
<br>
<button type="button"onclick="addrow()">Add Row</button>
<button type="button"onclick="removerow()">Remove Row</button><br><br><br>
Here is the script adding and removing rows.
<script>
function addrow() {
var table = document.getElementById("quote_form_table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input type="text" name="quantity" >';
cell2.innerHTML = '<select name="products"><option>Roller banner</option><option>GrassHopper</option><option>Pop up display</option></select>';
cell3.innerHTML = '<select name="type"><option>Roller banner</option><option>GrassHopper</option><option>Pop up display</option></select>';
}
function removerow() {
document.getElementById("quote_form_table").deleteRow(-1);
}
</script>
As a novice at Javascript ,(and I use the term 'novice' very loosely as it is not a language I am familiar with to fix this myself), I tried setAttribute to no avail.
var tr = tr.setAttribute("name", "row[]", 0);
I found many sources on how to add classes or Id's but none for 'name'. So as a wild stab in the dark I tried a last attempt to see if I could work it out.
row.name = "row[]";
So now here I am.
The table rows are being made into arrays for PHP to process so that the information can be sent off in an email for price quotes and I can generate the information on the other end in the right order.
My question is How do you add a name="row[]" to the dynamically generated tr tag?
Is it even possible?

You want to add name to new rows, right?
var numRow = 0;
function addrow() {
var table = document.getElementById("quote_form_table");
var row = table.insertRow(-1);
row.setAttribute("name", "row"+numRow);
numRow++;
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input type="text" name="quantity" >';
cell2.innerHTML = '<select name="products"><option>Roller banner</option><option>GrassHopper</option><option>Pop up display</option></select>';
cell3.innerHTML = '<select name="type"><option>Roller banner</option><option>GrassHopper</option><option>Pop up display</option></select>';
}
function removerow() {
document.getElementById("quote_form_table").deleteRow(-1);
numRow--;
}
But i think that you should use id or class instead of name for <tr> elements

Creating 2 html tables using javascript

I'm trying to create 2 dynamic html tables using Javascript with data from html inputs. I was able to create the first table I wanted but I've been unable to create 2 different tables using different inputs on the same page.
I tried changing the addRow() functions in the html and JS to have different names but this caused both tables to fail.
Any help would be appreciated. Here's the test code I've been using.
<!DOCTYPE html>
<body onload="load()">
<div id="myform">
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" id="age">
<input type="button" id="add" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table>
<tr>
<td>Height:</td>
<td><input type="text" id="height"></td>
</tr>
<tr>
<td>Width:</td>
<td><input type="text" id="width">
<input type="button" id="addDim" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Name</b></td>
<td><b>Age</b></td>
</tr>
</table>
<table id="myTableData2" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Height</b></td>
<td><b>Width</b></td>
</tr>
</table>
</body>
</html>
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="deleteRow(this)">';
row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;
var width = document.getElementById("width");
var height = document.getElementById("height");
var table2 = document.getElementById("myTableData2");
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row.insertCell(1).innerHTML = width.value;
row.insertCell(2).innerHTML = height.value;
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
function load() {
console.log("Page load finished");
}

Looks like in the bottom section, you're not using the row2 variable you've defined.
Should be:
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row2.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row2.insertCell(1).innerHTML = width.value;
row2.insertCell(2).innerHTML = height.value;

here how i did it. you can use the same function for any amount of table, if pass the parameter in the function.
http://jsfiddle.net/8t5aqomk/2/
function myFunction(thisTable) {
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var age = document.getElementById('age').value;
var info = [firstName,lastName,age]
var table = document.getElementById(thisTable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cellCount = table.rows[0].cells.length;
for(var i=0; i<cellCount; i++) {
row.insertCell(i).innerHTML=info[i];
}
}