格式化表格中的单元格，而不重复相同的代码数百次？答案

【问题标题】：Formatting cells in a table, without repeating the same code hundreds of times?格式化表格中的单元格，而不重复相同的代码数百次？
【发布时间】：2017-04-03 15:50:27
【问题描述】：

我正在处理大量数据的显示页面。有些数据是短字符串，有些是长字符串（>200char），有些是数字。我的问题是：当我创建一个表格并设置它的样式时，我如何制作它，以便表格的样式为该表格中的单元格设置固定大小，而无需为每个单独的单元格手动设置它，因为我已经结束了50 个 10 行或更多行的表，每个表有多个单元格。我问这个是因为我输入的数据似乎正在调整单元格的大小以使其适合，并且它会压碎相邻的单元格，这是不可能发生的。这是我想要的示例：

                             <table style={table_style_sub}>
                                <tr>
                                   <td><b>Client Name:</b></td>
                                    <td>{client2}</td>
                                </tr>
                                <tr>
                                    <td><b>Location:</b></td>
                                    <td>{client2Location}</td>
                                </tr>
                                <tr>
                                    <td><b>Phone:</b></td>
                                    <td>{client2Phone}</td>
                                </tr>
                                <tr>
                                    <td><b>Emails:</b></td>
                                    <td>{client2Email}</td>
                                </tr>
                                <tr>
                                    <td style={cell_format}><b>Details:</b></td>
                                    <td>{client2Service}</td>
                                </tr>
                            </table>

例如，这是我的桌子。这是格式：

var table_style_sub={
    margin: 'auto',
    width: '400px',
    marginBottom: '15px',
    border: '1px dotted black'
}

有没有办法添加到这个table_style_sub 以使相应表格的每个<td> 的宽度为'Xpx'，而无需手动输入<td style={{width:"Xpx}}> 超过300 次。

如果您想了解我实际有多少行，请查看完整代码：http://pastebin.com/6rzRz2Vj

【问题讨论】：

你可以使用jquery吗？
我不熟悉 jquery。我可以试试。
哦不，你的代码太难过了:(你根本不应该重复任何事情。使用.map()...遍历数据并将其映射到视图...这个文件很大。
老实说，我什至不知道从哪里开始。但是，如果您正在使用 react，为什么不制作一个包含表格行和/或单元格的组件呢？您可能还想考虑查看临时变量，或使用 ES6 解构分配，或几乎任何东西，以避免这个噩梦代码:(
为什么不直接使用 CSS？！

标签： javascript html css reactjs jsx

【解决方案1】：

你可以在 javascript 本身中尝试这样的事情，

在您的代码中，似乎有一个 id="messagesDiv" 包围表格的 div，因此可以使用该 id 并获取 tds，然后在 javascript 中将其样式设置为宽度，如下所示，

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
  <script src="angular.min.js"></script>
</head>
<body>

<form class="index-form" name="LoginForm">
<div class="card__supporting-text mdl-color-text--white-600" id="messagesDiv">
             
                        <h3>Contact Information</h3>
                        <table style={table_style}>
                            <tr>
                                <td><b>Legal Name: </b></td>
                                <td>{legalEntity}</td>
                            </tr>
                            <tr>
                                <td><b>Operating Name:</b> </td>
                                <td>{operatingName}</td>
                            </tr>
                            <tr>
                                <td><b>Role: </b></td>
                                <td>{string_role[role]}</td>
                            </tr>
                            <tr>
                                <td><b>Address 1: </b></td>
                                <td>{address1}</td>
                            </tr>
                            <tr>
                                <td><b>Address 2: </b></td>
                                <td>{address2}</td>
                            </tr>
                            <tr>
                                <td><b>City:</b> </td>
                                <td>{city}</td>
                            </tr>
                            <tr>
                                <td><b>Province:</b></td>
                                <td>{province}</td>
                            </tr>
                            <tr>
                                <td><b>Country: </b></td>
                                <td>{country}</td>
                            </tr>
                            <tr>
                                <td><b>Postal Code:</b></td>
                                <td>{postalCode}</td>
                            </tr>
                            <tr>
                                <td><b>Phone:</b></td>
                                <td>{phone}</td>
                            </tr>
                            <tr>
                                <td><b>Fax:</b></td>
                                <td>{fax}</td>
                            </tr>
                            <tr>
                                <td><b>Email:</b></td>
                                <td>{email}</td>
                            </tr>
                            <tr>
                                <td><b>Admin Contact:</b></td>
                                <td>{adminContact}</td>
                            </tr>
                            <tr>
                                <td><b>Techncal Contact:</b></td>
                                <td>{technicalContact}</td>
                            </tr>
                        </table>
                        </div>
</form>
<script>
	var div=document.getElementById("messagesDiv");
	var tds=div.getElementsByTagName("td");
	for(var i=0;i<tds.length;i++){
		tds[i].style.width='200px';
	}
</script>
</body>
</html>

【讨论】：

请不要这样做。你正在用 React 编写代码。 React 与这种方法相反。
@KrzysztofDąbrowski，哈哈，是的，后来我意识到这是行不通的。