Develop Reference

How to delete a row from HTML table using the button which is in the next cell of the data entered?

This is my code which I was working on. Basically it is the Library Management Project for the final semester in my college.
Now my question is how to delete a row when we click that row's delete button.
<table border="1" id="student_tb1" class="table table-bordered" style="display: none;" contenteditable="true">
<tr>
<td>Sr. No.</td>
<td>Class</td>
<td>Roll no</td>
<td>Name</td>
</tr>
</table>
<script type="text/javascript">
function addStudent(){
var maxRows = 10;
var table = document.getElementById("student_tb1");
var text1 = document.getElementById("student_textbox1").value;
var text2 = document.getElementById("student_textbox2").value;
var text3 = document.getElementById("student_textbox3").value;
var x = document.getElementById("book_tb1").rows.length;
var message;
message = document.getElementById("message");
message.innerHTML = "";
if(x <= maxRows) {
if(text1 == "select" ){
message.innerHTML = "select the class !! "
}
else if(text2 == "" || isNaN(text2) || text2 < 0 || text2 > 100 || text2 == 0){
message.innerHTML = "your roll no may be between 0 and 101 "
}
else if (text3 == "") {
message.innerHTML = "enter the name"
}
else{
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell2.innerHTML = text1;
cell3.innerHTML = text2;
cell4.innerHTML = text3;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i+1;
}
}
alert("Data has been inserted successfully!");
}|
}
</script>
Result:
Sr. No. |Class |Roll no |Name |Action
1 |BSCIT-3 |010 |vishesh |Delete button

You can call this function:
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
and make your delete button html:
<input type="button" value="Delete" onclick="deleteRow(this)"/>

Display Dialog Box In Order to Add New Row to HTML Table

So I currently have an HTML table where I can add rows to the end of the table. A new row appears with text boxes inside and you can enter information.
However, I am wanting to do away with that and use a new method. I am wanting it so that when the add row button is clicked, a dialog box pops up and gives me the option to add the information for the row. Then it uses the validation to make sure the row is good to go and then adds the row to the table.
How would I be able to do this?
You can see the demo...
http://codepen.io/Rataiczak24/pen/wzpJop
JavaScript:
// ----- Deactivate/Activate Row -----
$(document).on("click", "#html_master .deactivate", function () {
var $this = $(this);
var $tr = $this.closest('tr');
var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate';
// ------ Confirmation box in order to deactivate/activate row -----
if (confirm('Are you sure you want to ' + action + ' this entry?')) {
$tr.toggleClass('deactivated');
$this.val(function (i, t) {
return t == 'Deactivate' ? 'Activate' : 'Deactivate';
});
}
});
// ----- Edit Row -----
$(document).on("click", "#html_master .edit", function () {
var $this = $(this);
var tds = $this.closest('tr').find('td').not('.mr_id').filter(function () {
return $(this).find('.edit').length === 0;
});
if ($this.val() === 'Edit') {
$this.val('Save');
tds.prop('contenteditable', true);
} else {
var isValid = true;
var errors = '';
$('#myDialogBox').empty();
// changed from here.......
var elements = tds;
if (tds.find('input').length > 0) {
elements = tds.find('input');
}
elements.each(function (index, element) {
var type = $(this).attr('class');
var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text();
// changed from here....... to here
// ----- Switch statement that provides validation -----
switch (type) {
case "buyer_id":
if (!$.isNumeric(value)) {
isValid = false;
errors += "Please enter a valid Buyer ID\n";
}
break;
case "poc_n":
if (value == value.match(/^[a-zA-Z\s]+$/)) {
break;
}
else {
isValid = false;
errors += "Please enter a valid Name\n";
}
break;
case "poc_e":
if (value == value.match(/^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)) {
break;
}
else {
isValid = false;
errors += "Please enter a valid Email\n";
}
break;
case "poc_p":
if (value == value.match('^[0-9 ()+/-]{10,}$')) {
break;
}
else {
isValid = false;
errors += "Please enter a valid Phone Number\n";
}
break;
}
})
if (isValid) {
$this.val('Edit');
tds.prop('contenteditable', false);
} else {
alert(errors);
}
}
});
// ----- Add Row -----
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;
cell1.className = 'mr_id';
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.className = 'mr_name';
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.className = 'buyer_id';
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
element4.className = 'poc_n';
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
element5.className = 'poc_e';
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";
element6.className = 'poc_p';
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
var element8 = document.createElement("input");
element7.type = "button";
element8.type = "button";
element7.name = "edit";
element8.name = "deactivate";
var setClass = document.createAttribute("class");
setClass.value = "edit";
element7.setAttributeNode(setClass);
var setClass1 = document.createAttribute("class");
setClass1.value = "deactivate";
element8.setAttributeNode(setClass1);
element7.attr = "class";
element8.attr = "class";
element7.value = "Save";
element8.value = "Deactivate";
cell7.appendChild(element7);
cell7.appendChild(element8);
}
HTML/PHP:
<table id="html_master">
<thead>
<tr>
<td>ID</td>
<td>Vendor</td>
<td>Buyer ID</td>
<td>POC Name</td>
<td>POC Email</td>
<td>POC Phone</td>
<td>Edit/Delete</td>
</tr>
</thead>
<tbody>
<?php
foreach ($dbh->query($sql) as $rows){
?>
<tr>
<td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
<td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
<td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
<td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>
<td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
<td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
<td><input type="button" class="edit" name="edit" value="Edit">
<input type="button" class="deactivate" name="deactivate" value="Deactivate"></td>
</tr>
<?php
}
?>
</tbody>
<br>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
</table>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
</body>
</html>

You can use the modal popup. Take a look at it: How to create a modal popup using javascript
You would have to a create separate div on that modal, put all the required input fields in that sub div.
All you need to do is trigger that popup on "Add row" button click, get the user input, close the popup, verify the code and inject it into table.
I've written this code for you, I hope it helps
HTML
<table border="1" style="width:100%;">
<thead>
<tr style="font-weight:bold;">
<td>Field 1</td>
<td>Field 2</td>
</tr>
</thead>
<tbody id="tBody"></tbody>
</table>
<button onclick="showModal();">Add Row</button>
<div class="modal" id="modal">
<div class="content">
<input type="text" id="field1" placeholder="Field 1" /><br />
<input type="text" id="field2" placeholder="Field 2" />
<br />
<button onclick="addRow();">Add</button>
<button onclick="closeModal();">Close</button>
</div>
</div>
CSS
.modal{
display:none;
background:#fff;
opacity:0.9;
position:fixed;
top:0;
width:100%;
height:100%;
}
.content{
width:300px;
background:#f2f2f2;
margin:0 auto;
padding:2%;
}
JS
function showModal(){
document.getElementById("modal").style.display = "block";
}
function closeModal(){
document.getElementById("modal").style.display = "none";
}
function addRow(){
var tBody = document.getElementById("tBody");
var field1 = document.getElementById("field1");
var field2 = document.getElementById("field2");
/* Your validation code here */
var rowData = '<tr>'
+ '<td>'+field1.value+'</td>'
+ '<td>'+field2.value+'</td>'
+ '</tr>';
if(tBody.innerHTML!=null){
tBody.innerHTML = tBody.innerHTML + rowData;
}else{
tBody.innerHTML = rowData;
}
alert("row has been added!");
field1.value='';
field2.value='';
closeModal();
}

How to change name of input text, when adding more inputs

this is the form
<form action="" method="POST">
<input type="button" value="addmore" onClick="addRow('dataTable')" />
<table id="dataTable" class="TFtable" border="1">
<tr>
<td><label>should be auto increment(like (name1, name2, name3 ...))</label>
<input type="text" required="required" name="DONINID[]" value=""></td>
</tr>
</table>
<input class="submit" type="submit" value="Confirm »" />
</form>
this is the script to add more => script.js:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 20){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum Passenger per ticket is 20.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all the Passenger.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
Now the idia is how to change the label name too as we add more input box it's should be auto increment like:
name1, name2, name3, name3 and when we add it should show us.
thanks in advance.

Add a variable that tracks the next # to use and append it to the contents and name every time you add one.
HTML
<form action="" method="POST">
<input type="button" value="addmore" onClick="addRow('dataTable')" />
<table id="dataTable" class="TFtable" border="1">
<tr>
<td>
<label>Name 1:</label>
<input type="text" required="required" name="name1" />
</td>
</tr>
</table>
<input class="submit" type="submit" value="Confirm »" />
JavaScript
var nextName = 2;
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 20) { // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = '<label>Name ' + nextName + ':</label>' +
'<input type="text" required="required" name="name' + nextName + '" />';
nextName++;
}
} else {
alert("Maximum Passenger per ticket is 20.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all the Passenger.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
Demo: http://jsfiddle.net/BenjaminRay/4jnw0t09/

How to make input text field dynamic expending with document.createElement("input") method?

This is my first question on this awesome community.
I am using this javascript code to build a dynamic table:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.onkeypress = "this.style.width = ((this.value.length + 1) * 8) + 'px'";
cell2.appendChild(element2);
}
And following html code to print it:
<table id="dataTable" style="width: 300px;" border="0">
<tr>
<td ><input type="checkbox" name="chk" /></td>
<td <input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"> </td>
</tr>
</table>
My problem is that- I want my text input field to be dynamically expending, but due to using 'document.createElement("input");' in the Javascript, only the first text input field expends dynamically rest

You can define your expanding function and reuse it later, like this:
expandTextBox = function (tb) {
tb.style.width = ((tb.value.length + 1) * 8) + 'px';
}
And when you create element:
var element2 = document.createElement("input");
element2.onkeypress = function() { expandTextBox(element2); };
And in html:
<input id="txt" type="text" onkeypress="expandTextBox(this)">
See the Fiddle

When add events to dynamically created elements in javascript, you must define the event code as a function not as a string!
So, modify your addRow function to this:
...
element2.onkeypress = function(){this.style.width = ((this.value.length+1)*8)+'px'};

How to access the dynamically assigned value for a cell in the dynamic html table in java script within another java script function

I have a problem with accessing the cell value that I have assigned to a cell in the dynamic table using a addRow js function.Now I want to access that value from another js function function re(cal) on button click but when I try to access that value it says that value/innerHtml is undefined.
Here is my html file
<table id="calorie">
<tr><hr></tr>
<tr>
<td><label class="z"><b>Food Item</b></label></td>
<td> <?php
include("connection.php");
$query = "SELECT * FROM foodcataloge";
$result = mysql_query($query) or die("Unable to query Food");
$option = '';
while($row=mysql_fetch_array($result)) {
$option .= '<option value='.$row['FoodCataloge_CalorieAmount'].'>'. $row['FoodCataloge_FoodName'].'</option>';
}
?>
<select name="FoodCataloge_FoodName" id="food" onchange="updateText();"><?php echo $option; ?></select></td>
</tr>
<tr>
<td><label class="z"><b>Portion </b></label></td>
<td> <input type="text"class="span3" name="foodpor" id="foodpor" onchange="pupdate();"></td>
</tr>
<tr>
<td><label class="z"><b>Calorie amount per portion </b></label></td>
<td> <input type="text"class="span3" name="calamount" id="calamount" ></td>
</tr>
<tr><td><label class="z"><b>Number of Calories</b></label></td>
<td> <input type="text" class="span3"name="calo" id="calo"></td>
</tr>
<tr>
<tr><td><label class="z"><b>Total</b></label></td>
<td> <input type="text" class="span3"name="res" id="res"></td>
</tr>
<tr>
<td></td><td></td>
<td><input type = "button" value = "Add" onclick = "showDiv(),addRow('cal')"></td>
<td><input type = "button" value = "Remove" onclick = "deleteRow('cal')"></td>
<td><input type = "button" value = "Calculate" onclick = "re('cal')"></td></tr>
</table>
<br><br><br><br>
<table id="cal" class="table span2" >
<thead>
<th width="30px" id="l1" hidden="true"><label class="z"><b>Remove</b></label></th>
<th width="30px" id="l2"hidden="true"><label class="z"><b>Food</b></label></th>
<th width="30px" id="l3" hidden="true"><label class="z"><b>Portion</b></label></th>
<th width="30px" id="l4" hidden="true"><label class="z"><b>Calories</b></label></th>
<th width="30px" id="l5" hidden="true"><label class="z"><b> Total</b></label></th>
</thead>
</table>
my dynamic table is cal
Here is my js file
function re(cal){
var table = document.getElementById(cal);
var rowCount = table.rows.length;
alert(rowCount);
//or (var i=1;i<rowCount;i++){
var sum =document.getElementById(cal).rows[1].cells[3].value;
alert(sum);
//}
}
function addRow(cal) {
document.getElementById('cal').style.border = "8px solid #718294";
var table = document.getElementById(cal);
var rowCount = table.rows.length;
var cellCount= document.getElementById(cal).rows[0].cells.length;
var row = table.insertRow(rowCount);
row.id="row"
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2= row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.value=document.getElementById('food').options[document.getElementById('food').selectedIndex].text;
element2.setAttribute('id', 'cell2' + rowCount);
cell2.appendChild(element2);
var cell3= row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.value=document.getElementById('foodpor').value;
element3.setAttribute('id', 'cell3' + rowCount);
cell3.appendChild(element3);
var cell4= row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
element4.value=document.getElementById('calo').value;
element4.setAttribute('class', 'clu');
element4.setAttribute('id', 'cell4' + rowCount);
cell4.appendChild(element4);
var cell5= row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
element5.setAttribute('id', 'cell5' + rowCount);
cell5.appendChild(element5);
//cell2.innerHTML=document.getElementById('food').options[document.getElementById('food').selectedIndex].text;
//cell3.innerHTML=document.getElementById('foodpor').value;
//cell4.innerHTML=document.getElementById('calo').value;
document.getElementById('food').value = '';
document.getElementById('foodpor').value='';
document.getElementById('calo').value='';
document.getElementById('calamount').value='';
}
function deleteRow(cal) {
try {
var table = document.getElementById(cal);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
All the other things working fine but from the function function re(cal) alert the sum as undefined but I expect it to be the value of that selected cell..
Please tell me what I am doing wrong!

From where are you calling re(cal)? the alert? before or after the table creation. If before, that's why it's undefined.