my problem is that when I click my add row button that is in the table it adds a new row only in the first cell instead of in the new cell. Any ways to correct this?
<html>
<body>
<input name="button2" type="button" onClick="addRow('dataTable')" value="Add Row" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="84">
1
</td>
<td>
<input type="text" />
</td>
<td> <input name="button" type="button" onClick="addRow('dataTable1')" value="Add Row" />
<table id="dataTable1" width="150px" border="1">
<tr>
<td height="27"> 1 </td>
<td> <input name="text" type="text" /> </td>
<td> <input name="text" type="text" /> </td>
<td> <input name="button" type="button" onClick="addRow('dataTable1')" value="Add Row" />
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var contents = document.getElementById('dataTable').outerHTML;
var contents = document.getElementById('dataTable1').outerHTML;
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.setAttribute('colspan', 3);
var newCont = contents.replace(' 1 ', rowCount + 1);
firstCell.innerHTML = newCont;
}
</script>
Related
I tried to store my input values in cookies. but it is not stored. what is wrong with my code? please help.
Thanks in advance.
<html>
<head></head>
<body>
<table border="1">
<tr>
<td>
Name
</td>
<td>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="text" id="txtEmail" />
</td>
</tr>
<tr>
<td>
Gender
</td>
<td>
<input type="text" id="txtGender" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Set Cookie" onclick="setCookie()" />
<input type="button" value="Get Cookie" onclick="getCookie()" />
<input type="button" value="Clear" onclick="clearTextBoxes()" />
</td>
</tr>
</table>
<script type="text/javascript">
function setCookie()
{
var customObject = {};
customObject.name = document.getElementById("txtName").value;
customObject.email = document.getElementById("txtEmail").value;
customObject.gender = document.getElementById("txtGender").value;
var jsonString = JSON.stringify(customObject);
document.cookie = "cookieObject=" + jsonString;
}
function getCookie()
{
var nameValueArray = document.cookie.split("=");
var customObject = JSON.parse(nameValueArray[1]);
document.getElementById("txtName").value = customObject.name;
document.getElementById("txtEmail").value = customObject.email;
document.getElementById("txtGender").value = customObject.gender;
}
function clearTextBoxes()
{
document.getElementById("txtName").value = "";
document.getElementById("txtEmail").value = "";
document.getElementById("txtGender").value = "";
}
</script>
</body>
</html>
Hi i have an ajax jquery function which displays table data as shown in the picture, i want to add a field which says edit and delete which gives the user the permission to edit or delete table data and it will get reflected in the database. Please note i have not given any index value to the response data nor an id
is there any way to achieve this! if so could you please explain or show me references! thanx!
$("#table").append("<tr class='tr'> <td> <input type='checkbox', value='" + response.data[i].electrician_email + "'>"+response.data[i].electrician_name+" </td> <td> "+response.data[i].electrician_contact+" </td> <td> "+response.data[i].electrician_license+" </td> <td> "+response.data[i].electrician_email+" </td> <td> "+response.data[i].state+" </td> <td> "+response.data[i].city);
You can do it in a simple manner, like add a number to the row and edit the row using the rownumber. Here is the code what I have tried and hope it helps you.
like see the code snippet here
<tr id="row1">
<td id="name_row1">XXX</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
There in the tr id is row1, when you add a new row a new tr is created with id rowX X is a number. If you want to edit the row, select the row using rowX and edit or delete whatever you want.
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var name=document.getElementById("name_row"+no);
var country=document.getElementById("country_row"+no);
var age=document.getElementById("age_row"+no);
var name_data=name.innerHTML;
var country_data=country.innerHTML;
var age_data=age.innerHTML;
name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
country.innerHTML="<input type='text' id='country_text"+no+"' value='"+country_data+"'>";
age.innerHTML="<input type='text' id='age_text"+no+"' value='"+age_data+"'>";
}
function save_row(no)
{
var name_val=document.getElementById("name_text"+no).value;
var country_val=document.getElementById("country_text"+no).value;
var age_val=document.getElementById("age_text"+no).value;
document.getElementById("name_row"+no).innerHTML=name_val;
document.getElementById("country_row"+no).innerHTML=country_val;
document.getElementById("age_row"+no).innerHTML=age_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_name=document.getElementById("new_name").value;
var new_country=document.getElementById("new_country").value;
var new_age=document.getElementById("new_age").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_name").value="";
document.getElementById("new_country").value="";
document.getElementById("new_age").value="";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr id="row1">
<td id="name_row1">XXX</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="name_row2">YYY</td>
<td id="country_row2">Australia</td>
<td id="age_row2">78</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
It is complicated and that can't be answered in a few lines of code.
You may restart from scratch by looking at this old CRUD: http://jtable.org/
Or angular x-editable (using bootstrap):
https://vitalets.github.io/angular-xeditable/#editable-row
I have this html
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
html code inside tbody tag is generated by javascript, after generate the code I want to fill the value inside #categories[], #description[] ids
this my javascript code to fill the value
//button simpan item
$('#bSimpanItem').click(function () {
var addnum = $('input#iduser').val();
var addposinfo = $('input#idposinfo').val();
if (addposinfo == '0') {
messageAlert('[ ERROR ]<br>You must completely fill position info field.', 'error');
} else {
var lastrow = ( $('#lastrow').val() ) ? parseInt($('#lastrow').val()) : 1;
var row = parseInt($('#comboqty').val());
var category = $('#combocategory1').val() +'-'+ $('#combocategory2').val();
var description = $('#borrowdesc').val();
addNewRow(row);
console.log(' last row ' + lastrow);
console.log(' total row ' + row);
console.log(' category '+category);
console.log(' description '+description);
for (var i = 1 ; i <= row; i++) {
console.log("index " + i);
$('input#idposinfo').val('');
//fill value "111" and "222" inside <input id="categories[1]"> and <input id="description[1]">
$("input#categories["+lastrow+"]").val("111");
$("input#description["+lastrow+"]").val("222");
lastrow++;
document.getElementById('lastrow').value = lastrow;
console.log("success run bSimpan inside for");
}
console.log("success run bSimpan outside for");
resetForm('formBorrowItem');
$('#formBorrowItem').hide();
//return false;
}
});
but nothing was shown inside the input value
[xxxx] is an attribute selector. If the id has them in the value, you need to escape them as stated in the jQuery documentation.
$("input#categories\\["+lastrow+"\\]");
Try this
$("input#categories\\["+lastrow+"\\]").val("111");
$("input#description\\["+lastrow+"\\]").val("222");
Html code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#bSimpanItem').click(function () {
var iIndex = 0;
$('#tabel-item-borrowed tbody tr').each(function (index) {
iIndex = index + 1
$(this).find("td:eq(0)").find('#categories\\[' + iIndex + '\\]').val('111');
$(this).find("td:eq(1)").find('#description\\[' + iIndex + '\\]').val('22');
});
});
});
</script>
</head>
<body style="width:50%;">
<input type="button" value="bSimpanItem" id="bSimpanItem"/>
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can access the input inside the loop like this:
$('input[id="categories[' + lastrow + ']"]').val("111");
I have table with two buttons to add different rows and I tried this code but it doesn't work.
This is my script code:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i + 1);
newcell.innerHTML = table.rows[1].cells[i + 1].innerHTML;
}
}
<table>
<tbody>
<tr>
<td width="550">
<p><strong>Content</strong>
</p>
</td>
<td width="50">
<p align="center"><strong>CLO</strong>
</p>
</td>
<td width="50">
<p align="center"><strong>PLO</strong>
</p>
</td>
<td width="60">
<p align="center"><strong>Weeks</strong>
</p>
</td>
</tr>
<tr id="module">
<td colspan="4" style="width:710; background-color:#A7B8D4; color:white;">
<p class="modulenum"><strong align="center">MODULE 1</strong>
</p>
</td>
</tr>
<tr>
<td valign="top" width="550">
<p>
<input type="text" value="" maxlength="255" class="textborder" class="table" id="dataTable2" />
</p>
</td>
<td width="50">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall" />
</p>
</td>
<td width="50">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall" />
</p>
</td>
<td width="60">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall" />
</p>
</td>
</tr>
<tr style="border:0px;">
<p>
<input type="button" value="Add row" onclick="addRow1('dataTable2')">
<input type="button" value="Add Module" onclick="addRow1('dataTable2')">
</p>
<br>
<br>
</tr>
</tbody>
</table>
<p> </p>
</td>
</tr>
</tbody>
</table>
I want when user click on Add Module button it will repeat module row and increment its number. But when click on Add row button it's only repeat row with its textboxes.
The issues:
The buttons were calling the wrong function name addRow1 instead of addRow
You were passing an id to the function, but the table didn't have one
I've fixed these, and tidied up the code at https://jsfiddle.net/0L4yy5rr/1/
I did this little modification to your code,, take a look, hope that helps you:
function mirko(tableID){
var table=document.getElementById(tableID)
for(var l = 0; l < 2; l++){
var cl = table.tBodies[0].rows[l].cloneNode(true)
table.tBodies[0].appendChild( cl )
}
}
<a type="button" value="Add row" onclick="mirko('dataTable2');">Add row</a>
<table id="dataTable2">
<thead>
<td width="550">
<p> <strong>Content</strong>
</p>
</td>
<td width="50">
<p align="center"> <strong>CLO</strong>
</p>
</td>
<td width="50">
<p align="center">
<strong>PLO</strong>
</p>
</td>
<td width="60">
<p align="center">
<strong>Weeks</strong>
</p>
</td>
</thead>
<tbody>
<tr id="module">
<td colspan="4" style="width:710; background-color:#A7B8D4; color:white;">
<p class="modulenum">
<strong align="center">MODULE 1</strong>
</p>
</td>
</tr>
<tr>
<td valign="top" width="550">
<p>
<input type="text" value="" maxlength="255" class="textborder" class="table" />
</p>
</td>
<td width="50">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall"/>
</p>
</td>
<td width="50">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall"/>
</p>
</td>
<td width="60">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall"/>
</p>
</td>
</tr>
</tbody>
</table>
I solved my problem but there is another problem in counting module row when user delete module row then add another one it continues counting like user delete module 2 then add module row it must be 2 but add module 3.
<html>
<head>
<style type="text/css">
table {border-collapse:collapse;}
.tf{border-bottom:0;}
</style>
<SCRIPT TYPE="text/javascript">
var num=1;
function addmodule(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
var row1 = document.createElement("TR");
// create table cell 1
var td = document.createElement("TD")
td.setAttribute('colspan',5);
td.bgColor="#A7B8D4";
td.innerHTML = "<label style=\"width:570; background-color:#A7B8D4; color:white;\">"+"Module "+num+"</label>";
row1.appendChild(td);
// add to count variable
num = parseInt(num) + 1;
// append row to table
tbody.appendChild(row1);
}
var count=1;
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
var td1 = document.createElement("TD")
var strHtml1 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textborder\';\">";
td1.innerHTML=strHtml1 ;
var td2 = document.createElement("TD")
var strHtml2 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"30\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">";
td2.innerHTML=strHtml2;
var td3 = document.createElement("TD")
var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">";
td3.innerHTML=strHtml3 ;
var td4 = document.createElement("TD")
var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">";
td4.innerHTML=strHtml4 ;
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
function deleterow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount==1) {return false;
}
else{
table.deleteRow(rowCount -1);
}}
</SCRIPT>
</head>
<body>
<TABLE ID="tbl" width="570" border="1" cellspacing="0" cellpadding="0" align="center" class="st">
<TH WIDTH="400">Content</TH><TH WIDTH="57">CLO</TH><TH WIDTH="57">PLO</TH> <TH WIDTH="56">Week</TH>
<p align="center">
<input type="button" onClick="addmodule('tbl')" VALUE="Add Module">
<INPUT TYPE="Button" onClick="addRow('tbl')" VALUE="Add Row">
<INPUT TYPE="Button" onClick="deleterow('tbl')" VALUE="delete Row"> </p>
</TABLE>
</body>
</html>
This is my code so far:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<p>
<br />
<input onclick="addtext();" type="button" value="Strip HTML Formatting" />
</p>
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</tbody>
</table>
</form>
Now I want to add a button that clears the two textareas.
Where should I be putting the JavaScript for that, and what should it say?
You can use the reset type attribute:
<input type="reset" value="Reset" />
Code snippet:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input type="reset" value="Reset" />
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This resets all form values to their default values.
If you have other textareas besides these and you only want to empty these two, you should create another button that links to a function that empties the values:
HTML:
<input onclick="emptyText()" type="button" value="Clear fields" />
JS:
function emptyText() {
document.myform.inputtext.value = "";
document.myform.outputtext.value = "";
}
Demo on Fiddle
HTML:
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>
<textarea name="inputtext"></textarea>
</td>
<td>
<p>
<br />
<input type="button" value="Strip HTML Formatting" />
</p>
</td>
<td>
<textarea name="inputtext" readonly></textarea>
</td>
</tr>
<tr>
<td>
<button>Empty</button>
</td>
</tr>
</tbody>
</table>
JavaScript:
var removeBtn = document.getElementsByTagName('button')[0];
var copyBtn = document.querySelector('input[type="button"]');
copyBtn.onclick = function () {
var inpt = document.getElementsByTagName('textarea')[0].value;
document.getElementsByTagName('textarea')[1].value = inpt;
}
removeBtn.onclick = function () {
document.getElementsByTagName('textarea')[0].value = "";
document.getElementsByTagName('textarea')[1].value = "";
}
OPTION 1:
Use a reset type input-button:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input type="reset" value="Clear fields" /> <!--THIS LINE-->
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This resets all form values to their default values.
OPTION 2:
If you have other textareas besides these and you only want to empty these two, you should create another button that links to a function that empties the values:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
function clearFields() {
document.myform.inputtext.value = "";
document.myform.outputtext.value = "";
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input onclick="clearFields()" type="button" value="Clear fields" /> <!--THIS LINE-->
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This literally sets the values of the two textareas to 'empty'.