Question

我有一个表，其列可以根据其中的内容增长，但我想通过在特定列的两行之后添加“Read More”链接来限制该增长。所以我可以说下面给出了一个td：

<table>
    <tr>
        <td role="gridcell" style="padding-bottom: 50px;">
            <p><span style="font-family:'Open Sans', Arial, sans-serif;font-size:14px;line-height:20px;text-align:justify;background-color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada luctus porta. Sed eu magna quis sem bibendum tincidunt. Pellentesque rhoncus efficitur risus, eu pretium metus consequat quis. Phasellus eget porta augue. Fusce porta magna nisi, vel euismod ante ultrices in. Vestibulum faucibus, lectus sit amet ornare efficitur, est tellus egestas sem, nec consequat tellus lorem eget elit. Morbi venenatis convallis lorem, eu ornare eros blandit posuere.</span>
            </p>
            <p><span style="font-family:'Open Sans', Arial, sans-serif;font-size:14px;line-height:20px;text-align:justify;background-color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada luctus porta. Sed eu magna quis sem bibendum tincidunt. Pellentesque rhoncus efficitur risus, eu pretium metus consequat quis. Phasellus eget porta augue. Fusce porta magna nisi, vel euismod ante ultrices in. Vestibulum faucibus, lectus sit amet ornare efficitur, est tellus egestas sem, nec consequat tellus lorem eget elit. Morbi venenatis convallis lorem, eu ornare eros blandit posuere.</span>
            </p>
        </td>
    </tr>
</table>

我想要包装两个段落，只显示上面的td中的两行，并附加一个“Read More”按钮，这样点击它就会显示剩余的内容。有什么建议吗？

代码：

listItems.each(function(i, listItems) {
        var max_length = 150; // set the max content length before a read more link will be added

        // check for content length
        if ($(this).html().length > max_length) {
            // split the content in two parts
            var short_content = $(this).html().substr(0, max_length);
            var long_content = $(this).html().substr(max_length);

            // Alter the html to allow the read more functionality
            $(this).html(short_content +
                '<a href="#" class="read_more"><br/>Read More</a>' +
                '<span class="more_text" style="display:none;">' + long_content + '</span>');

            $(this).find('a.read_more').click(function(event) { // find the a.read_more element within the new html and bind the following code to it
                event.preventDefault(); // prevent the a from changing the url
                $(this).hide(); // hide the read more button
                $(this).parents().find('.more_text').show(); // show the .more_text span
            });
        }
    }

Answer 1

这是一个非常简单的解决方案，它只接受目标单元格中的文本，用单词分割，而不是用前10个单词替换原始单元格html，而不是附加链接，单击处理程序将附加其余的原始单元格文本：

＆＃13;

$(function() {
	// Get the cell
	var td = $("td.more");
  
  // Get the text and split it into words
  var words = td.text().trim().split(" ").filter(function(w) {
  	return (w.length > 0) && (w != "\n");
  });
  
  // Get the basic text first 10 words
  var base = words.slice(0, 10)
  
  // Get the rest
  var rest = words.slice(10);
  
  // Replace cell original text with first 10 words
  td.html(base.join(" "));
  
  // Append more link to the cell
  $("<a>", {
  	html: " more..."
  }).css("color", "blue").appendTo(td).click(function() {
    // Remove the link
  	$(this).remove();
    
    // Append the rest of the original text
    td.append(" " + rest.join(" "));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="more" role="gridcell" style="padding-bottom: 50px;"> 
      <p>
        <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada luctus porta. Sed eu magna quis sem bibendum tincidunt. Pellentesque rhoncus efficitur risus, eu pretium metus consequat quis. Phasellus eget porta augue. Fusce porta magna nisi, vel euismod ante ultrices in. Vestibulum faucibus, lectus sit amet ornare efficitur, est tellus egestas sem, nec consequat tellus lorem eget elit. Morbi venenatis convallis lorem, eu ornare eros blandit posuere.
        </span>
      </p>
      <p>
        <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada luctus porta. Sed eu magna quis sem bibendum tincidunt. Pellentesque rhoncus efficitur risus, eu pretium metus consequat quis. Phasellus eget porta augue. Fusce porta magna nisi, vel euismod ante ultrices in. Vestibulum faucibus, lectus sit amet ornare efficitur, est tellus egestas sem, nec consequat tellus lorem eget elit. Morbi venenatis convallis lorem, eu ornare eros blandit posuere.
        </span>
      </p> 
    </td>
  </tr>
</table>

＆＃13;

添加“阅读更多”按钮到html

1 个答案: