Develop Reference

How i can show rows that have inputed value in new table? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
This is my table :
<table id="products">
<thead>
<tr>
<th>name</th>
<th>quantity</th>
</tr>
</thead>
{% for pr in productlist %}
<tbody id="t1" class="tbody">
<tr class="test" data-index="pr.productid" style="border: none; border-collapse: collapse;">
<td>
{{ pr.productname }}
</td>
<td>
<input class="prqty" id="prinp" type="number" placeholder="0" max="pr.numberqut" min="0" name="mylist">
</td>
</tr>
</tbody>
{% endfor %}
</table>
and this is result:
Here i append to new table:
<table id="here"></table>
<script>
$('#here').html($('#products').clone().attr('id', 'newproducts'));
</script>
My problem is that i don't know how can filters rows that have input value.
i want this:
Thanks for any help.

You can select all .test rows, convert to an array, and use Array#filter along with querySelector to check whether the first input's value is 0 (or greater than).
const valid = $('.test').toArray().filter(e => e.querySelector('input').value != "0");
console.log(valid);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>name</th>
<th>quantity</th>
</tr>
</thead>
<tbody id="t1" class="tbody">
<tr class="test" data-index="pr.productid" style="border: none; border-collapse: collapse;">
<td>
{{ pr.productname }}
</td>
<td>
<input class="prqty" type="number" placeholder="0" max="pr.numberqut" min="0" name="mylist" value="0">
</td>
</tr>
<tr class="test" data-index="pr.productid" style="border: none; border-collapse: collapse;">
<td>
{{ pr.productname }}
</td>
<td>
<input class="prqty" type="number" placeholder="0" max="pr.numberqut" min="0" name="mylist" value="1">
</td>
</tr>
</tbody>
</table>
Filter demo:
$('button').click(function() {
const valid = $('.test').clone().toArray().filter(e => e.querySelector('input').value != "0");
valid.forEach(e => $('#here').append(e));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>name</th>
<th>quantity</th>
</tr>
</thead>
<tbody id="t1" class="tbody">
<tr class="test" data-index="pr.productid" style="border: none; border-collapse: collapse;">
<td>
{{ pr.productname }}
</td>
<td>
<input class="prqty" type="number" placeholder="0" max="pr.numberqut" min="0" name="mylist" value="0">
</td>
</tr>
<tr class="test" data-index="pr.productid" style="border: none; border-collapse: collapse;">
<td>
{{ pr.productname }}
</td>
<td>
<input class="prqty" type="number" placeholder="0" max="pr.numberqut" min="0" name="mylist" value="1">
</td>
</tr>
</tbody>
</table>
<button>Filter</button>
<table id="here"></table>

Input field to the next line with CSS or JavaScript without altering the HTML

I'm working on a Survey and on the system that I work I don't have access to change the HTML directly but I can add CSS or JavaScript to the existing code.
I have the following HTML and I would like the input field to be right underneath the first name. I can only use the ID's as the classes are the same in many other fields that I don't want changing them. I'm a bit stack so if anyone has an idea I would really appreciate..Thanks!
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>

Please check if this helps you to achieve the desired style
td.pd_label ~ td {
float: left;
position: absolute;
left: 7px;
margin-top: 1em;
}
The same selector (td.pd_label ~ td) works in JavaScript also.

You can use the + selector
#pnlPersonalDetails2 + .surveyquestions td {
display:block;
}
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
<div id="someId"></div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>

Table not aligning within my div and wider than I set it

I am trying to get the mortgage calculator on the right side of the website to fit in the box (div) that is supposed to be around it. You can see that it is overlapping.
Webpage: http://www.yourwhiteknight.com/properties/
As you can see from the code below, the width of the table is set in the table attribute (width="") and in CSS code but it is not obeying these rules. How can I force this table to be smaller?
Code:
<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Javascript function is here but no reference to width -->
<form id="mortgageCalculator">
<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248">
<tbody><tr style="background-color: #496b1f; font-size:11px;">
<td colspan="2" align="CENTER">
<b><font color="white">Mortgage Calculator</font></b>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="1">
<tbody><tr>
<td colspan="2"><b>Mortgage Data:</b>
</td>
</tr><tr>
<td align="RIGHT">House Price ($):
</td>
<td>
<input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV
Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
</td>
</tr>
<tr>
<td align="RIGHT">Down Pymt ($):</td>
<td>
<input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)">
</td>
</tr>
<tr>
<td align="right">Principal ($):</td>
<td>
<input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;">
</td>
</tr>
<tr>
<td align="RIGHT">Annual Int. Rate (%):</td>
<td>
<input type="TEXT" name="interest" value="8.5" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Term (Months):</td>
<td>
<input type="TEXT" name="term" value="120" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Monthly Pymt:</td>
<td>
<input type="TEXT" name="monthlyPayment" size="5">
</td>
</tr><tr>
<td align="RIGHT">Balloon Pymt:</td>
<td>
<input type="TEXT" name="balloon" size="5">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="CENTER" colspan="2">
<input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)">
</td>
</tr>
</tbody></table>
</form></div>

The table will only get as small as the content within it. Your text inputs in the calculator are large enough that they're limiting how small the table is. Set a smaller width on those inputs, and it should be all good!

the problem is within the table, with the inputs there. You can add a " width: 100%;" to the inputs and the problem is solved.
You can add the css like this:
#mortgageCalculator input {
width: 100%;
}

Javascript code is not working in wordpress site

Hi i have created a javascript code that works very well.But when i have copy that code on wordpress pages then that code stops working.I don't know why it stops working.
I am new to wordpress but i have good experience in javacript.Please tell me why code is not working on wordpress pages?
Here is code:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How Much $$$ Are You Losing</title>
</head>
<script type="text/javascript">// <![CDATA[
function doCalc() {}
function doCalc1() {}
function doCalc2() {}
function quanBlur(quan) {
var result = quan / document.form1.newOrdQuan.value * 100;
document.form1.pctmissed.value = result.toFixed(0) + '%';
doCalc();
}
function pctBlur(pct) {
var pct1 = +pct.replace(/\D/g, '');
//document.form1.pctmissed.value=pct1.toFixed(0)+'%';
var result = document.form1.newOrdQuan.value * pct1 / 100;
document.form1.quanmissed.value = result.toFixed(0);
doCalc();
}
window.onload = function () {
document.getElementById("prevOrdQuan").focus();
}
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('newOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
function showstep5() {
// alert('test');
document.getElementById('step5').style.visibility = 'visible';
document.getElementsById('avgProfitPerOrder').focus(); // 'avgProfitPerOrder').focus();
}
function showstep6() {
// alert('test');
document.getElementById('Step6').style.visibility = 'visible';
//document.getElementsById('avgProfitPerOrder').focus(); // 'avgProfitPerOrder').focus();
}
function showstep9() {
document.getElementById('step9').style.visibility = 'visible';
document.getElementById('avgProfitPerOrder').focus();
}
// ]]></script>
<table style="width: 270px; border: 2px navy solid;">
<tbody>
<tr>
<td><form name="form1">
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur="doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td>
<input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
<table id="step4" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Many Times a Week do You Comp an Order? (5% expected)</td>
<td><input tabindex="4" type="text" name="compsPerWeek" id="compsPerWeek" size="6" value="1" onblur="doCalc(); showstep9();" /></td>
</tr>
</tbody>
</table>
<table id="step9" style="width: 100%; visibility: hidden; color: green;" align="left">
<tbody>
<tr>
<td>What's Your Average Profit Per Order? (30% Expected)</td>
<td>
<input tabindex="4" type="text" name="avgProfitPerOrder" id="avgProfitPerOrder" size="6" value="6.00" onblur="doCalc();showstep6();" /></td>
</tr>
</tbody>
</table>
<td><input type="text" tabindex="5" name="avgProfitPerOrder" id="avgProfitPerOrder"
<table id="Step6" style="width: 100%; visibility: hidden; color: green;" align="left">
<tbody>
<tr>
<td class="style1" height="7"></td>
<td class="style1" height="7"></td>
</tr>
<tr>
<td style="color: red;">This is how much money ($$) you are losing each month from TakeOut Orders you Didn't Get...</td>
<td id="monLostRev" style="color: red; font-weight: 900;" align="right">640</td>
</tr>
<tr>
<td style="font-weight: bold;">This is how much PROFIT ($$) you can gain each month with our system</td>
<td id="monrecoveredrev" style="font-weight: 900; text-decoration: underline;" align="right">192.00</td>
</tr>
<tr>
<td>Monthly cost of our system</td>
<td id="montextcost" align="right">-47</td>
</tr>
<tr>
<td>Monthly cost of Credit Card Fees</td>
<td id="monCcCost" align="right">19.20</td>
</tr>
<tr>
<td>Monthly Income Increase ($$) you get using our system</td>
<td id="monroi" style="font-weight: 900; text-decoration: underline;" align="right">125</td>
</tr>
</tbody>
</table>
</form></td>
</tr>
</tbody>
</table>
This code only create problem on wordpress pages.

You can't add the Javascript directly to the WordPress editor page, if that's what you mean by copying the code on the WordPress pages. You have to add it to the single.php page file, which you can access through Appearance-->Editor

Get value from td when button is clicked.

This is a part of my JSP code:
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;"><%=i++%></td>
<td id="leaveID" class="leavehistory" style="width: 9%;"><%=rs.getString(7)%></td>
<td class="leavehistory" style="width: 12%;"><%=rs.getTimestamp(1)%></td>
<td class="leavehistory" style="width: 10%;"><%=rs.getInt(2)%> days</td>
<td class="leavehistory" style="width: 15%;"><%=rs.getString(3)%> - <%=rs.getString(4)%></td>
<td class="leavehistory" style="width: 15%;"><%=rs.getString(5)%></td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
<% } %>
This is how 2 rows of the generated HTML output look like:
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;">1</td>
<td id="leaveID" class="leavehistory" style="width: 9%;">LE000002</td>
<td class="leavehistory" style="width: 12%;">2012-01-17 19:31:18.0</td>
<td class="leavehistory" style="width: 10%;">2 days</td>
<td class="leavehistory" style="width: 15%;">18/01/2012 - 19/01/2012</td>
<td class="leavehistory" style="width: 15%;">Sick</td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;">2</td>
<td id="leaveID" class="leavehistory" style="width: 9%;">LE000003</td>
<td class="leavehistory" style="width: 12%;">2012-01-18 03:04:15.0</td>
<td class="leavehistory" style="width: 10%;">1 days</td>
<td class="leavehistory" style="width: 15%;">19/01/2012 - 20/01/2012</td>
<td class="leavehistory" style="width: 15%;">Sick</td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
These 2 rows of data are retrieved from database. For each row there is one View and Change button. If I click on the Change button for the LE000001's row, then I will get the value - "LE000001". Then I can use the value to update the status of leave record.
If I click on the Change button for the LE000002's row, then I will get the value - "LE000002". Since there are only 2 rows shown.
It can be as many as possible if the database has more records. Is there any way to get the value?

First of all, your HTML is invalid, because you have several elements with the same leaveID ID.
Now to answer your question, why don't you simply make your JS functions take the ID of the row as argument:
onClick="cancelSub('LE000001');"
and thus to generate it:
onClick="cancelSub('<%= rs.getString(7) %>');"
That said, using scriptlets and accessing JDBC resultsets from a JSP shows a lack of proper MVC architecture. Read How to avoid Java code in JSP files?