如何从next()获取输入值

时间:2018-10-23 07:19:08

标签: javascript jquery html jquery-selectors

我需要从输入中检索数据,但是ID是动态的。我只知道该字段的先前名称,在我的代码段中是登录密码。 这是我尝试过的:

console.log($( "td:contains('Login')").next('input').val());
console.log($( "td:contains('Login')").next('td > input').val());
console.log($( "td:contains('Login')").next('tr > td > input').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td class="fieldlabel" width="20%" style="color: rgb(255, 0, 0);">Login</td>
    <td class="fieldarea" colspan="3">
        <input type="text" name="customfield[52]" id="customfield52" value="Somelogin" size="30" class="form-control">
    </td>
</tr>

<tr>
    <td class="fieldlabel" width="20%">Password</td>
    <td class="fieldarea" colspan="3">
        <input type="text" name="customfield[53]" id="customfield53" value="Somepass" size="30" class="form-control">
    </td>
</tr>

如何获取两个输入的值?

编辑

我有一个与此主题有关的新问题。

我现在有了第二个输入字段(密码和登录名)。如何获得第二个输入值。在我的情况下,这是我得到的第一个输入。

var password_user = $( "tr:nth-child(2) > td:contains('Password')").next('td').find('input').val();
console.log(password_user);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form" width="100%" border="0" cellspacing="2" cellpadding="3">
   <tbody>
      <tr>
         <td class="fieldlabel" width="20%">Order #</td>
         <td class="fieldarea" width="30%">1 - <a href="#">View Order</a></td>
         <td class="fieldlabel" width="20%">Registration Date</td>
         <td class="fieldarea" width="30%"><input type="text" name="regdate" value="22/01/2011" size="12" class="form-control date-picker hasDatepicker" id="dp1540302344931"></td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Product/Service</td>
         <td class="fieldarea" width="30%">
            <input type="hidden" name="oldpackageid" value="70">
            <select name="packageid" class="form-control select-inline-long">
               <optgroup label="lbl">
                  <option value="86">TEST1</option>
                  <option value="87">TEST2</option>
               </optgroup>
            </select>
         </td>
         <td class="fieldlabel" width="20%">First Payment Amount</td>
         <td class="fieldarea" width="30%"><input type="text" name="firstpaymentamount" value="10" size="10" class="form-control input-100"></td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Server</td>
         <td class="fieldarea" width="30%">
            <select name="server" class="form-control select-inline">
               <option value="232">TEST2</option>
               <option value="234">TEST1</option>
            </select>
         </td>
         <td class="fieldlabel" width="20%">Recurring Amount</td>
         <td class="fieldarea" width="30%"><input type="text" name="amount" value="10" size="10" class="form-control input-100 input-inline"> <label class="checkbox-inline"><input type="checkbox" name="autorecalcrecurringprice" value="1"> Auto Recalculate on Save</label></td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Domain</td>
         <td class="fieldarea" width="30%">
            <div class="input-group input-300">
               <input type="text" name="domain" value="test" class="form-control">
               <div class="input-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:-3px;">
                  <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right">
                     <li><a href="http://test.com" target="_blank">www</a></li>
                     <li><a href="#">whois</a></li>
                     <li><a href="#" target="_blank">intoDNS</a></li>
                  </ul>
               </div>
            </div>
         </td>
         <td class="fieldlabel" width="20%">Next Due Date</td>
         <td class="fieldarea" width="30%"><input type="hidden" name="oldnextduedate" value="22/07/2019"><input type="text" name="nextduedate" value="22/07/2019" size="12" class="form-control date-picker hasDatepicker" id="17852"></td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Dedicated IP</td>
         <td class="fieldarea" width="30%"><input type="text" name="dedicatedip" value="789456" size="25" class="form-control input-200"></td>
         <td class="fieldlabel" width="20%">Termination Date</td>
         <td class="fieldarea" width="30%"><input type="text" name="termination_date" value="" size="12" class="form-control date-picker hasDatepicker" id="12545412"></td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Username</td>
         <td class="fieldarea" width="30%"><input type="text" name="username" value="testUser" size="20" class="form-control input-200 input-inline"> </td>
         <td class="fieldlabel" width="20%">Billing Cycle</td>
         <td class="fieldarea" width="30%">
            <select name="billingcycle" class="form-control select-inline">
               <option value="Free Account">Free</option>
               <option value="One Time">One Time</option>
               <option value="Monthly">Monthly</option>
               <option value="Quarterly" selected="">Quarterly</option>
               <option value="Semi-Annually">Semi-Annually</option>
               <option value="Annually">Annually</option>
               <option value="Biennially">Biennially</option>
               <option value="Triennially">Triennially</option>
            </select>
         </td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Password</td>
         <td class="fieldarea" width="30%"><input type="text" name="password" value="Pass" size="20" class="form-control input-200"></td>
         <td class="fieldlabel" width="20%">Payment Method</td>
         <td class="fieldarea" width="30%">
            <select name="paymentmethod" class="form-control select-inline">
               <option value="paypal" selected="">PayPal</option>
            </select>
            <a href="#">View Invoices</a>
         </td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Status</td>
         <td class="fieldarea" width="30%">
            <select name="domainstatus" class="form-control select-inline" id="prodstatus">
               <option value="Pending">Pending</option>
               <option value="Active" selected="">Active</option>
               <option value="Completed">Completed</option>
               <option value="Suspended">Suspended</option>
               <option value="Terminated">Terminated</option>
               <option value="Cancelled">Cancelled</option>
               <option value="Fraud">Fraud</option>
            </select>
         </td>
         <td class="fieldlabel" width="20%">Promotion Code</td>
         <td class="fieldarea" width="30%">
            <select name="promoid" class="form-control select-inline">
               <option value="0">None</option>
               <option value="463">CODETEST - 40.00% One Time</option>
            </select>
            <br>(Change will not affect price)
         </td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Module Commands</td>
         <td class="fieldarea" colspan="3">
            <div id="modcmdbtns">
                <button style="margin-left:4px;" id="diagnostic_btn_Custom" class="btn btn-default" data-toggle="modal" data-target="#diagnosticModal">Diagnostic</button>
               <div class="modal fade" id="diagnosticModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
                  <div class="modal-dialog" role="document">
                     <div class="modal-content">
                        <div class="modal-header">
                           <h5 class="modal-title" id="exampleModalLabel">Diagnostic</h5>
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body">
                           <div style="margin-left:5px;" class="row">Transmission: <span style="display: none;" id="loader_transmission"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="transmission_res" style="color: rgb(46, 204, 64);">✔</span></div>
                           <div style="margin-left:5px;" class="row">FTP: <span style="display: none;" id="loader_ftp"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="ftp_res" style="color: rgb(255, 65, 54);"></span></div>
                           <div style="margin-left:5px;" class="row">Nextcloud: <span style="display: none;" id="nextcloud_loader"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="nextcloud_res" style="color: rgb(255, 65, 54);"></span></div>
                           <div style="margin-left:5px;" class="row">Coffre-fort: <span style="display: none;" id="loader_coffre"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="coffre_res" style="color: rgb(255, 65, 54);"></span></div>
                        </div>
                        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button></div>
                     </div>
                  </div>
               </div>
               
            </div>
            <div id="modcmdworking" style="display:none;text-align:center;"><img src="images/loader.gif"> &nbsp; Working...</div>
         </td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Addons</td>
         <td class="fieldarea" colspan="3">
            <div class="tablebg">
               <table id="sortabletbl1" class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
                  <tbody>
                     <tr>
                        <th>Reg Date</th>
                        <th>Name</th>
                        <th>Pricing</th>
                        <th>Status</th>
                        <th>Next Due Date</th>
                        <th width="20"></th>
                        <th width="20"></th>
                     </tr>
                     <tr>
                        <td colspan="7">No Records Found</td>
                     </tr>
                  </tbody>
               </table>
            </div>

         </td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Login</td>
         <td class="fieldarea" colspan="3"><input type="text" value="GETTHISVALUE" size="30" class="form-control"></td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Password</td>
         <td class="fieldarea" colspan="3"><input type="text" value="GETTHISVALUE" size="30" class="form-control"></td>
      </tr>
      <tr>
         <td class="fieldlabel" width="20%">Subscription ID</td>
         <td class="fieldarea" colspan="3">
            <div class="input-group input-500" id="subscription">
               <input type="text" name="subscriptionid" value="I-123" size="25" class="form-control">
               <span class="input-group-btn">
               <button type="button" class="btn btn-default"  id="btnCancel_Subscription" style="margin-left:-3px;">
               Cancel Subscription
               </button>
               </span>
            </div>
            <div id="subscriptionworking" style="display:none;text-align:center;"><img src="images/loader.gif">&nbsp; Working...</div>
         </td>
      </tr>

      <tr></tr>
   </tbody>
</table>

3 个答案:

答案 0 :(得分:3)

您的代码有两个问题。

1- <tr>应该包裹在<table>中才是有效的html。

2-{{​​1}}不是input之后的下一个元素。您应该先获得下一个td,然后在其中选择td

input
console.log($("td:contains('Login')").next('td').find('input').val());

答案 1 :(得分:1)

首先不要使用文本作为区分符。在Element上设置一个ID会更有效。如果可以的话,只需将类别设置为两个输入并按类别选择它们。而且更清洁,更有效。

如果您正在抓屏并且无法更改html代码,那么我建议您选择所有相关的`````并在代码中对其进行循环。在那里,您可以使用更好的工具。例如。

$("tr")
.toArray()
.filter((el) => /Login|Password/.exec($(el).text()) !== null)
.map((el) => el.querySelector("input"));

祝你好运!

答案 2 :(得分:0)

您可以为要获取其值的所有输入元素分配通用的类名。

检查以下代码。

$(".data").each(function(k,v){console.log($(v).val())})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>	
	<tr>
    <td class="fieldlabel" width="20%" style="color: rgb(255, 0, 0);">Login</td>
    <td class="fieldarea" colspan="3">
        <input type="text" name="customfield[52]" id="customfield52" value="Somelogin" size="30" class="form-control data">
    </td>
	</tr>

	<tr>
		<td class="fieldlabel" width="20%">Password</td>
		<td class="fieldarea" colspan="3">
			<input type="text" name="customfield[53]" id="customfield53" value="Somepass" size="30" class="form-control data">
		</td>
	</tr>
</table>