Question

在 javascript 中获取下拉值或文本时出错

2016-02-13

294

javascript jquery html

基本上，我正在制作一个使用点击功能插入行的表格。插入行时，用户将从下拉菜单中选择一个值。并根据该值将新单元格插入到该特定行中。

我已经添加了整个功能。但问题是每次我从下拉菜单中选择时，它总是 alert 0。但不是实际值。有人能告诉我我在这里做错了什么吗？

另一个错误是。在第一次尝试选择行时，rownum 包含未定义的值。

这是文档的完整代码。

var counter = 2;
var rownum;
var selectedvalue;

function myFunction() {
    if (counter > 5) {

        alert("Only 5 Rooms selection is allow ! ");
        return false;
    } else {
        var table = document.getElementById("myTable");
        var row = table.insertRow(-1);
        var cell3 = row.insertCell(0);
        var cell4 = row.insertCell(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);


        cell1.innerHTML = "<tr><td><label>Room # " + counter + ": </label></td>";
        cell2.innerHTML = "<td><select ><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option></select></td> ";
        cell3.innerHTML = "<td><select id='child1' onchange='ofChild()' ><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td>";

        counter++;
    }
}

function ofChild() {
    var e = document.getElementById("child1");
    selectedvalue = e.options[e.selectedIndex].value;
    alert(selectedvalue);

    $('#myTable').find('tr').click(function() {
        rownum = $(this).index()
    });

    var firstRow = document.getElementById("myTable").rows[rownum];
    alert('You clicked row ' + (rownum));
    // in forloop selectedvalue will be in condition, 3 is just to check
    for (i = 0; i < 3; i++) {
    var x = firstRow.insertCell(-1);
        x.innerHTML = "<td><select><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td> </tr>";
    }
}

function myDeleteFunction() {
    if (counter < 2) {
        return false;
    } else {
        document.getElementById("myTable").deleteRow(-1);
        counter--;
    }
}

div {
  padding: 8px;
}

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>

<body>
  <div id='TextBoxesGroup'>
    <div align="center">

      <table id="myTable" style="width:50%" class="table">
        <tr class="success">
          <td>
            <label>Room</label>
          </td>
          <td>Adults (18+)</td>
          <td>Child(0-17)</td>
          <td>Child Age</td>
        </tr>

        <!--tr >
        <td><label>Room # 1: </label></td>
        <td><select  ><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option></select></td> 
        <td><select id="child" onchange="ofChild()"><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td>
        <td><select class="age"><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td>
      </tr-->
      </table>
      </br>
      <input type='button' value='Add Room' onclick="myFunction()" id='addRoom' class="btn btn-success">
      <input type='button' value='Remove Room' onclick="myDeleteFunction()" id='removeButton' class="btn btn-danger">
      <br>
      <br>
      <input type='button' value='Search' class="btn btn-primary">
    </div>
</body>

</html>

这是迄今为止输出的图片

Answer 1

在 myFunction 中添加事件监听器

function myFunction(elem) {
    ...     
    $('#myTable').find('tr').off().on('click', function() {
        rownum = $(this).index()
    });
    ...
}

演示 http://codepen.io/vorant/pen/wMNyNN?editors=1010