Question

我正在尝试在地址簿的按钮元素上使用单击功能。我想在点击按钮时输入用户输入的联系人姓名然后编号，但我收到了

＆＃34;意外的标识符＆＃34;错误。

我的联系人存储在表格中的html文档中;这是我的代码：

$(document).ready(function() {
    $('#add').click(function() {

        var toAddName = $('input[name=contact]').val();
        var toAddNum = $('input[name=number]').val();

        $('#contacts').append('<tr><th>'+toAddName+'</th><td>'+toAddNum+'</td></tr>');
    });
});

我也试过这个：

var name = prompt("Name: ");
var number = prompt("Number: ");

$(document).ready(function() {
    $('#add').click(function() {
        $('table').append('<tr><th>'name'</th><td>'number'</td></tr>');
    });
});

以下是我的所有JS / CSS / HTML代码：

（P.S。我知道我的javascript和我的CSS都链接到html，但我使用的代码编辑器为我做了这个）

＆＃13;

var name = prompt("Name: ");
var number = prompt("Number: ");

$(document).ready(function() {
  $('#add').click(function() {
    $('table').append('<tr><th>'name'</th><td>'number'</td></tr>');
  });
});

＆＃13;

table {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 15px;
}

th {
  padding-right: 100px;
}

#add {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  margin-right: 50px;
  color: blue;
}

#del {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  color: red;
}

＆＃13;

<html>
<title>Address Book</title>
<div>
  <h1>Contacts:</h1>
</div>

<div id="add">
  <button><strong>New Contact</button>
</div>
  
<div id="del">
  <button>Delete Contact</strong></button>
</div>

<div>
  <table>
    
    <tr>
      <th>Name1</th>
      <td>555-555-5555</td>
    </tr>
    
    <tr>
      <th>Name2</th>
      <td>555-555-5555</td>
    </tr>
    
    <tr>
      <th>Name3</th>
      <td>555-555-5555</td>
    </tr>
    
    <tr>
      <th>Name4</th>
      <td>555-555-5555</td>
    </tr>
    
    <tr>
      <th>Name5</th>
      <td>555-555-5555</td>
    </tr>
    
  </table>
</div>

</html>

＆＃13;

Answer 1

您需要连接name和number。另外，在下面的代码中，我在name

上点击后会提示您number和New Contact

＆＃13;

$(document).ready(function() {
  $('#add button').click(function() {  // bind to button
    var name = prompt("Name: ");
    var number = prompt("Number: ");
    $('table').append('<tr><th>' + name + '</th><td>' + number + '</td></tr>');
  });
});

＆＃13;

table {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 15px;
}
th {
  padding-right: 100px;
}
#add {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  margin-right: 50px;
  color: blue;
}
#del {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<title>Address Book</title>
<div>
  <h1>Contacts:</h1>
</div>

<div id="add">
  <button><strong>New Contact</button>
</div>
  
<div id="del">
  <button>Delete Contact</strong>
  </button>
</div>

<div>
  <table>

    <tr>
      <th>Name1</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name2</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name3</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name4</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name5</th>
      <td>555-555-5555</td>
    </tr>

  </table>
</div>

</html>

＆＃13;

Answer 2

使用+(concatenation operator)运算符连接变量并在点击处理函数中调用prompt，以便每次＆＃34; New Contact＆＃34; 时都会要求输入点击。

concatenation operator (+)将两个字符串值连接在一起，返回另一个字符串，即两个操作数字符串的union。

$('#add').click(function() {
  var name = prompt("Name: ");
  var number = prompt("Number: ");
  $('table').append('<tr><th>' + name + '</th><td>' + number + '</td></tr>');
});

＆＃13;

$('#add').click(function() {
  var name = prompt("Name: ");
  var number = prompt("Number: ");
  $('table').append('<tr><th>' + name + '</th><td>' + number + '</td></tr>');
});

＆＃13;

table {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 15px;
}
th {
  padding-right: 100px;
}
#add {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  margin-right: 50px;
  color: blue;
}
#del {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <h1>Contacts:</h1>
</div>
<div id="add">
  <button>New Contact</button>
</div>
<div id="del">
  <button>Delete Contact</button>
</div>
<div>
  <table>
    <tr>
      <th>Name1</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name2</th>
      <td>555-555-5555</td>
    </tr>
    <tr>
      <th>Name3</th>
      <td>555-555-5555</td>
    </tr>
    <tr>
      <th>Name4</th>
      <td>555-555-5555</td>
    </tr>
    <tr>
      <th>Name5</th>
      <td>555-555-5555</td>
    </tr>
  </table>
</div>

＆＃13;

Answer 3

这一行

$('table').append('<tr><th>'name'</th><td>'number'</td></tr>');

应改为：

$('table').append('<tr><th>' + name+ '</th><td>' + number + '</td></tr>');

Answer 4

试试这个，你需要做的只是使用连接：D

$(document).ready(function() {
  $('#add').click(function() {

    var name = prompt("Name: ");
    var number = prompt("Number: ");

    $('table').append('<tr><th>'+name+'</th><td>'+number+'</td></tr>');
  });
});

https://jsfiddle.net/o6cfmbbv/

如何通过click函数jQuery获取用户输入

4 个答案: