javascript - 如何从 next() 获取输入值

标签 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>

最佳答案

您的代码有两个问题。

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

2- input不是 td 之后的下一个元素。你应该得到下一个 td首先,然后选择input就在其中。

console.log($("td:contains('Login')").next('td').find('input').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">
    </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>
</table>

关于javascript - 如何从 next() 获取输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52943258/

相关文章:

javascript - 如何让文本区域识别 AngularJS 中的新行?

javascript - ASP/Javascript 开源 Web 图像调整器

php - 验证两个第 3 方之间的 PayPal 捐赠

javascript - 使用 jQuery 在 Mousehoever 和 mouseout 上调用 javascript 函数

html - 在幻灯片中将 div 与 onclick 重叠 -> onclick 不会改变

javascript - For 循环以自己的格式转换 ISO 日期,混淆了一些东西

javascript - Galleria - IE8 中的 imagePosition 问题 (galleria.aino.se)

javascript - 为什么这个对象没有被正确解析?

javascript - HTML - 为 <div> 中的 <div> 复制和应用唯一 ID

javascript - 将 javascript 变量传递给 Twig