使用jQuery动态设置输入值

时间:2019-10-14 10:54:39

标签: javascript jquery

我有一个包含数据和输入字段的电子表格。

当输入字段为空时,应从类“ shipdate”的行中单击复制文本按钮。我总是在代码中复制条目。谁能告诉我我错了。

这是我的代码

$(".btn-yes").click(function() {
  var $val = $(document).find('.date');
  $('.date').each(function() {
    var $val = $(this).val();
    if ($val === "") {
      $('tr').each(function() {
        var $this = $(this),
          daata = $this.find('td.shipdate').html();
        $this.find('input').val(anData);
      })

    } else(
      console.log("empty")
    )
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table>
    <thead>
      <tr>
        <th>Example1</th>
        <th>Example2</th>
        <th>Example3</th>
        <th>Example4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button class="btn-yes">
    Click here
    </button>
  </div>
</div>

1 个答案:

答案 0 :(得分:5)

您可能是这个意思。请注意,我必须修剪并删除发货日期中的尾随点

如果shipdate单元格包含不带尾点的日期,则可以删除.slice(0,-1)

您也可以将$(this).parent().next().text()随意更改为$(this).closest("tr").find(".shipdate").text() 如果您想移动单元格

$(".btn-yes").click(function() {
  $('.date').each(function() {
    var $val = $(this).val();
    var shipdate = $.trim($(this).parent().next().text()).slice(0,-1) 
    $(this).val($val === "" ? shipdate : $val)
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table>
    <thead>
      <tr>
        <th>Example1</th>
        <th>Example2</th>
        <th>Example3</th>
        <th>Example4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button class="btn-yes">
    Click here
    </button>
  </div>
</div>

相关问题