Question

我有像这样的HtmlTable行：

public class sharedcollect extends ActionBarActivity {

ListView movielist;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_sharedcollect);

    Intent i = getIntent();
    ArrayList<String> list = i.getStringArrayListExtra("im");




}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_sharedcollect, menu);
    return true;
}

@Override
public void onBackPressed() {
    //do whatever to save the settings
    moveTaskToBack(true);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.

    switch (item.getItemId()){
        case R.id.action_settings:
           Intent intent = new Intent(sharedcollect.this,AllMovieRating.class);
            startActivity(intent);
            return true;
        default:
            return super.onOptionsItemSelected(item);
    } }}

我有六个“列”的单元格用于Date1，Date2，... Date6

我想开始只显示Date1，然后在必要时将其他Date列显示为。

所以，我创建了一个“隐藏”类：

<tr>
    <td class="centertextnowrap"><strong>Description of Expense</strong></td>
    <td class="centertext"><label>Date 1: </label><input type="date" id="date1" name="date1"/></td>
    <td class="centertext hide"><label>Date 2: </label><input type="date" id="date2" name="date2"/></td>
    <td class="centertext hide"><label>Date 3: </label><input type="date" id="date3" name="date3"/></td>
    <td class="centertext hide"><label>Date 4: </label><input type="date" id="date4" name="date4"/></td>
    <td class="centertext hide"><label>Date 5: </label><input type="date" id="date5" name="date5"/></td>
    <td class="centertext hide"><label>Date 6: </label><input type="date" id="date6" name="date6"/></td>
    <td class="skybluebackground centertext"><label><strong>Total Expenses</strong></label></td>
    <td colspan="4" class="nobordercell centertext"><label>Comments</label></td>
</tr>

...它应用于除Date1之外的所有日期列，如上所示：

.hide {
  visibility: hidden;
  display: none;
}

这适用于隐藏整个列（假设我在每行中使用“hide”类装饰适当的td）。我计划通过这个jQuery在需要时使列可见：

<td class="centertext hide"><label>Date 2: </label><input type="date" id="date2" name="date2"/></td>

在回复“添加另一个日期”按钮时，我可以跟踪哪个是“揭开”的下一列。这似乎是合理的，但也许有点单调乏味。

有没有更简洁的方法来实现这一目标？

Answer 1

一种解决方案是使用:nth-child选择器。例如，如果您想显示＆＃34;日期5＆＃34;专栏，你可以写：

$("#tableId td:nth-child(6)").removeClass("hide")

<强> Example Fiddle

Answer 2

您可以将:first选择器与hide类一起使用。喜欢以下

    $("td.hide:first").removeClass("hide");

一个例子

＆＃13;

$("button").click(function() {
  $("td.hide:first").removeClass("hide");
});

＆＃13;

.hide {
    display: none;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Column 1</td>
    <td class="hide">Column 2</td>
    <td class="hide">Column 3</td>
    <td class="hide">Column 4</td>
    <td class="hide">Column 5</td>
  </tr>
</table>
<button>Show More</button>

＆＃13;

Answer 3

在开头设置变量：

 var date = 1;

你的'添加另一个日期'按钮应该是这样的。

date = (date + 1);
$( '<td class="centertext hide"><label>Date: </label><input type="date" id="date"'+date' name="date"'+date'/></td>" ).appendTo( "tr" )';

如何通过JavaScript / jQuery显示隐藏的HtmlTable“列”？

3 个答案: