Question

我正在开发一个简单的Web应用程序：

将表格行添加到BS HTML网站。
具有一个功能，可以通过onclick事件将当前时间添加到表格单元格。

现在我无法找到一些示例，我可以在将按钮链接到文本区域时执行onclick事件，但是如何通过表格单元实现此目的？

非常感谢！

<script type='text/javascript'>
$(document).ready(function () {
    var counter = 0;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";

        cols += '<td><input type="text" class="form-control" name="item' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="surgeonRequest' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="scrubCallout' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="implantUsed' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="implantRemoved' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="nurseRecord' + counter + '"/></td>';

        cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
        counter++;
    });



    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1
    });


});



function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}

//Timestamp Javascript

function getTimeStamp() {
       var now = new Date();
       return ((now.getMonth() + 1) + '/' + (now.getDate()) + '/' + now.getFullYear() + " " + now.getHours() + ':'
                     + ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())) + ':' + ((now.getSeconds() < 10) ? ("0" + now
                     .getSeconds()) : (now.getSeconds())));
}

window.onclick = "getTimeStamp" ;
</script>


<!-- BEGIN HTML -->

<!-- Tables -->
<div class="fluid-container">
    <table id="myTable" class=" table order-list">
    <thead>
        <tr>
            <td><center><b>Item</b></center></td>
            <td><center><b>Surgeon Request</b></center></td>
            <td><center><b>Scrub Callout</b></center></td>
            <td><center><b>Implant Used</b></center></td>
            <td><center><b>Implant Removed</b></center></td>
            <td><center><b>EHR Record</b></center></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-sm-2">
                <input type="text" name="name" class="form-control" onclick="this.name.value=getTimeStamp()/>
            </td>
            <td class="col-sm-2">
                <input type="text" name="surgeonRequest"  class="form-control"/>
            </td>
            <td class="col-sm-2">
                <input type="text" name="scrubCallout"  class="form-control"/>
            </td>
            <td class="col-sm-2">
                <input type="text" name="implantUsed"  class="form-control"/>
            </td>
            <td class="col-sm-2">
                <input type="text" name="implantRemoved"  class="form-control"/>
            </td>
            <td class="col-sm-2">
                <input type="text" name="nurseRecord"  class="form-control"/>
            </td>
            <td class="col-sm-2"><a class="deleteRow"></a>

            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="7" style="text-align: left;">
              <center>
                <input type="button" class="btn btn-lg btn-lg " id="addrow" value="Add Row" />
              </center>
            </td>
        <tr>
        </tr>
    </tfoot>
</table>
</div>

Answer 1

首先，在onclick行上面的代码中有一个拼写错误，它不会关闭"。无论如何，这里是完整的修改代码，请检查它是否能解决您的问题。

请注意，我已修改了html和javascript部分

＆＃13;

$(document).ready(function () {
    var counter = 0;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";

        cols += '<td><input type="text" class="form-control" name="item' + counter + '"  onClick="this.value=getTimeStamp()" /></td>';
        cols += '<td><input type="text" class="form-control" name="surgeonRequest' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="scrubCallout' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="implantUsed' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="implantRemoved' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="nurseRecord' + counter + '"/></td>';

        cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
        counter++;
    });



    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1
    });


});



function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}

//Timestamp Javascript
window.getbla = function(){
alert("hi");
return "bla";
};

window.getTimeStamp = function() {
       var now = new Date();
       return ((now.getMonth() + 1) + '/' + (now.getDate()) + '/' + now.getFullYear() + " " + now.getHours() + ':'
                     + ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())) + ':' + ((now.getSeconds() < 10) ? ("0" + now
                     .getSeconds()) : (now.getSeconds())));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- BEGIN HTML -->

<!-- Tables -->
<div class="fluid-container">
    <table id="myTable" class=" table order-list">
    <thead>
        <tr>
            <td><center><b>Item</b></center></td>
            <td><center><b>Surgeon Request</b></center></td>
            <td><center><b>Scrub Callout</b></center></td>
            <td><center><b>Implant Used</b></center></td>
            <td><center><b>Implant Removed</b></center></td>
            <td><center><b>EHR Record</b></center></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-sm-2">
                <input type="text" name="name" class="form-control" onClick="this.value=getTimeStamp()">
            </td>
            <td class="col-sm-2">
                <input type="text" name="surgeonRequest"  class="form-control"/>
            </td>
            <td class="col-sm-2">
                <input type="text" name="scrubCallout"  class="form-control"/>
            </td>
            <td class="col-sm-2">
                <input type="text" name="implantUsed"  class="form-control"/>
            </td>
            <td class="col-sm-2">
                <input type="text" name="implantRemoved"  class="form-control"/>
            </td>
            <td class="col-sm-2">
                <input type="text" name="nurseRecord"  class="form-control"/>
            </td>
            <td class="col-sm-2"><a class="deleteRow"></a>

            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="7" style="text-align: left;">
              <center>
                <input type="button" class="btn btn-lg btn-lg " id="addrow" value="Add Row" />
              </center>
            </td>
        <tr>
        </tr>
    </tfoot>
</table>
</div>

＆＃13;

jsfiddle：https://jsfiddle.net/3he1962o/15/

我希望它有所帮助。

为单元格添加时间

1 个答案: