使用jQuery

Question

这是我的代码，如下所示。此处显示日期时间字符串和关闭按钮。当我点击关闭按钮时，它会删除关注行。但在删除之前我需要变量中的日期。

＆＃13;

＆＃13;

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr #newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.closest()找到最近的父元素，#newdate不是.removebutton元素的父元素。您需要最接近的tr，在这种情况下是.removebutton的父级，然后找到与#newdate位于同一tr下的.removebutton元素。

附加点 ID必须是唯一的。因此，不要使用相同的ID，最好有类。

<强> SOLUTION：

＆＃13;

＆＃13;

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr').find('.newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

按班级更改ID。我很独特。在Closest（）之后使用find。

＆＃13;

＆＃13;

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr').find('.newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用$(this).closest('tr').find('#newdate').val()

检查以下代码：

＆＃13;

＆＃13;

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr').find('#newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你有两个问题：

1）HTML ID必须是唯一的，因此永远无法找到您的第二个“newdate”元素 - JavaScript认为它无效并会忽略它。

2）closest()只搜索 up DOM，因此它会找到tr，但不能再返回查找“newdate”。

这应该解决它：

$(document).on('click', 'button.removebutton', function() {
  var tr = $(this).closest('tr');
  var alpha = tr.find(".newdate").val();
  alert(alpha);
  tr.remove();
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
</table>

请注意使用类而不是“newdate”和“newtime”的ID，并且我们将文本框的定位过程拆分为两个步骤 - 一个通过上升DOM找到封闭的<tr>，还有一秒要从该位置搜索.newdate元素。

Answer 5

您好，您可以使用下面的代码，但请记住永远不要在不同的输入中使用相同的ID名称，这样您就可以使用类，而您的代码是

$(document).on('click', 'button.removebutton', function() {
  alpha = $(this).closest('tr').find(".newdate").val();
  beta = $(this).closest('tr').find(".newtime").val();
  alert(alpha);
  alert(beta);
  $(this).closest('tr').remove();
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
</table>

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr #newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>