How do I add a radio button to HTML table via jquery

Question

I'm using Jquery $.post to get string array from SQL based on selection from a drop-down that I'm then reading into an HTML table. Each time they change selection on drop down, it clears all but the header row from the table and reloads new values. That is working fine.

It is just a basic 3 row table; a unique identifier, a value and a count shown as string. Every record has all 3, so I'm just using for loop with counters to control start/end of rows. In my form it's header is defined as such:

    <div class="col-md-10">
            <table id="attEditTable" style="width:100%" cellpadding="0" cellspacing="0" border="1" class="row">
                <tbody>
                    <tr style="background-color: #F0F8FF;">
                        <th></th>
                        <th>Attribute Value</th>
                        <th>Item Count</th>
                    </tr>
                </tbody>
            </table>
        </div>

I'm now trying to change the 1st cell of each row to a radio button with the value set to the value I was displaying in that cell.

Currently when the view displayed it is showing [object Object] in the first cell of every row instead of a radio button.

Sorry I am a newb at this with no training on Java or MVC - so hoping just a simple syntax issue...

Trying this basic one returned syntax error on input:

    <input type="radio" name="SelERow" value='+editValues[i]+' />

I've also tried (both had same result of [object Object]):

    $("input:radio[name=\"SelERow\"][value="+editValues[i]+"]")
    $('<input type="radio" id="ERow" name="SelERow" value='+editValues[i]+' />')

Per David's suggestions I've now also tried (both resulted in no data and no error):

    '<input type="radio" name="SelERow" value='+editValues[i]+' />'
    var tblCell = $('<td />');  // create an empty <td> node
    if (x == 1 || (x - 1) % 3 == 0) {
        var input = $('<input />', { type: 'radio', id: 'ERow', name: 'SelERow', value: editValues[i] });
        tblCell.append(input);  // append an <input> node to the <td> node
     } else {
        tblCell.text(editValues[i]);  // or just set the text of the <td> node
     }

With the 2nd one I also changed the line: tblRow = tblRow + ""; to instead be tblRow = tblRow + tblCell + "";

Current Script

<script>
    $(function () {
        $("#EditAttributeName").change(function () {
            var selectedName = $(this).val();

            // Delete all but first row of table
            $("#attEditTable").find($("tr")).slice(1).remove();

            var url2 = "EditDD2changed?selectedName=" + selectedName;

            $.post(url2, function (editValues) {

                var x = 0;
                var tblRow = "<tr>";
                for (var i=0; i < editValues.length; i++)
                {
                    x++;
                    if (x == 1 || (x - 1) % 3 == 0) {
                        tblRow = tblRow + "<td>" + $('input:radio[name="SelERow"][value="' + editValues[i] + '"]');
                    }
                    else {
                        tblRow = tblRow + "<td>" + editValues[i] + "</td>";
                    }

                    if (x % 3 == 0)
                    {
                        tblRow = tblRow + "</tr>";
                        $("#attEditTable").append(tblRow);
                        tblRow = "<tr>";
                    }
                }
            })
        });
    });
</script>

Console is showing no error messages.

Answer 1

Looks like it's close. To start, there's an important difference in the two attempts. This is a jQuery selector syntax:

$('input:radio[name="SelERow"][value="' + editValues[i] + '"]')

So it's not creating an <input/>, but looking for an <input/>. Which isn't what you want in this case. Your other attempt uses the syntax for creating an element:

$('<input type="radio" id="ERow" name="SelERow" value=editValues[i] />')

Though an issue here (which may have just been a copy/paste error in posting the question? but for completeness and for future readers it may as well be addressed...) appears to be that the editValues[i] is just part of the string. You want to concatenate it into the string. There are a couple ways to do that. Either direct concatenation:

$('<input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" />')

Or string interpolation (take note of the different overall quotes, using back-ticks this time):

$(`<input type="radio" id="ERow" name="SelERow" value="${editValues[i]}" />`)

The latter is newer syntax but should be widely enough supported by now. (Though in any given business environment who knows what ancient browsers one may need to support.) Could just be personal preference between the two.

it is showing [object Object]

The main issue producing the result you've observing is that you're concatenating the result of that jQuery operation directly as a string:

tblRow + "<td>" + $('<input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" />')

(Coincidentally, whether you're creating an element or looking for an element, this observed output would be the same because both operations return an object.)

The result of an $() operation is not itself a string, but a more complex object. When concatenated with a string it has to be interpreted as a string, and unless the object has a meaningful .toString() implementation (this one doesn't appear to) then the default string representation of a complex object is exactly that: "[object Object]"

There are a couple approaches you can take here. One would be to just use strings entirely, you don't necessarily need a jQuery object here:

tblRow + '<td><input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" /></td>'

Since you're using jQuery later to append the result to the HTML, you can just build up all the HTML you like as plain strings and let jQuery handle turning them into DOM objects when you send them to .append().

The other option, if you definitely want to "use jQuery" in this situation or are otherwise being instructed to, would be to build the hierarchy of HTML elements as jQuery objects and then pass that hierarchy to .append(). Constructing such a hierarchy can look something like this:

var tblCell = $('<td />');  // create an empty <td> node
if (x == 1 || (x - 1) % 3 == 0) {
    var input = $('<input />', { type: 'radio', id: 'ERow', name: 'SelERow', value: editValues[i] });
    tblCell.append(input);  // append an <input> node to the <td> node
} else {
    tblCell.text(editValues[i]);  // or just set the text of the <td> node
}

Note that each $() operation creates an HTML element node, and you can supply attributes for it as a second argument to the $() function. Then those nodes can be .append()-ed to each other just like you .append() the HTML string to $("#attEditTable").

In your particular case this may get a little more cumbersome because your loop isn't just looping through cells or just through rows, but through both and using a hard-coded count to determine whether it's reached the end of a row or not. So, as part of learning/practicing jQuery, it may be worth the effort to try this approach. But I suspect the shortest path to getting your code working with minimal changes would be the string concatenation approach above.

---

Side note: This code is using the same id value for the radio buttons created within this loop. The result is that there is expected to be multiple elements on the page with the same id. This is technically invalid HTML. If you ever try to use that id to reference an element, the resulting behavior will be undefined. (It might work in some cases, might not in others, purely coincidentally.) Though if you don't need to use that id to reference the elements, you may as well remove it entirely.