Question

这是一个jsfiddle：https://jsfiddle.net/55cc077/pvu5cmta/

由于css height：100％仅在元素的父级具有明确定义的高度时才有效，因此该jQuery设置单元格高度。有更好的方法吗？

<script type="text/javascript">
    $(function(){
    $('.myTable2 tr').each(function(){
    var H1 = $(this).height(); // Get the row height
    $(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to row height
    });
});
</script>

Answer 1

仅限CSS：将表格单元格设置为public interface MyClickListener { void onResult(Data data); } public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { public MyAdapter(Context context, MyClickListener listener, List<ListModel> list) { mContext = context; this.list = list; this.listener = listener; } @Override public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) { Data data = getData(position); //bind views holder.button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { listener.onResult(data); } }); } }

将div设置为

public class MyFragment extends Fragment implements MyClickListener  {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        MyAdapter adapter = new MyAdapter(getActivity(),this,listData);
    }

    @Override
    public void onResult(Data data) {

        //do work after an item is clicked
   }

}

https://jsfiddle.net/yxwsjr3v/

Answer 2

为什么在td中使用div来设置背景颜色？只需设置td本身的背景颜色，如下所示：

＆＃13;

	table, th , td {
		border: 1px solid grey;
		border-collapse: collapse;
		padding: 0px;
		text-align:center;
	}

	th {
		background:#abcdef;
	}
	.myTable1, .myTable2 {
		width:20px;
	}
	.gray {
		background:#b0b0b0;
	}

＆＃13;

<p>mytable1 without jQuery</p>
	<table class="myTable1">
	  <tr>
		  <th>Column 1</th>
	  	<th>Column 2</th>
	  </tr>
	  <tr>
		   <td class="gray">1</td>
		  <td>10 20 30 40 50 60</td>
	  </tr>
	  <tr>
		   <td class="gray">2</td>
		  <td>80</td>
	  </tr>
	  <tr>
		   <td class="gray">3</td>
		  <td>75</td>
	  </tr>
	  <tr>
		   <td class="gray">4</td>
		  <td>30</td>
	  </tr>
	  <tr>
		  <td class="gray">5</td>
		  <td>21 31 41 51 61 100 200</td>
	  </tr>

	</table>

＆＃13;

使用jQuery将div填充整个表格单元格

2 个答案: