Question

我有一张桌子，看起来像这样：

<form id="myForm">
  <table class="table" align="center">
    <tr style="background-color: #337ab7">
      <th>soort dag</th>
      <th>Day</th>
      <th>Date</th>
      <th>Place</th>
      <th>name</th>
      <th>Type</th>
      <th>costs</th>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>1</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>2</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>3</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>4</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>5</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>6</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
    <tr>
      <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> 
      </td>
      <td>7</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" />euro</td>
    </tr>
  </table>
</form>

但我希望当人们选择'op reis'按钮时，该行将被隐藏，并显示另一行。我知道我必须用id做这个，但是我必须给另一个id和另外一个脚本隐藏和显示。

Answer 1

步骤1：将jQuery包含在您的html页面中

<head>
<script src="jquery-1.11.3.min.js"></script>
</head>

步骤2：

将此查询包含在您的脚本中：

$(document).ready(function(){
    $("input").click(function(event){
        var row = $(this).closest("tr");
        row.hide();
        //$("#some other row").show();
    });
});

步骤3：在隐藏单击的行后，为脚本提供要显示的行。

请注意，$("input")也可以在您的文本框中使用此功能，如果您提供此类的轻量级按钮（即$(".disappearOnClick")），则可以将其替换为class = "disappearOnClick"

Answer 2

如果我理解正确，这应该有效

HTML：

<form id="myForm">
<table class="table" align="center">
    <tr class="nav_row" style="background-color: #337ab7">
        <th>soort dag</th>
        <th>Day</th>
        <th>Date</th>
        <th>Place</th>
        <th>name</th>
        <th>Type</th>
        <th>costs</th>
    </tr>
</table>

jQuery的：

$(function() {

    showHide();

});

function showHide() {

//Generate 7 rows and hide them

for (i = 7; i > 0; i--) {

    $('.nav_row').after('<tr id="row_' + i + '"> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>' + i + '</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr>');
    $('#row_' + i).hide();
}

//Check if first row exists and show it

if ($('#row_1').length == 1) {

    $('#row_1').css('display', 'table-row');

}

checklast = $('input').parents('tr').length; //number of rows

i = 1;

$("input[value='op reis']").click(function() {

    id = $(this).parents('tr').attr('id'); //Get ID of row clicked

    //If it is the last row - return (stop)

    if (id == 'row_' + checklast) {
        return;
    };

    //hides previous, shows next row

    if (id == 'row_' + i) {

        $('#row_' + i).fadeOut('fast').css('display', 'none');
        i++;
        $('#row_' + i).fadeIn('normal').css('display', 'table-row');

    }

});

}

如何。隐藏这个div？

2 个答案: