Question

我点击按钮（读取JS数组）后，在页面上动态打印了一个简单的表格。

<input type="submit" id = "marimc2013" class="campbutton" value="Click">
<div id="searcharea"></div>

function getArray(video) { 
 if (searchQuery === video[4]) {
   if (video[6] === 1)     
     $('#searcharea').append('<tr><td><h4>Masterclass ' + video[5] + '</h4></td></tr><tr><td>' + video[0] + '</td><td><h3>Composer: ' + video[1] + '\n</h3><h3>Player: ' + video[2] + '\n</h3><h3>Piece: ' + video[3] + '\n</h3><input type = "button" value = "  Play  " class = "play"/></td>');  

   else              
     $('#searcharea').append('<td>' + video[0] + '</td><td><h3>Composer: ' + video[1] + '\n</h3><h3>Player: ' + video[2] + '\n</h3><h3>Piece: ' + video[3] + '\n</h3><input type = "button" value = "  Play  " class = "play"/></td>');   

 } 

  else 
    noResultCount++;                    

} // End getArray()

 $('.campbutton').on('click', function () {
    $('#searcharea').html('<table>'); // First print table tag only
    searchQuery = $(this).attr('id');
  for (i = 0; i < videos.length; i++) {   
      getArray(videos[i]);           
  }
 });

这将以令人惊讶的方式打印表格JSFIDDLE。请注意，第一个td打印（Mastserclass I），但它会在新行上打印第二个视频。我的代码中没有看到任何可以在新行上打印下一个视频的内容。是否有新的tr进入某个地方？

现在，如果我做了一个非常微妙的更改并将tr标记放在这里与表标记一起使用：

$('#searcharea').html('<table><tr>'); // Now, <tr> placed along with <table>

然后将其从第一个附加的函数中删除：

 $('#searcharea').append('<td><h4>Masterclass ' + video[5]... // No leading tr

这里，第一个td（Masterclass I）没有打印JSFIDDLE，但两个视频都在同一行。

我试图同时获得＆＃34;大师班I＆＃34;在顶部打印并将元素放在同一行（应该是这样）。我最大的问题是，为什么在创建表时是否将tr标记附加到表上，或者在创建表之前它是否包含在html方法中，为什么它应该有所不同？我不明白。

非常感谢您的帮助。

Answer 1

首先你附加表格，然后你把表格中的行 IN apen，在函数内部同样的事情，你追加行，然后是行 IN 行：

FIDDLE：http://jsfiddle.net/8q9nx2xg/8/

var videos = [ 
    ['Some Text', 'Beethoven', 'Jill', 'Beethoven Op.101', 'marimc2013', 'I', 1], 
    ['Some Text', 'Beethoven', 'Jack', 'Beethoven Tempest', 'marimc2013', 'I', 'e']
];

var noResultCount = 0;
var searchQuery = "";

function getArray(video) { 
 if (searchQuery === video[4]) {
   if (video[6] === 1) {   
     $('#searcharea table').append('<tr></tr>');
     $('#searcharea table tr').append('<td><h4>Masterclass ' + video[5] + '</h4></td></tr><tr><td>' + video[0] + '</td><td><h3>Composer: ' + video[1] + '\n</h3><h3>Player: ' + video[2] + '\n</h3><h3>Piece: ' + video[3] + '\n</h3><input type = "button" value = "  Play  " class = "play"/></td>');
    }
   else {           
     $('#searcharea table').append('<tr></tr>');
     $('#searcharea table tr').append('<td>' + video[0] + '</td><td><h3>Composer: ' + video[1] + '\n</h3><h3>Player: ' + video[2] + '\n</h3><h3>Piece: ' + video[3] + '\n</h3><input type = "button" value = "  Play  " class = "play"/></td>');   
    }
 } 
else {noResultCount++; }                  

} // End of getArray()


 $('.campbutton').on('click', function () {
    $('#searcharea').append('<table></table>');
    searchQuery = $(this).attr('id');
    for (i = 0; i < videos.length; i++) {   
      getArray(videos[i]);           
    }
 });

作为该代码的结果，您有：

<table>
    <tbody>
        <tr>
            <td>Some Text</td>
            <td>
                <h3>Composer: Beethoven</h3>
                <h3>Player: Jill</h3>
                <h3>Piece: Beethoven Op.101</h3>
                <input type="button" value="  Play  " class="play">
            </td>
            <td>Some Text</td>
            <td>
                <h3>Composer: Beethoven</h3>
                <h3>Player: Jack</h3>
                <h3>Piece: Beethoven Tempest</h3>
                <input type="button" value="  Play  " class="play">
            </td>
        </tr>
        <tr>
            <td>Some Text</td>
            <td>
                <h3>Composer: Beethoven</h3>
                <h3>Player: Jack</h3>
                <h3>Piece: Beethoven Tempest</h3>
                <input type="button" value="  Play  " class="play">
            </td>
        </tr>
    </tbody>
</table>

jQuery动态表格式与前导标签上的不同位置不同

1 个答案: