代码之家 › 专栏 › 技术社区 › achmad darmawan

查找并替换所有不工作的html代码

html jquery

achmad darmawan · 技术社区 · 6 年前

为什么查找和替换不起作用的html代码?但当我用一个字符串或一些文本进行测试时,它会起作用。请给我解决办法。下面我将根据需要编写示例代码和结果代码

(#1)我的代码:

$(document).ready(function() {
  var getContent = $("table").html();
  var setReplaced = getContent.replace(/\td><td/g, 'td></tr><tr><td');
  $("table").html(setReplaced);
  console.log(setReplaced);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
    <tr>
      <td>333</td>
      <td>444</td>
    </tr>
  </tbody>
</table>

(#2)我想要这样的Html。

<table>
    <tbody> 
        <tr>
            <td>111</td>
        </tr>
        <tr>
            <td>222</td>
        </tr>
        <tr>
            <td>333</td>
        </tr>
        <tr>
            <td>444</td>
        </tr> 
    </tbody>
</table>

请更正我的jquery代码。给我一个解决办法。非常感谢你

5 回复 | 直到 6 年前

Suricat 6 年前

你的正则表达式好像有错别字。你是说:

getContent.replace(/\/td><td/g,'/td></tr><tr><td');

Já´ÊMá´á´ 6 年前

您正在尝试替换以下实例: \td><td 但是你永远不会用反斜杠关闭HTML标记。 \td> 应该是正斜杠。确保你也能逃脱。

getContent.replace(/\/td><td/g,'/td></tr><tr><td');

Pete Irfan TahirKheli 6 年前

您可以使用each循环而不是regex:

$('tr').each(function() {
  var $thisTr = $(this),        // get this tr
    $newTr = $('<tr></tr>');    // make a new tr
  
  $newTr.append($thisTr.children().last());    // append the last cell into the new tr
  $thisTr.after($newTr);                       // put the new tr after the current tr
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
    <tr>
      <td>333</td>
      <td>444</td>
    </tr>
  </tbody>
</table>

jaws 6 年前

也许是这边?

$(document).ready(function() { 
  var tds = $('table').find('td');
  if ( tds.parent().is( "tr" ) ) {
    tds.unwrap();
  }
  $('table td').wrap('<tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody> 
        <tr>
            <td>111</td><td>222</td>
        </tr>
        <tr>
            <td>333</td><td>444</td>
        </tr> 
    </tbody>
</table>

Suricat 6 年前

这似乎是你真正想要的:

每非第一次 td
插入新的 tr 低于当前值
然后移动 td公司 在新的一排

这样做的好处是不直接修改html

$(document).ready(function() {
    var table = $("table");
    var cells = $("td:not(:first-child)", table);
    cells.each(function(i, td) {
        var newtr = $("<tr>");
        $(td).parent().after(newtr);
        newtr.append(td);
    });
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前