-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/dialog ページがあります。

<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 に答える