Question

此html表单通过一些javascript代码显示。现在，当我单击表格时，我想将表格中单元格的信息添加到这种警报中。

我该怎么做？

<div class='alertBox' id='box'>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#tableBody td').on('click', function() {
            alert($(this).html() + ' ' + months[currentMonth] + ' ' + currentYear);
        });
    });
    </script>
    <form>
        <input name='Event' type='text' value='Event'> <br>
    </form>

    <a onclick='unpop()' class='close'>Close</a>
</div>
...

这是一个网站，您可以在其中向日历添加约会，然后树莓派将显示约会。

Answer 1

谢谢您的回答。我已经找到了另一个解决方案。如果您对此感兴趣，就在这里：

$(document).ready(function() {
    $('#tableBody td').on('click', function() {
        var cellIndex = document.getElementById('displayDate').innerHTML = $(this).text() + ' ' + months[currentMonth] + ' ' + currentYear;
    });
});

function pop() {
    document.getElementById('box').style.display = 'block';
    cellIndex;
}

function unpop() {
    document.getElementById('box').style.display = 'none';
}

Answer 2

如果警报框的HTML是由javascript添加的，则您将需要使用.on()来捕获用户事件（这称为event delegation）。另外，在执行此操作时，必须将.on()方法附加到运行javascript之前肯定存在的元素上-$(document)始终是安全的。

尝试一下：

$(document).ready(function() {
  $(document).on('click', '#tableBody td', function() {
    let txt = $(this).text();
    $('#box input[name=Event]').val(txt);
    $('#box').show();
  });
  
  $(document).on('click', '#box a.close', function(){
    $('#box').hide();
  });
});

table{border-collapse:collapse;}
th,td{border:1px solid #ccc;}

#box{position:absolute;top:5vh;left:20vw;padding:2vh;background:wheat;display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class='alertBox' id='box'>
  <form>
    <input name='Event' type='text' value='Event'> <br>
  </form>
  <a class='close'>Close</a>
</div>

<table>
  <thead><th>Name</th><th>Vehicle</th></thead>
  <tbody id="tableBody">
    <tr><td>Bob</td><td>Car</td></tr>
    <tr><td>Sam</td><td>Truck</td></tr>
    <tr><td>Fred</td><td>Bike</td></tr>
  </tbody></table>

如何将jQuery信息添加到html表单？

2 个答案: