JavaScript / JQuery html element append doesn't take attributes of parent - no PHP version

Question

I am using a JQuery after method to append an HTML row to an existing row, but the attributes of the parent are not inherited. What am I doing wrong?

<html>

<head>
    <title>AppendTest_min</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

<body bgcolor="Teal">
    <div class="container">
        <div class="form-group">
            <div class="table-responsive">


                <form name="budgetform" id="budgetform">
                    <table class="table" id="spreadsheet">
                        <tr id="row1">
                            <td id="inputtd">
                                <input type="text" id="descr1" name="descr[]" size="25" class="inputrow" style="font-weight:bold; background-color:Wheat">
                                <input type="text" id="dueday1" name="dueday[]" style="text-align: center; background-color:Ivory" size="6" class="inputrow">
                                <button type="button" name="add" id="add1" style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button>
                            </td>
                        </tr>
                    </table>
                </form>


            </div>
        </div>
    </div>
</body>

</html>

<script type="text/javascript">
    $(document).ready(function() {



        $(document).on('click', '.btn_add', function() {
            var button_id = $(this).attr("id");
            // alert("HELLO"); 
            // alert(button_id); 

            // get number part of ID    
            var nLen = button_id.length
            var numsize = nLen - 3;
            var nIdx = button_id.substr(3, 2);
            var sIdx = nIdx.toString();
            // alert(sIdx); 

            var sRowRef = "#row";
            var sAddToThisRowRef = sRowRef + sIdx;

            nIdx++;
            sIdx = nIdx.toString();
            var sRemIdx = "rem" + sIdx;
            var sAddIdx = "add" + sIdx;

            // var sNewRow = '<tr id="row'+nIdx+'"><td><input type="text" id="descr'+nIdx+'" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
            var sNewRow = '<tr id="row' + nIdx + '"><td><input type="text" id="descr' + nIdx + '" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
            sNewRow = sNewRow + '<input type="text" id="duedate' + nIdx + '" name="dueday[]" placeholder="Date Day" size = "6" class="inputrow"; background-color:Ivory" />';
            sNewRow = sNewRow + '<button type="button" name="add" id=' + sAddIdx + ' style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button></tr>';

            $(sAddToThisRowRef).after(sNewRow);

            // $(sAddToThisRowRef).append(sNewRow);
            var sJustAddedRowRef = sRowRef + sIdx;

        });

    });
</script>

I am not seeing the cellspacing attribute inherited. This one has had me stumped for a while... Thx!

Slightly shorter way of doing this: https://jsfiddle.net/khrismuc/7saokdf7/ — , Nov 22 '16 at 19:54

score 1 · Answer 1 · edited May 23 '17 at 10:33

The behavior you're seeing is because HTML compacts multiple whitespaces into one space character.

Whitespace is present between the <input> and <button> tags in the HTML, so a single space appears between the two input fields and the button in the first row. But no whitespace is present in the HTML constructed in your JavaScript code, so there is no space between those controls in subsequent rows.

The solution is to add a single space ( ) in between the controls as your code constructs them (see lines 2 and 3 below):

var sNewRow = '<tr id="row' + nIdx + '"><td><input type="text" id="descr' + nIdx + '" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
sNewRow = sNewRow + '&nbsp;<input type="text" id="duedate' + nIdx + '" name="dueday[]" placeholder="Date Day" size = "6" class="inputrow"; background-color:Ivory" />';
sNewRow = sNewRow + '&nbsp;<button type="button" name="add" id=' + sAddIdx + ' style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button></tr>';

score 0 · Answer 2 · answered Nov 22 '16 at 19:44

0

Use clone with insertAfter in your scenario. I think its best suited for what your doing.

For Example:

$("#car2").clone().insertAfter("div.car_well:last");

Or you can use try this as well:

$("div[id^='car']:last").after($('#car2').clone());

answered Nov 22 '16 at 19:44

Neo

3,309
7
35
44

JavaScript / JQuery html element append doesn't take attributes of parent - no PHP version

2 Answers2