Question

下面的简化代码应该在表格的单元格2-colum 2中添加一个值，具体取决于在此表的第1行第2列中选择的值。这个写的（jquery）处理程序是正确触发的（由控制台测试），但写入div元素（使用html（））不起作用，我强烈怀疑我没有正确遍历DOM。我尝试了一些选项（见评论），但没有一个可行。我哪里出错？

<table border="1"> <!--table ProductMain with only 1 row en 2 cells -->
    <!--table ProductMain; cell r1c1-->
    <tr>
        <td>cell r1c1</td> 

        <!--table ProductMain; cell r1c2-->
        <td>
            <select  class="eprodtype" name="ecorp_productid4"> 
                <option selected="selected" value="" ></option>
                <option  value="val1" > val1</option>
                <option  value="val2" > val2</option>
            </select>
        </td>
    </tr>

    <!--table ProductMain; cell r2c1; -->
    <tr>
        <td>
            <table border ='1'>
                <tr class="r2"> <td> aval1 </td> <td> aval2 </td></tr>
            </table>
        </td>

        <!--table ProductMain; cell r2c2;-->
        <td class="r2c2">
            <div class="ecorpproductwrapper"></div>
        </td>
    </tr>
</table>

$(document).ready(function(){
    $("body").on("change", ".eprodtype", function() {
        var selectedvalue = $( this ).val();  
        console.log("SELECT selectedvalue "+selectedvalue);

        //NONE OF THE FOLLOWING OPTIONS WORK
        //$(this).parent().children("td.r2c2").children("div.ecorpproductwrapper").html("<p> Chosen: " + selectedvalue + "</p>");
        //$(this).parent().children("tr.r2").children("td.r2c2").children("div.ecorpproductwrapper").html("<p> Chosen: " + selectedvalue + "</p>");
        $(this).parent().parent().find("div.ecorpproductwrapper").html("<p> Chosen: " + selectedvalue + "</p>");
        //$(this).parent().children("div.ecorpproductwrapper").html("<p> Chosen: " + selectedvalue + "</p>");
    });
}); //$(document).ready

Answer 1

您还需要再拨parent次电话才能转到table。但是，您可以使用closest清除代码，以获取table，然后find内的代码：

$(this).closest('table').find("div.ecorpproductwrapper").html("<p>Chosen: " + selectedvalue + "</p>");

Example fiddle

没有正确遍历表中的DOM

1 个答案: