So im trying to make a table where it adds the content from 3 Textareas.
I succeeded in adding them but only with innerHTML but now im struggling to replace innerHTML with a DOM style(like appendChild etc.)
Table:
<header class="datagrid">
<h1> Zitatenbaum </h1>
<table id ="ZitatenOrdnung">
<thead>
<tr>
<th>Zitat</th>
<th>Autor</th>
<th>Ihre Bewertung </th>
</tr>
</thead>
</table>
</header>
Form:
<form>
<textarea rows = "5" cols = "60" placeholder="Zitat einfügen" id = "Zitat1"> </textarea>
<input type ="text" id="Autor1" placeholder="Autor einfügen"/>
<input id="Bewertung" type="text" placeholder="Bewertung von 1-10" />
<button id = "Einreichen">Einreichen </button>
<button id = "Löschen">Löschen</button>
</form>
Script:
<script>
document.getElementById("Add").innerHTML = "Add";
document.getElementById("Add").addEventListener("click",
function(e){
e.preventDefault();
if((document.getElementById("Autor1").value !== "" && document.getElementById("Quote1").value !== ""&& (document.getElementById("Rating"
).value > 1) && document.getElementById("Rating").value < 10)){
var table = document.getElementById("ZitatenOrdnung");
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);
cell1.lastChild.nodeValue = ('"' + document.getElementById("Quote1").value + '"');
cell1.setAttribute('contentEditable', 'true');
cell2.innerHTML = ("~" + document.getElementById("Autor1").value);
cell3.innerHTML = (document.getElementById("Rating").value);
cell3.setAttribute('contentEditable', 'true');
cell3.style.textAlign = 'center';
The cells you've inserted are empty, they don't have childrens, so lastChild is undefined.
You may append a textNode instead:
cell1.appendChild(document.createTextNode('"' + document.getElementById("Zitat1").value + '"'));
There also isn't an element with the id Quote1 (I guess you mean Zitat1)
Related
So I am creating a website that allows users to enter information about books they've read and it enters the information into a table. But I want the user to be able to delete a specific row (book) from the table if they click on a button.
I've added a click eventListener to the delete buttons but right now it is only deleting the row at the 0th index and sometimes it's deleting multiple rows at a time. I'm not sure why.
function addBooks() {
let info = document.getElementById("author").value;
let info2 = document.getElementById("title").value;
let info3 = document.getElementById("genre").value;
let info4 = document.getElementById("reviews").value;
document.getElementById("author").value = "";
document.getElementById("title").value = "";
document.getElementById("genre").value = "";
document.getElementById("reviews").value = "";
let obj = {
author: info,
title: info2,
genre: info3,
review: info4,
};
let table = document.getElementById("table");
const row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = `${obj.author}`;
cell2.innerHTML = `${obj.title}`;
cell3.innerHTML = `${obj.genre}`;
cell4.innerHTML = `${obj.review}<button id="delete" class="delete">Delete Book</button>`;
document.querySelectorAll(".delete").forEach((item) => {
item.addEventListener("click", (event) => {
document.getElementById("table").deleteRow(1);
});
});
}
<body>
<div class="container">
<h1 class="heading">Your Books</h1>
<p class="subHeading">Author</p>
<input id="author"></input>
<p class="subHeading">Title</p>
<input id="title"></input>
<p class="subHeading">Genre</p>
<input id="genre"></input>
<p class="subHeading">Reviews</p>
<input id="reviews"></input>
</div>
<button class="btn" onclick="addBooks()" id="button">Submit</button>
<table id="table">
<tr>
<th>Author</th>
<th>Title</th>
<th>Genre</th>
<th>Reviews</th>
</tr>
</table>
<script src="books.js"></script>
</body>
So the JavaScript allows the user to add new rows of information to the table. But they need to be able to delete specific rows as they click the delete buttons on that specific row.
I've added event listeners to the delete buttons but the function that reacts to the buttons clicking is only deleting the first row instead of the row that the button is clicked on.
Can anyone explain how to do this?
There are many ways to delete the row, just as other answers have demonstrated.
The reason why your code is only deleting the first entry is because you put deleteRow(1), which means "delete the row at index 1". Since the row at index 0 is your header, row at index 1 is your first entry.
And the reason why it sometimes delete everything is because you add event listener every time you add a new book. When you add the first book, the delete button will keep row index 1 as the reference to delete. When you add the second book, you add another event listener to the same button to delete the new row that you're adding. The previous reference is now at index 2. When you click that button, it will delete both the rows and index 1 and 2.
This is another way of doing it in JavaScript, using your code:
function addBooks() {
let info = document.getElementById("author").value;
let info2 = document.getElementById("title").value;
let info3 = document.getElementById("genre").value;
let info4 = document.getElementById("reviews").value;
document.getElementById("author").value = "";
document.getElementById("title").value = "";
document.getElementById("genre").value = "";
document.getElementById("reviews").value = "";
let obj = {
author: info,
title: info2,
genre: info3,
review: info4,
};
let table = document.getElementById("table");
const 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 deleteButton = document.createElement('button');
deleteButton.type = 'button';
deleteButton.textContent = 'Delete Book';
deleteButton.addEventListener('click', (event) => {
var row = deleteButton.parentNode.parentNode;
row.parentNode.removeChild(row)
})
cell1.innerHTML = `${obj.author}`;
cell2.innerHTML = `${obj.title}`;
cell3.innerHTML = `${obj.genre}`;
cell4.innerHTML = `${obj.review}`;
cell4.appendChild(deleteButton);
}
First of all, </input> is not a valid HTML tag, you should use <input type="..." /> instead.
There are many solutions to delete a row in a table, here is one. On click of the button, you find its closest tr and you remove it :
function addBooks() {
let info = document.getElementById("author").value;
let info2 = document.getElementById("title").value;
let info3 = document.getElementById("genre").value;
let info4 = document.getElementById("reviews").value;
document.getElementById("author").value = "";
document.getElementById("title").value = "";
document.getElementById("genre").value = "";
document.getElementById("reviews").value = "";
let obj = {
author: info,
title: info2,
genre: info3,
review: info4,
};
let table = document.getElementById("table");
const row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = `${obj.author}`;
cell2.innerHTML = `${obj.title}`;
cell3.innerHTML = `${obj.genre}`;
cell4.innerHTML = `${obj.review}<button onclick="this.closest('tr').remove()">Delete Book</button>`;
}
<body>
<div class="container">
<h1 class="heading">Your Books</h1>
<p class="subHeading">Author</p>
<input type="text" id="author" />
<p class="subHeading">Title</p>
<input type="text" id="title" />
<p class="subHeading">Genre</p>
<input type="text" id="genre" />
<p class="subHeading">Reviews</p>
<input type="text" id="reviews" />
</div>
<button class="btn" onclick="addBooks()" id="button">Submit</button>
<table id="table">
<tr>
<th>Author</th>
<th>Title</th>
<th>Genre</th>
<th>Reviews</th>
</tr>
</table>
<script src="books.js"></script>
</body>
Just create an onclick on your button that passes in its parent element using this.parentElement:
cell4.innerHTML = `${obj.review}<button id="delete" class="delete" onclick="deleteBook(this.parentElement)">Delete Book</button>`;
Then, remove its parent in the function:
function deleteBook(elem){
elem.parentElement.removeChild(elem);
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I am appending data dynamically to my table as:
function myFunctionEdit()
{
var table = document.getElementById("nomiTable");
var len = table.rows.length;
var row = table.insertRow(len);
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 = len;
cell2.innerHTML = name;
cell3.innerHTML = dob;
cell4.innerHTML = relation;
cell5.innerHTML = share;
cell6.innerHTML = "<a href = \"#\" data-toggle=\"modal\" data-target=\"#editNomiModal\" id = \"editNominHref\" name = \"editNominHref\" ><img border=\"0\" alt=\"Edit Nominee\" src=\"images/edit.png\" width=\"15\" height=\"15\"/></a>";
$('#editNomiModal').modal('hide');
return false;
}
My table structure is:
<table id = "nomiTable" name = "nomiTable" class="table table-striped table-hover">
<thead>
<tr>
..
</tr>
</thead>
<tbody>
<tr>
..Dynamically generated columns...
<td>
<a href = "#" data-toggle="modal" data-target="#editNomiModal" id = "editNominHref" name = "editNominHref" >
<img border="0" alt="Edit Nominee" src="images/edit.png" width="15" height="15"/>
</a>
</td>
</tr>
JQuery Function on #editNominHref click:
$("#editNominHref").on('click', function(e)
{
alert($(this).closest('tr').index());
});
Problem:
The method does not work on dynamically generated Edit Hrefs. Any help would be highly appreciated.
Use event delegation for same.
$(document).on('click', '#editNominHref', function(e)
{
alert($(this).closest('tr').index());
});
I have looked at the other similar answers but can't seem to see what I'm looking for. I'm trying to open a window containing a basic html page as a help screen for a login page. Here is the HTML:
<html>
<head>
<title>Jag City Job Management System</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="jag.js"></script>
</head>
<body>
<br>
<table class='title'>
<tr><td align = 'left'><img src='jaguar.jpg'></td><td><h1 class='title'>Jag City
Management System</h1></td><td align='right'><img src='jaguar.jpg'></td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table>
<?php
$d = date('d/m/Y');
?>
<table style='text-align:right;width:95%'>
<tr><td align = 'right'><?echo $d;?></td></tr>
</table>
<br>
<br>
<p class="thick">Please enter your User Name and Password to use the system.</p>
<form name="login" action= 'login.php' method='POST'>
<table border='0' style="text-align:left;width:270px">
<tr><td>User Name:</td><td><input type='text' name='eid'></td><tr>
<tr><td>Password:</td><td><input type='password' name='pword'></td><tr>
</table>
<br>
<input type='submit' value='Enter'>
<input type="button" onclick="lhelp()" value="Help">
</form>
<br>
</body>
</html>
and here is my .js file:
function lhelp() {
myWindow=window.open('/loginhelp.html','Help','width=750,height=250');
}
function jobadd()
{
var table = document.getElementById("jsadd");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var i = rowCount + 1;
var x = rowCount - 1;
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name="job["+x+"]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name="item["+x+"]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name="cat["+x+"]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name="desc["+x+"]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name="hrest["+x+"]";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name="hract["+x+"]";
element6.value = "0";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "text";
element7.name="assign["+x+"]";
cell7.appendChild(element7);
var counter = document.getElementById("row");
counter.value = x;
}
function newf(z)
{
var compbut = document.getElementById("compno");
compbut.value = z.rowIndex;
var a = document.getElementById("act");
a.value = prompt("Enter Actual Hours for Job","0");
document.forms["notcomp"].submit();
}
It works perfectly in Firefox. I have other functions which also work the same way, works in FF but not the other two. I am hoping that any help I get to solve this will point me in the right direction for the rest.
One thing to note, Javascript must be working to a degree because a cursor change for a part of a table I have works in all three!
I found the answer!! In my original .js file, I had an old function left over from a previous project the I copied the .js file from and modified it for this project. All of the lines from another function weren't terminated with a semi-colon. I removed the old function and checked all the lines in the file were correctly terminated and it now works.
Many thanks to all who tried to help!!!
I am writing a code in HTML + Jquery and need to add rows to a table dynamically.
I've written the code to add the rows dynamically, but it doesn't seem to work.
Here is my JScript code :
<script language="JavaScript">
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 = "date";
element1.name="datebox[];
element1.id = "dt";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var element2 = document.createElement("input");
element2.type = "select";
element2.name = "selectbox[]";
element2.id = "slct";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = rowCount + 1;
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.id = "txt";
cell3.appendChild(element3);
table.appendChild(cell1);
}
</script>
This is my Table:
<table id = "tab" style="width:500px">
<tr>
<th>Date</th>
<th>Treatment Goal</th>
<th>Comment</th>
</tr>
<tr>
<td><INPUT type="date" name="datebox[]" id = "dt"/></td>
<td>
<SELECT name="selectbox[]" id = "slct">
</SELECT>
</td>
<td><INPUT type="text" name="txtbox[]" id = "txt"/></td>
</tr>
</table>
I am calling the function in the onClick event of a button like this :
<input type="button" id="add" value="+" name="Add" onclick="addRow('tab')"/>
The html page doesn't respond to the click event and nothing happens.
Cannot understand what's going wrong.
Working Fiddle
The first problem is a syntax error on this line (you didn't close the double quote):
element1.name="datebox[];
^ missing "
The second problem is you are appending the cell to the table which is wrong, you should be appending the row:
table.appendChild(row);
^ changed to row from cell
You are missing a quotation mark on the line:
element1.name="datebox[];
after the name element.
var i = 0;
var a = 3;
function addNewAnswer(tableID) {
var table = document.getElementById(tableID);
if(i < 10)
{
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = '<font size="2" face="Courier New"><b>Enter Answer ' + String.fromCharCode(67+i) + ':</b></font>';
var cell2 = row.insertCell(1);
var element1 = document.createElement("input");
element1.size = 40;
element1.type = "text";
element1.name = "answer"+a;
cell2.appendChild(element1);
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "radio";
element2.name = "radios";
element2.value = String.fromCharCode(67+i);
cell3.appendChild(element2);
i++;
a++;
}
}
My HTML Form:
<table>
<tr>
<form method=post name="submitform" action="verify-qedit.jsp">
<td>
<form method=post name="submitform" action="verify-qedit.jsp">
<table id="dataTable">
<tr>
<th colspan="3" align="left">Question</th>
</tr>
</table>
</form>
</td>
</form>
</tr>
</table>
When I submit the form, I only can retrieve the parameters not created by the above javascript. It only works in compatibility mode - IE 8 standards and below. Please help because I have spent days trying to find out before posting this question.
Does this work on all the browsers you are targetting?
http://jsfiddle.net/4nbB5/1
function addNewAnswer(tableID) {
var rowCount, row, cell1, cell2, cell3, element1, element2, char;
var i = 0;
var table = document.getElementById(tableID);
while (i < 10) {
rowCount = table.rows.length;
row = table.insertRow(rowCount);
cell1 = row.insertCell(0);
char = String.fromCharCode(65 + i);
cell1.innerHTML = '<font size="2" face="Courier New"><b>Enter Answer ' + char + ':</b></font>';
cell2 = row.insertCell(1);
element1 = document.createElement("input");
element1.size = 40;
element1.type = "text";
element1.name = "answer" + i;
cell2.appendChild(element1);
cell3 = row.insertCell(2);
element2 = document.createElement("input");
element2.type = "radio";
element2.name = "radios";
element2.value = char;
cell3.appendChild(element2);
i++;
}
}
addNewAnswer('foo');
All I did was remove 'a', and declare 'i', change 'if' to while, changed 67 in fromCharCode to 65.. Looked to be what you may have wanted at some point so I stopped.
The problem had nothing to do with the javascript. It was because I was putting the form tag in the wrong place within the table after the tr tag instead of after the td tag.
<table>
<tr>
<td>
<form method=post name="submitform" action="verify-qedit.jsp">
<table id="dataTable">
<tr>
<th colspan="3" align="left">Question</th>
</tr>
</table>
</form>
</td>
</tr>
</table>