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

admin管理员组

文章数量:1025218

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,,

• javascript
• jquery
• html
• html-table

Share Improve this question Follow edited Jun 7, 2013 at 11:58 James asked Jun 7, 2013 at 11:51 JamesJames 2,25633 gold badges2424 silver badges4343 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

Sorted by: 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

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,,

• javascript
• jquery
• html
• html-table

Share Improve this question Follow edited Jun 7, 2013 at 11:58 James asked Jun 7, 2013 at 11:51 JamesJames 2,25633 gold badges2424 silver badges4343 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

Sorted by: 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

本文标签： javascriptRemove a row from Html table based on conditionStack Overflow