使用jquery在html表中选择input元素的值

时间:2018-05-29 06:25:49

标签: javascript jquery html

我有一个包含n行和4列的html表。在每行td内,我有2个子元素 - labelinput。我希望在第inputtd下发生onblur事件时检查inputtd下的input值。

我希望在第3 td下的输入发生onblur时,提醒tdsum_cr()下的值{ie; headers =“ACNO”(即; headers =“CREDIT”)。所以我将下面的javascript函数function sum_cr() { alert('Hi'); alert($(pThis).parent().eq(2).children('accno').val()); }写成

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>
unique()

但是我的javascript代码失败了。任何人都可以帮助我获得价值吗?

JSfiddle:https://jsfiddle.net/nidheeshmtr/nmku2gq1/4/

5 个答案:

答案 0 :(得分:1)

function sum_cr(ele) {

  alert('Hi')
  alert('using prev(): '+$(ele).parent('td').prev('td').find('input').val());
  //or you can use below for input value under 2nd td element
  alert('using nth-child(): '+$('tr td:nth-child(2)').find('input').val());
  //if you know attributes of TD tag, u can use below
  alert('using attribute selector: '+$('td[headers="ACNO"]').find('input').val());
  //by using siblings, get the parent 2nd sibling
  alert('using siblings(): '+$(ele).parent().siblings(':nth-child(2)').find('input').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>

答案 1 :(得分:1)

您的选择器无效。您必须在函数调用中传递.htaccess。请尝试以下方式:

RewriteEngine On    # Turn on the rewriting engine
RewriteRule ^test$ /sample/example/test.php [L] # Handle requests for "test"
import matplotlib.pyplot as plt
ax = df.plot(kind='bar', title ="Accuracy distribution", figsize=(15, 10), legend=True, fontsize=12)
for p in ax.patches:
    ax.annotate(str(p.get_height()), (p.get_x() * 1.005, p.get_height() * 1.005))
plt.show()
this

答案 2 :(得分:1)

The context is not valid...
Pass the 'this' context from html code to the sum_cr() method as a parameter and define the method as follows.

function sum_cr(that) {
  alert($(that).parent('td').prev('td').find('input').val());
}

答案 3 :(得分:1)

&#13;
&#13;
function sum_cr(ele) {

 alert($('tr td:nth-child(2) input').val());
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

您可以为每个输入定义ID,然后根据需要获取其值

&#13;
&#13;
function sum_cr() {
var elem = $('#xyz').val();
  alert(elem);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input id="xyz" name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

检查这是否有帮助?