最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - Remove a row from Html table based on condition - Stack Overflow

matteradmin4PV0评论

I have a html table

<TABLE id="dlStdFeature" Width="300" Runat="server" CellSpacing="0" CellPadding="0">
  <TR>
    <TD id="stdfeaturetd" vAlign="top" width="350" runat="server"></TD>
  </TR>
</TABLE>

I am dynamically adding values to it as :

function AddToTable(tblID, value)
{
    var $jAdd = jQuery.noConflict();

    var row= $jAdd("<tr/>").attr("className","lineHeight");
    var cell = $jAdd("<td/>").attr({"align" : "center","width" : "3%"});
    var cell1 = $jAdd("<td/>").html("<b>* </b>" + value);
    row.append(cell);
    row.append(cell1);
    $jAdd(tblID).append(row);
}

Now I want a function to remove a row from this table if the value matches..as

function RemoveFromTable(tblID, VALUE)
{
   If(row value = VALUE)
   {
     remove this row
   }
}

Here VALUE is TEXT ..which needs to be matched..If exists need to remove that row,,

I have a html table

<TABLE id="dlStdFeature" Width="300" Runat="server" CellSpacing="0" CellPadding="0">
  <TR>
    <TD id="stdfeaturetd" vAlign="top" width="350" runat="server"></TD>
  </TR>
</TABLE>

I am dynamically adding values to it as :

function AddToTable(tblID, value)
{
    var $jAdd = jQuery.noConflict();

    var row= $jAdd("<tr/>").attr("className","lineHeight");
    var cell = $jAdd("<td/>").attr({"align" : "center","width" : "3%"});
    var cell1 = $jAdd("<td/>").html("<b>* </b>" + value);
    row.append(cell);
    row.append(cell1);
    $jAdd(tblID).append(row);
}

Now I want a function to remove a row from this table if the value matches..as

function RemoveFromTable(tblID, VALUE)
{
   If(row value = VALUE)
   {
     remove this row
   }
}

Here VALUE is TEXT ..which needs to be matched..If exists need to remove that row,,

Share Improve this question edited Jun 7, 2013 at 11:58 James asked Jun 7, 2013 at 11:51 JamesJames 2,2563 gold badges24 silver badges43 bronze badges 9
  • Hello. What is the value of a line for you? Would you say the id or the title ? – Mehdi Bugnard Commented Jun 7, 2013 at 11:53
  • I also would not remend removing the row (manipulating DOM is heavy). Maybe just hiding it will be enough? – mishik Commented Jun 7, 2013 at 11:54
  • VALUE is TEXT, which needs to be matched – James Commented Jun 7, 2013 at 11:56
  • how you are calling RemoveFromTable() – GautamD31 Commented Jun 7, 2013 at 11:57
  • calling from a javascript function – James Commented Jun 7, 2013 at 11:57
 |  Show 4 more ments

5 Answers 5

Reset to default 5

try this

function RemoveFromTable(tblID, VALUE){
   $("#"+tblID).find("td:contains('"+VALUE+"')").closest('tr').remove();
}

hope it will work

Try like this

function RemoveFromTable(tblID, VALUE)
{
   If(row value = VALUE)
   {
      $("TR[id="+VALUE+"]").hide();  //Assumes that VALUE is the id of tr which you want to remove it
   }
}

You can also .remove() like

$("TR[id="+VALUE+"]").remove();

I highly remend using a ViewModel in your case. So you can dynamically bind your data to a table and conditionally format it to whatever you like. Take a look at Knockout.js: http://knockoutjs./

function RemoveFromTable(tblID, VALUE){
   $(tblID).find('td').filter(function(){
     return $.trim($(this).text()) === VALUE;
   }).closest('tr').remove();
}

Remove row from HTML table that doesn't contains specific text or string using jquery.

Note: If there are only two column in HTML table, we can use "last-child" attribute to find.

*$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
    var lastTD = $(this).find("td:last-child");
    var lastTdText = lastTD.text().trim();
    if(!lastTdText.includes("DrivePilot")){
        $(this).remove();
    }
});

});

Note: If there are more than two column in HTML table, we can use "nth-child(2)" attribute to find.

Passing column index with "nth-child(column index)"

$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
    var lastTD = $(this).find("td:nth-child(2)");
    var lastTdText = lastTD.text().trim();
    if(!lastTdText.includes("DrivePilot")){
        $(this).remove();
    }
});

});

Note: "DrivePilot" is nothing but text or string

Post a comment

comment list (0)

  1. No comments so far