CODEWITHSUNDEEP
javascriptjqueryhtml
CodeDezk
CodeDezk

Reputation: 1260

HTML table get selected check box and text element

I need to create a table in grid format and add some header columns like title, checkbox and video,

HTML

<table  id="mytable" class="videoGrid">
  <tr id="video_table">
  </tr> 
</table>

And from java script populating the table like 

function populate(){
    var source = document.createElement('video');
    source.width=240;
    source.height=160;  
    source.src = obj;
    source.controls = true;
    source.type = "mp4";

    var td = document.createElement("td");
    var div = document.createElement("div");
    var h3 = document.createElement("h3");
    h3.innerHTML = "title";
    var c = document.createElement("INPUT");
    c.setAttribute("type", "checkbox");

    div.className = "videoBg";
    div.appendChild(source);
    td.appendChild(c); 
    td.appendChild(h3);
    td.appendChild(div);

    document.getElementById("video_table").appendChild(td);
}

Now I need to get the video selected by check box and extract the value h3 element

$('#ok').click(function () {
    $('#mytable tr').each(function(){
        $(this).find('td').each(function(){
            var row = $(this);
            if (row.find('input[type="checkbox"]').is(':checked')) {
                console.log(row.find('h3'));
            }
        });
    });
});

But the console print 

Object { length: 1, prevObject: Object, context: <td>, selector: "h3", 1 more… }

How can I get the value h3 element if the check box is checked?

Upvotes: 0

Views: 87

Answers (1)

Vijay Maheriya
Vijay Maheriya

Reputation: 1679

You need to give array index to find h3 tag . like " row.find('h3')[0] "

$(document).ready(function(){
  populate();
  
  $('#ok').click(function () {
    $('#mytable tr').each(function(){
        $(this).find('td').each(function(){
            var row = $(this);
            if (row.find('input[type="checkbox"]').is(':checked')) {
                console.log(row.find('h3')[0]);
            }
        });
    });
});
  });
function populate(){
    var source = document.createElement('video');
    source.width=240;
    source.height=160;  
    //source.src = obj;
    source.controls = true;
    source.type = "mp4";

    var td = document.createElement("td");
    var div = document.createElement("div");
    var h3 = document.createElement("h3");
    h3.innerHTML = "title";
    var c = document.createElement("INPUT");
    c.setAttribute("type", "checkbox");

    div.className = "videoBg";
    div.appendChild(source);
    td.appendChild(c); 
    td.appendChild(h3);
    td.appendChild(div);

    document.getElementById("video_table").appendChild(td);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table  id="mytable" class="videoGrid">
  <tr id="video_table">
  </tr> 
</table>

<br />
<button id="ok">OK</button>

Upvotes: 1

Related Questions