javascript - HTML 表获取选中的复选框和文本元素

Question

我需要创建一个网格格式的表格并添加一些标题列，例如标题、复选框和视频，

HTML

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

并通过java脚本填充表格，如

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);
}

现在我需要通过复选框选择视频并提取值 h3 元素

$('#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'));
            }
        });
    });
});

但是控制台打印

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

如果选中该复选框，如何获取 h3 元素的值？

Answer 1

您需要给出数组索引才能找到 h3 标签。就像“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>