Question

所以我一直在这，并尝试了很多不同的东西，我希望我能得到一些帮助。我有以下表格，我想使用。我理解所有后端访问组件等，但我似乎无法使表单行为包括timepicker，datepicker，autcomplete和replicate。有人可以在我的代码中找到错误吗？我一直在墙上撞了一会儿。复制功能似乎也已破裂。任何想法？

谢谢！乔恩

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

Answer 1

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

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

其次，请务必校对您的代码。有很多拼写错误和拼写错误将在未来引发问题。我试图修复尽可能多的东西。

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

一些警告：

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

Jquery与表单和表一起使用，包括复制

1 个答案: