Question

我有这个表格JSFIDDLE

<table class="table table-timesheet" ng-controller="TimesheetCtrl">
        <thead>
            <tr>
                <th id="timesheet-project-th">
                    <span class="timesheet-table-head">Project</span>
                </th>
                <th id="timesheet-date-th">
                    <span class="timesheet-table-head">Date</span>
                </th>
                <th id="timesheet-task-th">
                    <span class="timesheet-table-head">Task</span>
                </th>
                <th id="timesheet-timeworked-th">
                    <span class="timesheet-table-head">Time</span>
                </th>
                <th id="timesheet-note-th">
                    <span class="timesheet-table-head">Note</span>
                </th>
            </tr>
            <tr class="log-work-block">
                <td>
                    <select class="timesheet-project-list" style="width:98%">
                        <option value="" disabled selected style='display:none;'>Choose a project...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </td>
                <td>
                    <input type="text" id="datepicker" placeholder="dd/mm/yyyy"/>
                </td>
                <td>
                    <input type="text" value="" placeholder="Task"/>
                </td>
                <td>
                    <input type="text" value="" placeholder="Elapsed time"/>
                </td>
                <td>
                    <input type="text" value="" placeholder="Note"/>
                </td>
            </tr>
        </thead>
    </table>

我需要添加表格行，当我填充至少一个单元格并且专注于输入丢失时，请帮我解决一下，我对javascript的了解并不好。

Answer 1

在表格标签中添加tbody标签。并在下面添加脚本。

<script>
    $("input").blur(function(){
        if($("input[value!='']").length > 0){
            createRow();
        }
    });

    var createRow = function(){
        $("table tbody").append($("#template").html());
    };

</script>
<script type="text/html" id="template">
    <tr class="log-work-block">
        <td>
            <select class="timesheet-project-list" style="width:98%">
                <option value="" disabled selected style='display:none;'>Choose a project...</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </td>
        <td>
            <input type="text" id="datepicker" placeholder="dd/mm/yyyy"/>
        </td>
        <td>
            <input type="text" value="" placeholder="Task"/>
        </td>
        <td>
            <input type="text" value="" placeholder="Elapsed time"/>
        </td>
        <td>
            <input type="text" value="" placeholder="Note"/>
        </td>
    </tr>
</script>

你想要吗？

当单元格焦点丢失且单元格不为空时添加表格行

1 个答案: