Question

我无法使用clojurescript /试剂让我的餐桌正确排队。我实际上不确定这是不是我不明白在html中做什么或者是什么......

目前我使用循环显示表体

(defn table-body [list-of-maps] 
[:tbody
  (for [one-map list-of-maps]
     [:tbody
      [:tr
       [:td (:key1 one-map)]
       [:td (:key2 one-map)]
       [:td (:key3 one-map)]
       [:td (:key4 one-map)]
       [:td (:key5 one-map)]
       [:td (:key6 one-map)]
       [:td (:key7 one-map)]]
      [:tr
       [:td (:key8 one-map)]]])])

问题是我需要在for和for之外使用一些html元素进行分组，对吧？如果我在两者上都使用[：tbody]，它会弄乱[：thead]部分的对齐。如果我使用除tbody之外的元素，那么它会产生各种其他问题。如果我删除for循环中的[：tbody]和最后一个[：tr]，一切看起来都很好。

编辑：我目前已经将问题缩小了很多。我的应用程序ajax获取并解析与表有关的数据。在重新渲染时，表的格式变得混乱。

Edit2：我发现了这个问题。

(defn test-body [list-of-maps]
[:tbody
  (for [one-map @list-of-maps]
     [:tbody
      [:tr
       [:td (:key1 one-map)]
       [:td (:key2 one-map)]
       [:td (:key3 one-map)]
       [:td (:key4 one-map)]
       [:td (:key5 one-map)]
       [:td (:key6 one-map)]
       [:td (:key7 one-map)]]
      [:tr
       [:td (:key8 one-map)]]])])

(defn test-head []
  [:thead
   [:th "key1"]
   [:th "key2"]
   [:th "key3"]
   [:th "key4"]
   [:th "key5"]
   [:th "key6"]
   [:th "key7"]])

(defn test55 []
  (let [list-of-maps (reagent/atom [])]
    (js/setTimeout (fn [] (reset! list-of-maps '({:key1 "a1" :key2 "a2" :key3 "a3" :key4 "a4" :key5 "a5" :key6 "a6" :key7 "a7" :key8 "a8"} {:key1 "b1" :key2 "b2" :key3 "b3" :key4 "b4" :key5 "b5" :key6 "b6" :key7 "b7" :key8 "b8"}))) 3000)
    [:table
     [test-head]
     [test-body list-of-maps]]))

当map-of-maps重新呈现表的对齐时。

Answer 1

事实证明，这个问题可以通过简单地将事物视为向量来解决。您希望最终结果看起来像什么向量？

[:tbody 
   [:tr 
      [:td "a1"] [:td "a2"] [:td "a3"] [:td "a4"] [:td "a5"] [:td "a6"] [:td "a7"]] 
   [:tr 
      [:td "a8"]] 
   [:tr 
      [:td "b1"] [:td "b2"] [:td "b3"] [:td "b4"] [:td "b5"] [:td "b6"] [:td "b7"]] 
   [:tr 
      [:td "b8"]]]

因此，以此为目标，我们开始让body函数创建它。

(defn test-body [list-of-maps]
  (into [] (concat [:tbody] (apply concat (for [one-map @list-of-maps]
                                            [
                                             [:tr
                                              [:td (:key1 one-map)]
                                              [:td (:key2 one-map)]
                                              [:td (:key3 one-map)]
                                              [:td (:key4 one-map)]
                                              [:td (:key5 one-map)]
                                              [:td (:key6 one-map)]
                                              [:td (:key7 one-map)]]
                                             [:tr
                                              [:td (:key8 one-map)]]])))))

这是我的解决方案。可能会有一个更好的。

Answer 2

我猜你的问题是行中的单元格数不等。 HTML TD元素具有COLSPAN属性。尝试在最后一行中设置上述行中的单元格数。

(defn test-body
  [list-of-maps]
  [:tbody
    (for [one-map @list-of-maps]
       [:tbody
        [:tr
         [:td (:key1 one-map)]
         [:td (:key2 one-map)]
         [:td (:key3 one-map)]
         [:td (:key4 one-map)]
         [:td (:key5 one-map)]
         [:td (:key6 one-map)]
         [:td (:key7 one-map)]]
        [:tr
         [:td {:colspan 7} (:key8 one-map)]]])])

Clojurescript / Reagent中的两排循环表体

2 个答案: