Adding a time to a cell

Brandon Source

I am working on a simple web application that:

  1. Adds table rows to a BS HTML website.
  2. Has a function that adds the current time to a table cell with an onclick event.

Right now I'm having trouble finding some examples, I am able to execute the onclick event when linking a button to a text area, but how can I achieve this with a table cell?

Many thanks!

<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>
javascriptjqueryhtmlbootstrap-4

Answers

answered 1 week ago Nabeel Khan #1

First of all, there's a typo in your code above at onclick line where it doesn't close the ". Anyway, here's the complete modified code, please check and see if it solves your problem.

Note that I have modified both html and javascript part

$(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())));
}
<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>

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

I hope it helps.

comments powered by Disqus