删除具有特定内容的表tr

时间:2015-04-28 13:02:32

标签: javascript jquery html

我在SharePoint 2013网络应用程序中有以下表单: -

enter image description here

我需要删除除<tr>开头的所有表"name" & "title"。所以有人愿意如何实现这一目标吗? 。这里是上面图片标记的一部分(它显示两个Tr有内容类型(应该被删除),而另一个包含Name): -

<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>

现在我在Web应用程序中加载了jquery 1.7版,但我更喜欢使用纯javaScript。

由于

编辑这里有一个更详细的标记: -

<div id="contentRow">
<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
<div id="contentBox" aria-relevant="all" aria-live="polite">
<div id="notificationArea" class="ms-notif-box"></div>
<div id="DeltaPageStatusBar">
<div id="customcalender"></div>
<div id="DeltaPlaceHolderMain">
<a id="mainContent" tabindex="-1" name="mainContent"></a>
<div style="padding-left:5px">
<table id="onetIDListForm" class="ms-core-tableNoSpace">
<tbody>
<tr>
<td>
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ2" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div id="WebPartWPQ2" class="noindex " style="" allowdelete="false" width="100%" haspers="false" webpartid="6c7d849e-da6b-4138-be9f-b99bde542065">
<table class="ms-informationbar" width="100%" cellspacing="0" cellpadding="2" border="0" style="margin-bottom: 5px;">
<div id="listFormToolBarTop" style="display: none;">
<span style="display:none">
<span></span>
<table width="100%">
<tbody>
<tr>
<td width="100%" valign="top">
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<tr>

5 个答案:

答案 0 :(得分:2)

如有疑问,filter是您的朋友:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/jjzx6mge/4/

$('#formTbl tr').filter(function () {
    return !$(".ms-standardheader", this).text().match(/Name|Title/i);
}).remove();

传递给filter的函数返回的结果是一个布尔值,告诉哪些项目要保留(truthy),哪些要排除(falsey)。

此目标仅定位ms-standardheader分类元素中具有请求文本的行。

它也只针对特定的内部表格,以避免从顶级表格进行深度搜索并清除其中的整个表格。

虽然你可以用普通的旧JS做到这一点,但是需要更多代码。因为你已经安装了jQuery版本,所以使用它是有意义的。

答案 1 :(得分:1)

这样可行:

&#13;
&#13;
$(function() {

  $('#formTbl tr').each(function() {
    var frstVal = $(this).find('td').eq(0).text();
    if (!frstVal.match(/name|title/i)) {
      $(this).remove()
    }
  });

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
    <tbody>
        <tr>
            <td class="ms-formlabel" valign="top" nowrap="true">
                <h3 class="ms-standardheader">Content Type</h3>
            </td>
            <td class="ms-formbody" valign="top">
        </tr>
        <tr>
            <td class="ms-formlabel" width="113px" valign="top" nowrap="true">

                <h3 class="ms-standardheader">
<nobr>
Title
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>

            </td>
            <td class="ms-formbody" width="350px" valign="top">
        </tr>
        <tr>
            <td class="ms-formlabel" width="113px" valign="top" nowrap="true">
                <h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
            </td>
            <td class="ms-formbody" width="350px" valign="top">
        </tr>
        <tr>
            <tr>
                <td class="ms-formlabel" width="113px" valign="top" nowrap="true">
                    <td class="ms-formbody" width="350px" valign="top">
            </tr>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

这将删除包含tr.ms-standardheader

文本的Name元素的每个Title
$('#formTbl tr').each(function() {
   var that = $(this);
   var label = that.find('.ms-standardheader').text();       
   if (label.indexOf('Name') != -1 || label.indexOf('Title') != -1) {
      that.remove();
   }
});

答案 3 :(得分:0)

而我在这里,做这个好的事情&#39;简单的JS方式,因为你已经要求了:) http://jsfiddle.net/m53esfpo/3/

编辑:更新了代码和小提琴(感谢@TrueBlueAussie)

删除除名称或标题之外的每个tr。

var t = document.getElementById('formTbl');

for (var i = 0; i < t.getElementsByTagName("tr").length; i++) {
    var s = t.getElementsByTagName("tr")[i].getElementsByClassName('ms-formlabel');
    if (s.length > 0) {
        if (s[0].innerText.indexOf('Name') < 0 && s[0].innerText.indexOf('Title') < 0) {
            t.getElementsByTagName("tr")[i].parentNode.removeChild(t.getElementsByTagName("tr")[i]);
        }
    }
}

答案 4 :(得分:-1)

你可以这样做:

 $("#formTbl tr td h3").not("h3:contains('Name'):contains('Title')").closest('tr').remove();