1

所以我一直在做这个并且尝试了很多不同的东西，我希望我能得到一些帮助。我有以下要使用的表格。我了解所有后端访问组件等，但我似乎无法让表单运行，包括时间选择器、日期选择器、自动完成和复制。有人可以在我的代码中找到错误吗？我已经把头撞在墙上有一段时间了。复制功能似乎也坏了。有任何想法吗？

谢谢！乔恩

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<script>
$(document).ready(function($) {
var drugs = [
"Atenolol (Tenormin)",
"Atropine",
"Atropine Ophthalmic Solution",
"Azathioprine (Imuran)",
"Azithromycin (Zithromax)",
"Benazepril (Fortekor)",
"Betaxolol and Levobetaxolol",
"Bethanechol (Urecholine, etc.)",
"Bisacodyl (Dulcolax)",
"Bismuth Subsalicylate (Pepto-Bismol)",
"Brinzolamide (Azopt)",
"Bromides",
"Buprenorphine (Buprenex)",
"Burow's Solution",
"Buspirone HCl (BuSpar)",
"Butorphanol Tartrate (Torbugesic, Torbutrol)",
"Calcitonin"];

    $(".autocomp").autocomplete({source:drugs});
        $( ".datepicker_txt" ).datepicker();
        $(".timePick_txt").timepicker({'step' : 15,
                                   'scrollDefaultNow': true });
    $("#btnAdd").click(function(){
        var $table =  $(document.getElementById('drug_treatment_table'));
        var $tr = $(document.getElementById('drug_treatment_table')).find('tr:last').clone(true);
        $tr.find('input').attr('id',function(){
            var parts = this.id.match(/(\D+)(\d+)$/);
            return parts[1]+ ++parts[2];
        }).attr('name',function(){
            var parts = this.name.match(/(\D+)(\d+)$/);
            return parts[1]+ ++parts[2];
        });
        $tr.find('select').attr('id',function(){
            var parts = this.id.match(/(\D+)(\d+)$/);
            return parts[1]+ ++parts[2];
        }).attr('name',function(){
            var parts = this.name.match(/(\D+)(\d+)$/);
            return parts[1]+ ++parts[2];
        });
        $tr.find(".datepicker_txt").datepicker();
        $tr.find(".autocomp").autocomplete({source:drugs});
        $tr.find(".timePick_txt").timepicker();
        $table.find("tr:last").after($tr);
        $(document.getElementById("numEntries")).attr('value',$table.rows.length-1);
    });
    $("#btnDel").click(function($){
        var $table = $(document.getElementById('drug_treatment_table'));
        var rowsNum = table.rows.length;
        if(rowsNum>2){
            $table.remove($table.find('tr:last'));
        }
    });
});
</script>
<link href="style/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />

</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input type="button" name="btnAdd" id="btnAdd" value="Increase Drug Treatments"/>
<input type="button" name="btnDel" id="btnDel" value="Decrease Drug Treatments"/>
</form>
<form id="add_drugs" name="add_drugs" method="post" action="">
    <input type="hidden" name="numEntries" id="numEntries" value="1" />
    <table width="100%" border="1" name="drug_treatment_table" id="drug_treatment_table">
          <tr>
            <th width="3%" scope="col">#</th>
            <th width="14%" scope="col">Drug</th>
            <th width="32%" scope="col">Special Directions </th>
            <th width="18%" scope="col">Quantity</th>
            <th width="12%" scope="col">How Often</th>
            <th width="8%" scope="col">Starting</th>
            <th width="13%" scope="col">Finishing</th>
          </tr>
          <tr>
            <td>1</td>
            <td>
            <input type="text" name="drug_name_1" id="drug_name_1" class="autocomp"/></td>
            <td>
            <input name="special_driections_1" type="text" id="special_driections_1" size="60" /></td>
            <td nowrap="nowrap">
            <input type="text" name="quant_1" id="quant_1" />
            <select name="quant_unit_1" id="quant_unit_1">
              <option>cc</option>
              <option>mg</option>
              <option>g</option>
            </select></td>
            <td nowrap="true"><select name="how_often_drug_1" id="how_often_drug">
              <option>Q1hr</option>
              <option>Q2hr</option>
              <option>Q3hr</option>
              <option>QID</option>
              <option>TID</option>
              <option>BID</option>
              <option selected="selected">SID</option>
              <option>Q2 Day</option>
              <option>Q3 Day</option>
              <option>Q4 Day</option>
              <option>Q5 Day</option>
              <option>Q6 Day</option>
              <option>Q1 Week</option>
              <option>Q2 Week</option>
            </select><input type="text" id="start_time_1" class="timePick_txt" /></td>
            <td><input type="text" id="datepicker_start_drug_1" name="datepicker_start_drug_1" class="datepicker_txt"></td>
            <td><input type="text" id="datepicker_end_drug_1" name="datepicker_end_drug_1" class="datepicker_txt"></td>
          </tr>
        </table>
</form>
</body>
</html>
4

1 回答 1

1

在玩了一段时间的代码之后，我想我能够产生你想要的结果。只是对您的代码的一些评论。

首先，您可以从有关选择器如何在 jQuery 中工作的复习中受益。当您可以简单地使用它们的选择器时，您正在使用 javascript 来抓取元素并将它们转换为 jQuery 对象。

其次，请务必校对您的代码。有许多错别字和拼写错误会在将来引起问题。我试图修复尽可能多的问题。

这是小提琴的链接：http: //jsfiddle.net/jlange88/5594c/19/

一些警告：

我只是创建了一个长字符串来表示一个新的表格行，您应该设计一些方法来以编程方式执行此操作。此外，肯定有更好的方法将通用 id 应用到您的新表，我只是不想现在实现它:)。

于 2012-09-21T22:17:25.320 回答