Question

我坚持使用这个javascript代码。我想在表中添加一个新行，然后能够将其删除。我无法找到我的错误。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script>
$('.Add').click(function()
{
    var row = $(this).closest('tr').clone();
    row.find('input').val('');
    $(this).closest('tr').after(row);
    $('input[type="button"]',    row).removeClass('Add').addClass('RemoveRow').val('Remove item');
});

$('table').on('click', '.RemoveRow', function()
{
    $(this).closest('tr').remove();
});
</script>
</head>

<body>
<table>
    <tr>
        <td>Process:</td>
        <td>People required:</td>
        <td>Add/Remove Item</td>
    </tr>
    <tr>
        <td>
            <select name="process">
                <option value="1">BLD</option>
                <option value="2">KEY</option>
                <option value="3">ART</option>
                <option value="4">BG</option>
            </select>
        </td>
        <td><input type='text' ></td>
        <td><input type='button' class='Add' value='Add new item'></td>
    </tr>
</table>
</body>
</html>

Answer 1

您正在使用jQuery，但缺少jQuery引用。

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

在DOM ready函数上添加jQuery代码。

工作代码：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('.Add').click(function() {
        var row = $(this).closest('tr').clone();
        row.find('input').val('');
        $(this).closest('tr').after(row);
        $('input[type="button"]', row).removeClass('Add').addClass('RemoveRow').val('Remove item');
      });

      $('table').on('click', '.RemoveRow', function() {
        $(this).closest('tr').remove();
      });
    });
  </script>
</head>

<body>
  <table>
    <tr>
      <td>Process:</td>
      <td>People required:</td>
      <td>Add/Remove Item</td>
    </tr>
    <tr>
      <td>
        <select name="process">
          <option value="1">BLD</option>
          <option value="2">KEY</option>
          <option value="3">ART</option>
          <option value="4">BG</option>
        </select>
      </td>
      <td>
        <input type='text'>
      </td>
      <td>
        <input type='button' class='Add' value='Add new item'>
      </td>
    </tr>
  </table>
</body>

</html>

Answer 2

将您的代码包装在document.ready函数
还包括jQuery库

代码：

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

    $(document).ready(function() {
    $('.Add').click(function()
    {

        var row = $(this).closest('tr').clone();
        row.find('input').val('');
        $(this).closest('tr').after(row);
        $('input[type="button"]',    row).removeClass('Add').addClass('RemoveRow').val('Remove item');
    });

    $('table').on('click', '.RemoveRow', function()
    {
        $(this).closest('tr').remove();
    });
    });

或将script代码放在body tag

在绑定事件处理程序之前，您需要等待elements在页面加载时dom可用。

试试这个

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>

<table>
    <tr>
        <td>Process:</td>
        <td>People required:</td>
        <td>Add/Remove Item</td>
    </tr>
    <tr>
        <td>
            <select name="process">
                <option value="1">BLD</option>
                <option value="2">KEY</option>
                <option value="3">ART</option>
                <option value="4">BG</option>
            </select>
        </td>
        <td><input type='text' ></td>
        <td><input type='button' class='Add' value='Add new item'></td>
    </tr>
</table>
<script>

$('.Add').click(function()
{

    var row = $(this).closest('tr').clone();
    row.find('input').val('');
    $(this).closest('tr').after(row);
    $('input[type="button"]',    row).removeClass('Add').addClass('RemoveRow').val('Remove item');
});

$('table').on('click', '.RemoveRow', function()
{
    $(this).closest('tr').remove();
});

</script>
</body>
</html>

Answer 3

使用Jquery的CDN / js文件，因为您在脚本中使用$这将解决您的问题

<!DOCTYPE html>
<html>
<head>
// ------CDN of jquery
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$('.Add').click(function()
{
    var row = $(this).closest('tr').clone();
    row.find('input').val('');
    $(this).closest('tr').after(row);
    $('input[type="button"]',    row).removeClass('Add').addClass('RemoveRow').val('Remove item');
});

$('table').on('click', '.RemoveRow', function()
{
    $(this).closest('tr').remove();
});
</script>
</head>

<body>
<table>
    <tr>
        <td>Process:</td>
        <td>People required:</td>
        <td>Add/Remove Item</td>
    </tr>
    <tr>
        <td>
            <select name="process">
                <option value="1">BLD</option>
                <option value="2">KEY</option>
                <option value="3">ART</option>
                <option value="4">BG</option>
            </select>
        </td>
        <td><input type='text' ></td>
        <td><input type='button' class='Add' value='Add new item'></td>
    </tr>
</table>
</body>
</html>

您还可以在https://jsfiddle.net/vsvvssrao/62yr8tav/

中查看jsfiddle中的代码

Javascript代码无法运行

3 个答案: