Facing difficulty to inline edit - javascript

I want to create a table where rows will be editable by inline. Tables are created using HTML and data are fetch from database. But can't do inline edit total row and after edit save to database.
<table width="50%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3">Action</td>
<td>id</td>
<td>userName</td>
<td>Address</td>
<td>Role</td>
<td>Active</td>
</tr>
<tr>
<td>Edit</td>
<td>InlineEdit</td>
<td>delete</td>
<td>1</td>
<td>apache</td>
<td>los angeles</td>
<td>user</td>
<td>y</td>
</tr>
</table>
In second row all data are collect from database. Please help me to solve the difficulty.


Write input tags in between the <td> and assign your php variable to value attribute.
<table width="50%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3"><input type="text" value="Action"/></td>
<td><input type="text" value="id"/></td>
<td><input type="text" value="Username"/></td>
<td><input type="text" value="Address"/></td>
<td><input type="text" value="Role"/></td>
<td><input type="text" value="Active"/></td>
</tr>
</table>

Related

javascript get/store data from table

I'm trying to catch the data based on the id's after clicking the button (like store them) in order to use it for inserting needed id's afterwards into the DB. The js written is not working as expected, any ideas what is missing? Thank you for the support.
<script>
function goo() {
idprod=$("#idprod").val();
nprod=$("#nprod").val();
lastprod=$("#lastprod").val();
solarprod=$("#solarprod").val();
locprod=$("#locprod").val()
}
</script>
<form name="goo" method="post">
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Lastname</th>
<th>WK_Solar</th>
<th>Location</th>
<th>Save</th>
</tr>
<tr>
<td id="idprod">P1</td>
<td id="nprod">James</td>
<td id="lastprod">Lee</td>
<td id="solarprod">$1555</td>
<td id="locprod">Queens</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
<tr>
<td id="idprod">P2</td>
<td id="nprod">Marc</td>
<td id="lastprod">Hoobs</td>
<td id="solarprod">$955</td>
<td id="locprod">Bronx</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
</table>
</form>

1- You are using val which is the attr Value. you should use html() or text() to get the value.
2- You have two rows, you should browse those two rows and get the data from each row
function goo() {
var firstRow = $(".test tbody tr").last();
idprod=firstRow.find("#idprod").html();
nprod=firstRow.find("#nprod").html();
lastprod=firstRow.find("#lastprod").html();
solarprod=firstRow.find("#solarprod").html();
locprod=firstRow.find("#locprod").html()
console.log(idprod)
}
$(document).ready(function(){
goo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="goo" method="post">
<table border="1" class="test">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Lastname</th>
<th>WK_Solar</th>
<th>Location</th>
<th>Save</th>
</tr>
</thead>
<tr>
<td id="idprod">P1</td>
<td id="nprod">James</td>
<td id="lastprod">Lee</td>
<td id="solarprod">$1555</td>
<td id="locprod">Queens</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
<tr>
<td id="idprod">P2</td>
<td id="nprod">Marc</td>
<td id="lastprod">Hoobs</td>
<td id="solarprod">$955</td>
<td id="locprod">Bronx</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
</table>
</form>

Vue - Add elements outside of the loop

I am looping over a table row, but each of the table rows should have another table row attached to it in which other data from the loop should appear. I am unable to somehow insert
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
after each looped row. I tried also just looping those elements for themselves as well, but they just get stacked after the first row's loop has produced all it's children, so the attached tr just gets stacked under the last one of the first loop's children.
Is there any way to overcome this? I really need to use a table for this.
<table>
<tr>
<th>Photo</th>
<th>First name</th>
<th>Last name</th>
<th>Username</th>
<th>Email</th>
<th>Phone number</th>
<th>Class</th>
<th>Subjects</th>
<th>Classes</th>
<th>Operation</th>
</tr>
<tr v-for="(teacher, i) in teachers" :key="i">
<td><img id="profilePhoto" src="../../../assets/default_pic/user_green.svg" alt="profile-photo"></td>
<td><input type="text" v-model="teacher.firstName"></td>
<td><input type="text" v-model="teacher.lastName"></td>
<td><input type="text" v-model="teacher.username"></td>
<td><input type="text" v-model="teacher.email"></td>
<td><input type="text" v-model="teacher.phoneNumber"></td>
<td><span>F12</span></td>
<td><span></span></td>
<td><span></span></td>
<td></td>
</tr>
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
</table>

Added fixes to the above code. Try this one
<table>
<thead>
<tr>
<th>Photo</th>
<th>First name</th>
<th>Last name</th>
<th>Username</th>
<th>Email</th>
<th>Phone number</th>
<th>Class</th>
<th>Subjects</th>
<th>Classes</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<template v-for="(teacher, i) in teachers" :key="i">
<tr>
<td><img id="profilePhoto" src="../../../assets/default_pic/user_green.svg" alt="profile-photo"></td>
<td><input type="text" v-model="teacher.firstName"></td>
<td><input type="text" v-model="teacher.lastName"></td>
<td><input type="text" v-model="teacher.username"></td>
<td><input type="text" v-model="teacher.email"></td>
<td><input type="text" v-model="teacher.phoneNumber"></td>
<td><span>F12</span></td>
<td><span></span></td>
<td><span></span></td>
<td></td>
</tr>
</template>
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
</tbody>
</table>

Get the value of a column entered by the user

<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" /></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" /></td>
</tr>
</table>
</form>
I have this table and now I want to get the value of each of input type. how do I get it.
I've tried:
document.getElementById("ResultSheet").rows[2].cells.item(0).innerHTML);
But it did not return anything.

You could use querySelectorAll() like :
document.querySelectorAll('#ResultSheet input');
The loop through the result like the snippet below shown.
Hope this helps.
var inputs = document.querySelectorAll('#ResultSheet input');
for(var i=0;i<inputs.length;i++){
console.log(inputs[i].value);
}
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" value="1"/></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" value="2"/></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" value="3"/></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" value="4"/></td>
</tr>
</table>
</form>

Use <form> property elements: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
Example: https://jsfiddle.net/8co9v0ye/

Unable to get Updated html in div

I am having a function in Javascript which is updating the textbox in the div to get updated html of div but it gives me blank value instead of updated one, Is anybody having idea why? Initialy the div is blank as below, and then I
<div id="editSeriesData">
<table cellpadding="5" cellspacing="0" width="400px">
<tr>
<td class="tableCell">
<table cellpadding="5" cellspacing="0">
<tr>
<td>Series</td>
<td><input type="text" value="" name="seriesid" id="seriesid" readonly /></td>
</tr>
<tr>
<td>Name</td>
<td width="30%"><input type="text" name="seriesname" id="seriesname" value="" /></td>
</tr>
<tr valign="top">
<td>Description</td>
<td><textarea rows="5" cols="50" name="description" id="description"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="submit" id="submit" value="Submit" onclick="javascript:validateFrm();" class="text ui-widget-content ui-corner-all" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
And my Javascript method is:
function addEditSeries(seriesId){
document.getElementById('seriesid').value=seriesId;
document.getElementById('seriesname').value="dummy";
document.getElementById('description').value="dummy";
setTimeout(function(){
alert($('#editSeriesData').html());
showwindow('','','280','500','Product-Pack Series',true, true,$('#editSeriesData').html());
}, 1000);
}
The alert() shows me whole div but without the updated value which I updated in addEditSeries() method. The value of the input fields remain as default.

JQuery TableSorter click actions have no effect

I must be doing something stupidly wrong, but I'm not seeing it. On my site, I attach the JQuery TableSorter to a table and hope to have some sorting done, but clicks have no effect. No sorting happens. It just remains as a static table.
Here's a simplified JSFiddle of the problem I'm having:
http://jsfiddle.net/96AEE/3/
It's a very simple table with javascript as follows:
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<td>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</td>
<td>Gift Cert</td>
<td>Note</td>
<td>Order #</td>
<td>Order Date</td>
<td>Amount</td>
<td>Redeemed</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
</td>
<td>443ss</td>
<td>(1d10t) Arizona Tea</td>
<td>-</td>
<td>-</td>
<td>$50.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
</td>
<td>199e</td>
<td>(#9000) Over</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
Is there something obvious I'm missing?

This is due to your markup on the HTML table.
Within the thead element, you need to use th tags instead of td.
<thead>
<tr>
<th></th>
...
</tr>
</thead>
Working JSfiddle:
http://jsfiddle.net/bybFK/

Try changing your header row to use <th> tags instead of <td> tags.

You are definitely neglecting something, when creating the header of your table; your are using <td> instead of using <th>
you also do not need to assign the class tablesorter to your table
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<th>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</th>
<th>Gift Cert</th>
<th>Note</th>
<th>Order #</th>
<th>Order Date</th>
<th>Amount</th>
<th>Redeemed</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$("#gift_certificates").tablesorter();
});
http://tablesorter.com/docs/

Categories

Resources