Fatal编程技术网
  • javascript/
  • Javascript DOM元素/innetHTML从对话框添加到表

Javascript DOM元素/innetHTML从对话框添加到表

javascript jquery dom

Javascript DOM元素/innetHTML从对话框添加到表,javascript,jquery,dom,append,innerhtml,Javascript,Jquery,Dom,Append,Innerhtml,好的。这是一个长的。因此，我有一个页面，其中有一个表格，其中包含有关汽车及其经销商的各种信息。有一个按钮可以添加更多不同年份的汽车。此按钮打开一个对话框。该对话框有3个下拉列表和一个文本输入。我需要每个下拉列表中的信息以及要添加到父页面的文本输入。我已经走到一半了。信息是将输入框的值、文本添加到表的子部分内的父表中。我还需要在文本的同一行上添加子下拉列表的选定值。还有一件事。父亲下拉列表需要指示儿子信息的去向。目前，我的文本正在表的底部添加一个新行，没有特定的父项。我已经尽可能地剥离了我的代码，

好的。这是一个长的。因此，我有一个页面，其中有一个表格，其中包含有关汽车及其经销商的各种信息。有一个按钮可以添加更多不同年份的汽车。此按钮打开一个对话框。该对话框有3个下拉列表和一个文本输入。我需要每个下拉列表中的信息以及要添加到父页面的文本输入。我已经走到一半了。信息是将输入框的值、文本添加到表的子部分内的父表中。我还需要在文本的同一行上添加子下拉列表的选定值。还有一件事。父亲下拉列表需要指示儿子信息的去向。目前，我的文本正在表的底部添加一个新行，没有特定的父项。我已经尽可能地剥离了我的代码，这样就不会让人看得不知所措，如果某个地方缺少一个括号，那就是一个疏忽。下面是父页面的代码和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>
提前感谢。

您需要一个下拉列表作为源

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

这里有一把小提琴：

我想我已经很清楚我在问什么了。我没有错误，我只是不知道A.如何向表中添加除文本以外的任何内容，B.向特定父级添加新的文本行和下拉值。$Selector.appendstuff您可能应该查看我熟悉的jQuery文档。您能告诉我如何将下拉选择的值添加到父表中吗？我想不出来，我正在处理这件事，谢谢。现在，我如何将新信息放在所选父项之后？通过“经销商”下拉列表选择家长。我假设两个文档位于同一个域上；您可以使用jQuery使用$car_table、window.parent.document访问父frames car表，我假设您可以完成其余的工作 
<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 id="control">clickme</button>

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