遍历单个<td>元素-Laravel

时间:2020-02-27 04:06:25

标签: javascript php jquery html laravel

我是Laravel的新手。我使用@foreach制作了一个从数据库获取数据的表。我想使数据库值1和0显示为Active和Inactive之类的词。但是,我制作的JavaScript仅显示第一列(如下面的输出图像所示)。有没有办法使脚本应用于整个表?谢谢!

<tbody>
    @foreach ($data as $row)
    <tr>
        <td> {{ $row->id }}</td>
        <td> {{ $row->name }}</td>
        <td> {{ $row->description }}</td>
        <td id=statust> {{ $row->status }}</td>
        <td id="defaulttt"> {{ $row->default }}</td>
        <td><a href="{{action('DetailTestController@edit',$row->id)}}" class="btn btn-warning">EDIT</a></td>
        <td>
            <form method="post" class="delete_form" action="{{action('DetailTestController@destroy', $row['id'])}}">
                {{csrf_field()}}
                <input type="hidden" name="_method" value="DELETE"/>
                <button type="submit" class="btn btn-danger">Delete</button>
            </form>
        </td>
    </tr>
    @endforeach
</tbody>

JavaScript

function checkshow() {
    if (document.getElementById("statust").innerHTML == 1) {
        document.getElementById("statust").innerHTML = "Active";
    } else {
        document.getElementById("statust").innerHTML = "Inactive";
    }
    return;
}

Output

5 个答案:

答案 0 :(得分:3)

我不确定为什么要为此目的使用一个js代码段。实际上,在这种情况下,您只需使用三元即可。

如果其他情况(三元运算符),则刀片模板将理解该缩写:

<tbody>
    @foreach ($data as $row)
    <tr>
    <td> {{ $row->id }} </td>
    <td> {{ $row->name }} </td>
    <td> {{ $row->description }} </td>
    <td> {{ ($row->status == 1) ? 'Active' : 'Inactive' }} </td>
    <td id = "defaulttt"> {{ $row->default }} </td>
    <td><a href="{{action('DetailTestController@edit',$row->id)}}" class="btn btn-warning">EDIT</a></td>
    <td>
    <form method="post" class="delete_form" action="{{action('DetailTestController@destroy', $row['id'])}}">
      {{csrf_field()}}
      <input type="hidden" name="_method" value="DELETE" />
      <button type="submit" class="btn btn-danger">Delete</button>
    </form>
    </td>
    </tr>

    @endforeach
</tbody>

JS的旁注:如果您尝试应用多个动作实例,那么class s而非id s更适合此任务

答案 1 :(得分:1)

将此条件告知您的状态

@foreach ($data as $row)
 @php
   $status = "";
   @if($row->status == '1')
     $status = "Active";
   @else
     $status = "Inactive";
   @elseif
 @endphp

<td>{{ $status }} </td>
@endforeach

<td> {{ ($row->status == 1) ? 'Active' : 'Inactive' }} </td>

答案 2 :(得分:0)

您可以这样做

<tbody>
       @foreach ($data as $row)
        <tr>
        <td> {{ $row->id }} </td>
        <td> {{ $row->name }} </td>
        <td> {{ $row->description }} </td>
        <td id = statust> @if($row->status == 1) Active @else Inactive @endif </td>
        <td id = "defaulttt"> {{ $row->default }} </td>
        <td><a href="{{action('DetailTestController@edit',$row->id)}}" class="btn btn-warning">EDIT</a></td>
        <td>
        <form method="post" class="delete_form" action="{{action('DetailTestController@destroy', $row['id'])}}">
          {{csrf_field()}}
          <input type="hidden" name="_method" value="DELETE" />
          <button type="submit" class="btn btn-danger">Delete</button>
        </form>
        </td>
        </tr>

        @endforeach
  </tbody>

答案 3 :(得分:0)

<tbody>
   @foreach ($data as $row)
     @php
       $status = "";
       @if($row->status == '1')
         $status = "Active"
       @else
         $status = "Inactive"
       @elseif
     @endphp
    <tr>
    <td> {{ $row->id }} </td>
    <td> {{ $row->name }} </td>
    <td> {{ $row->description }} </td>
    <td>{{ $status }} </td>
    <td id = "defaulttt"> {{ $row->default }} </td>
    <td><a href="{{action('DetailTestController@edit',$row->id)}}" class="btn btn-warning">EDIT</a></td>
    <td>
    <form method="post" class="delete_form" action="{{action('DetailTestController@destroy', $row['id'])}}">
      {{csrf_field()}}
      <input type="hidden" name="_method" value="DELETE" />
      <button type="submit" class="btn btn-danger">Delete</button>
    </form>
    </td>
    </tr>
    @endforeach

答案 4 :(得分:0)

您的代码仅影响表的第一行的原因是因为您通过id而不是作为选择器的类来调用元素。 ID选择器用于唯一的元素。将其更改为class并在整个class的javascript循环上进行修改,然后像这样应用您的逻辑。

如果您使用的是jQuery:

$('.statust').each(function() {
   if($(this).html() ==1){
      $(this).html("Active");
   }else{
      $(this).html("Inactive");
   }  
})

如果您使用的是javascript核心:

document.getElementsByClassName("statust").forEach(function(e) {
   if(e.innerHTML ==1){
      e.innerHTML = "Active";
   }else{
      e.innerHTML = "Inactive";
   }  
})
相关问题