-1

好的。这是一个很长的。所以我有一个带有表格的页面，其中包含有关汽车及其来自的经销商的各种信息。有一个按钮可以添加更多不同年份的汽车。此按钮打开一个对话框。该对话框有 3 个下拉菜单和 1 个文本输入。我需要每个下拉列表中的信息和要添加到父页面的文本输入。我到了一半。信息是将输入框的值、文本添加到表的“子”部分内的父表中。我还需要在此文本的同一行上添加“儿子”下拉列表的选定值。还有一件事。“父亲”下拉菜单需要指示“儿子”信息的去向。目前，我的文字是在没有特定父亲的表格底部添加一个新行。我已经尽可能地剥离了我的代码，所以它不会让人难以看清，如果某处缺少括号，那就是疏忽了。这是父页面的代码和html。

 <head>
<script>
    function updateParent1(value1,value2) {
            var table = document.getElementById("car_table");

            var rowCount = table.rows.length;
            //alert(rowCount);
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            cell1.innerHTML = "";

            var cell2 = row.insertCell(1);
            cell2.innerHTML = value2;


</script>
</head>
<body>
<legend>Vehicle Information</legend>
  <input type="text" id="shore_count" />
                  <div class="add_icon"><a href="step-1-dialog-add-shore-tanks.html" target="_blank" class="nyroModal"><img src="images/add-item-icon.png"/></a></div>
                  <table id="car_table">
                    <thead>
                      <tr>
                        <th>Dealership</th>
                        <th>Vehicle Details</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="row_blue_bold father" id="father3">
                        <td colspan="2" class="father_header">John Eagle Honda</td>
                      </tr>
                      <tr class="row_blue_bold son3">
                        <td>&nbsp;</td>
                        <td>Honda 2011 - Civic</td>
                      </tr>
                      <tr class="row_blue_bold son3">
                        <td>&nbsp;</td>
                        <td>Honda 2008 - Accord</td>
                      </tr>
                      <tr class="row_blue_bold father" id="father4">
                        <td colspan="2" class="father_header">John's Used Cars</td>
                        <td>
                      </tr>
                      <tr class="son4">
                        <td>&nbsp;</td>
                        <td>Toyota 2002 - Camry</td>
                      </tr>
</body>

这是 iframe/对话框页面。

<script type="text/javascript">
    $(document).ready(function () {     
        var id =3;
        for (i=0;i<parent.getDescCount();i++) {
            id++;
            var prot = $("#numbers").find(".prototype").clone();                        
            prot.find(".id").attr("value", id);
            prot.find(".apni").attr("value","");

            $("#numbers").append(prot);

        }
        //End of Add button
        $("img.exit").click(function () {
            parent.$.nmTop().close();
        });
        $("img.save").click(function () {           
            var isError = false;
            $("input").each(function(i) {                               
                if(this.value == "") {
                    isError = true;
                    var newRow = "<tr style='background:#ffff99'><td colspan='4'>Please enter the year of this vehicle.</td></tr><tr>";
                    $(this).parent().parent().before(newRow);
                }
            });

            if(isError) return;

            for(var j=0;j<document.getElementsByName("select1").length;j++) {
                parent.updateParent1(document.getElementsByName("select1").item(j).value,document.getElementsByName("text1").item(j).value);
            }
            parent.$.nmTop().close();
        });     
    }); 

      //Add button
        $("img.add").click(function () {
            var prot = $("#numbers").find(".prototype").clone().first();            
            prot.find(".apni").attr("value","");
            $("#numbers").append(prot);
        }     

</script>



<body>
    <div id="selMultipleTitle"> &nbsp;Add Vehicle Information&nbsp;</div>    
    <div id="btnExitDialog"><a href="#"><img src="images/exit.png" height="17" width="17" class="exit"/></a></div>
    <table id="numbers">
      <thead>
        <tr>
          <th><strong>Make</strong></th>
          <th><strong>Dealership</strong></th>
          <th><strong>Model</strong></th>
          <th><strong>Year</strong></th>
        </tr>
      </thead>
      <tr>
      <tbody>
        <td><select id="fatherDeal" name="select1">
          <option selected>Select...</option>
          <option>John Eagle Honda</option>
          <option>Toyota of America</option>
          <option>John's Used Cars</option>
        </select></td>
        <td><select id="sonMake">
          <option selected>Select...</option>
          <option>Honda</option>
          <option>Toyota</option>
        </select></td>
        <td><select>
          <option selected id="sonModel">Select...</option>
          <option>Civic</option>
          <option>Accord</option>
          <option>Camry</option>
        </select></td>
        <td><input value="Enter year" id="sonComment" class="apni" name="text1"/></td>
        <td>&nbsp;</td>
      </tbody>  
      </tr>
      <tr>
        <td class="align_right"><a href="#"><img src="images/cancel.gif" height="21" width="21" class="exit"/></a>&nbsp;<a href="#"><img src="images/save-icon1.png" height="21" width="21" class="save"/></a></td>
      </tr>
    </table>
</body>

提前致谢。

4

1 回答 1

1

您需要一个下拉菜单作为来源

<select id="source">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

和一个目标表

<table id="target">
</table>

当然还有某种控制器，我使用了button.

<button id="control">clickme</button>

现在您只需要将一个操作绑定到按钮，并使其将您想要的内容从您的源附加到您的目标。

$(function() {
    $('#control').click(function() {
        $("#target").append("<tr><td>"+$("#source").val()+"</td></tr>");
    });
});

这是一个小提琴：http: //jsfiddle.net/X5DUv/

于 2013-01-18T16:33:02.660 回答